bpoint: min 2xs xs sm md lg xl 2xl 3xl

Macros basics/link

lista · todo

Using label

.regular

Enlace estándar: Renderizado básico de un link con etiqueta de texto plana. (TID01)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Lorem ipsum dolor sit, use_caller=false})

Enlace con icono frontal (BICON): Verificación del posicionamiento de un icono antes del label. (TID02)

(SizeLimitingPyMap: {aicon=false, bicon=ui-arrow-right, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Lorem ipsum dolor sit, use_caller=false})

Enlace con icono posterior (AICON): Verificación del posicionamiento de un icono después del label. (TID03)

(SizeLimitingPyMap: {aicon=ui-arrow-right, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Lorem ipsum dolor sit, use_caller=false})

Enlace interno: Link apuntando a una página interna del portal (href=/link). (TID04)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=2398743434, href=/link}, open_in_new_tab=false, no_follow=false, rel=follow}, link_label=Ir a la página, use_caller=false})

Enlace trigger: Link apuntando a un ancla de la página (href=#link). (TID05)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=#link}, open_in_new_tab=false, no_follow=true, rel=nofollow noopener}, link_label=Ir al ancla, use_caller=false})

Caso inválido: link válido pero sin label. La guard clause requiere link_label — su ausencia hace que la macro no emita ningún HTML. (TID06)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=, use_caller=false})

Caso inválido: label válido pero sin link. La guard clause requiere item_link con URL — su ausencia hace que la macro no emita ningún HTML. (TID07)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link=null, link_label=Click aquí, use_caller=false})

.regular .disabled

Enlace estándar: Renderizado básico de un link con etiqueta de texto plana. (TID01)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Lorem ipsum dolor sit, use_caller=false})

Enlace con icono frontal (BICON): Verificación del posicionamiento de un icono antes del label. (TID02)

(SizeLimitingPyMap: {aicon=false, bicon=ui-arrow-right, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Lorem ipsum dolor sit, use_caller=false})

Enlace con icono posterior (AICON): Verificación del posicionamiento de un icono después del label. (TID03)

(SizeLimitingPyMap: {aicon=ui-arrow-right, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Lorem ipsum dolor sit, use_caller=false})

Enlace interno: Link apuntando a una página interna del portal (href=/link). (TID04)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=2398743434, href=/link}, open_in_new_tab=false, no_follow=false, rel=follow}, link_label=Ir a la página, use_caller=false})

Enlace trigger: Link apuntando a un ancla de la página (href=#link). (TID05)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=#link}, open_in_new_tab=false, no_follow=true, rel=nofollow noopener}, link_label=Ir al ancla, use_caller=false})

Caso inválido: link válido pero sin label. La guard clause requiere link_label — su ausencia hace que la macro no emita ningún HTML. (TID06)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=, use_caller=false})

Caso inválido: label válido pero sin link. La guard clause requiere item_link con URL — su ausencia hace que la macro no emita ningún HTML. (TID07)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link=null, link_label=Click aquí, use_caller=false})

.regular .color-invert

Enlace estándar: Renderizado básico de un link con etiqueta de texto plana. (TID01)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Lorem ipsum dolor sit, use_caller=false})

Enlace con icono frontal (BICON): Verificación del posicionamiento de un icono antes del label. (TID02)

(SizeLimitingPyMap: {aicon=false, bicon=ui-arrow-right, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Lorem ipsum dolor sit, use_caller=false})

Enlace con icono posterior (AICON): Verificación del posicionamiento de un icono después del label. (TID03)

(SizeLimitingPyMap: {aicon=ui-arrow-right, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Lorem ipsum dolor sit, use_caller=false})

Enlace interno: Link apuntando a una página interna del portal (href=/link). (TID04)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=2398743434, href=/link}, open_in_new_tab=false, no_follow=false, rel=follow}, link_label=Ir a la página, use_caller=false})

Enlace trigger: Link apuntando a un ancla de la página (href=#link). (TID05)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=#link}, open_in_new_tab=false, no_follow=true, rel=nofollow noopener}, link_label=Ir al ancla, use_caller=false})

Caso inválido: link válido pero sin label. La guard clause requiere link_label — su ausencia hace que la macro no emita ningún HTML. (TID06)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=, use_caller=false})

Caso inválido: label válido pero sin link. La guard clause requiere item_link con URL — su ausencia hace que la macro no emita ningún HTML. (TID07)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link=null, link_label=Click aquí, use_caller=false})

button

.button

Enlace tipo botón: Renderizado del link como botón de acento. (TID15)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Lorem ipsum dolor sit, use_caller=false})

.button .primary

Enlace tipo botón: Renderizado del link como botón de acento. (TID15)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Lorem ipsum dolor sit, use_caller=false})

.button .primary .disabled

Enlace tipo botón: Renderizado del link como botón de acento. (TID15)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Lorem ipsum dolor sit, use_caller=false})

.button .secondary

Enlace tipo botón: Renderizado del link como botón de acento. (TID15)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Lorem ipsum dolor sit, use_caller=false})

.button .secondary .disabled

Enlace tipo botón: Renderizado del link como botón de acento. (TID15)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Lorem ipsum dolor sit, use_caller=false})

.button .outlined

Enlace tipo botón: Renderizado del link como botón de acento. (TID15)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Lorem ipsum dolor sit, use_caller=false})

.button .outlined .disabled

Enlace tipo botón: Renderizado del link como botón de acento. (TID15)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Lorem ipsum dolor sit, use_caller=false})

.button .ghost

Enlace tipo botón: Renderizado del link como botón de acento. (TID15)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Lorem ipsum dolor sit, use_caller=false})

.button .ghost .disabled

Enlace tipo botón: Renderizado del link como botón de acento. (TID15)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Lorem ipsum dolor sit, use_caller=false})

button slider

.button-slider .primary

Button slider prev — solo icono (flecha izquierda), 44x44, label oculto para accesibilidad (TID11)

(SizeLimitingPyMap: {aicon=false, bicon=ui-arrow-left, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Anterior, use_caller=false})

Button slider next — solo icono (flecha derecha), 44x44, label oculto para accesibilidad (TID12)

(SizeLimitingPyMap: {aicon=ui-arrow-right, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Siguiente, use_caller=false})

.button-slider .secondary

Button slider prev — solo icono (flecha izquierda), 44x44, label oculto para accesibilidad (TID11)

(SizeLimitingPyMap: {aicon=false, bicon=ui-arrow-left, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Anterior, use_caller=false})

Button slider next — solo icono (flecha derecha), 44x44, label oculto para accesibilidad (TID12)

(SizeLimitingPyMap: {aicon=ui-arrow-right, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Siguiente, use_caller=false})

Using caller

.raw

Caller — contenido HTML libre dentro del enlace (TID08)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=Enlace con caller, use_caller=true})

Caller con icono y texto custom (TID09)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=2398743434, href=/link}, open_in_new_tab=false, no_follow=false, rel=follow}, link_label=Ver producto, use_caller=true})

Caller inválido — link sin label, no debe emitir HTML (TID10)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=, use_caller=true})

menu landing rrss

.belongs-to-landing-rrss-menu

Enlace de menú de redes sociales — clase belongs-to-landing-rrss-menu (texto claro, uppercase, tracking). (TID13)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=https://www.google.es}, open_in_new_tab=true, no_follow=true, rel=nofollow noopener}, link_label=LinkedIn, use_caller=false})

menu landing legales

.belongs-to-landing-legals-menu

Enlace de menú legal — clase belongs-to-landing-legals-menu (texto claro, normal). (TID14)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=2398743434, href=/link}, open_in_new_tab=false, no_follow=false, rel=follow}, link_label=Aviso legal, use_caller=false})

menu header

.belongs-to-header-menu

Enlace de menú de cabecera — clase belongs-to-header-menu (Rubik 24/32, blanco, flex centrado). (TID17)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=2398743434, href=/link}, open_in_new_tab=false, no_follow=false, rel=follow}, link_label=Programa, use_caller=false})

menu footer

.belongs-to-footer-menu

Enlace de menú de pie — clase belongs-to-footer-menu. (TID18)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=2398743434, href=/link}, open_in_new_tab=false, no_follow=false, rel=follow}, link_label=Aviso legal, use_caller=false})

menu legales

.belongs-to-legals-menu

Enlace de menú legal (pie estándar) — clase belongs-to-legals-menu. (TID19)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=2398743434, href=/link}, open_in_new_tab=false, no_follow=false, rel=follow}, link_label=Aviso legal, use_caller=false})

tag / cat trigger

.tag-trigger-link

Enlace trigger de tag/categoría — clase tag-trigger-link; la variante active marca la categoría seleccionada (semibold). (TID20)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=#link}, open_in_new_tab=false, no_follow=true, rel=nofollow noopener}, link_label=Diseño, use_caller=false})

.tag-trigger-link .active

Enlace trigger de tag/categoría — clase tag-trigger-link; la variante active marca la categoría seleccionada (semibold). (TID20)

(SizeLimitingPyMap: {aicon=false, bicon=false, item_link={url={type=external, content_id=null, href=#link}, open_in_new_tab=false, no_follow=true, rel=nofollow noopener}, link_label=Diseño, use_caller=false})

button.primary por fondo (back-extend)

button-slider primary/secondary por fondo (back-extend)