UI KIT

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

Macros basics/figure

lista · todo

No captions

.regular

Imagen Panorámica (Low Landscape): Imagen con relación de aspecto ancha. (TID01)

(SizeLimitingPyMap: {caption=false, item_image={alt=Night landscape, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/matthew-savage-starry-night.webp, width=522, height=348, max_width=522, max_height=348}})

Night landscape

Logo Cuadrado (Square Logo): Validación de renderizado de logotipos en formato cuadrado. (TID02)

(SizeLimitingPyMap: {caption=false, item_image={alt=Weyland yutani logo square, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/weiland.png, width=200, height=200, max_width=200, max_height=200}})

Logo Horizontal (Horizontal Logo): Comprobación de ajuste para logos alargados. (TID03)

(SizeLimitingPyMap: {caption=false, item_image={alt=Weyland yutani logo horizontal, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/WeyYu.webp, width=410, height=138, max_width=410, max_height=138}})

Imagen Cuadrada (Square): Renderizado estándar de imagen 1:1. (TID04)

(SizeLimitingPyMap: {caption=false, item_image={alt=Profesional portrait at the ofice, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/sqportrait.png, width=300, height=300, max_width=300, max_height=300}})

Profesional portrait at the ofice

Imagen Paisaje (Landscape): Renderizado estándar de imagen en formato horizontal. (TID05)

(SizeLimitingPyMap: {caption=false, item_image={alt=Urban landscape, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/urban.png, width=1536, height=1024, max_width=1536, max_height=1024}})

Urban landscape

.is-contained

Imagen Panorámica (Low Landscape): Imagen con relación de aspecto ancha. (TID01)

(SizeLimitingPyMap: {caption=false, item_image={alt=Night landscape, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/matthew-savage-starry-night.webp, width=522, height=348, max_width=522, max_height=348}})

Night landscape

Logo Cuadrado (Square Logo): Validación de renderizado de logotipos en formato cuadrado. (TID02)

(SizeLimitingPyMap: {caption=false, item_image={alt=Weyland yutani logo square, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/weiland.png, width=200, height=200, max_width=200, max_height=200}})

Logo Horizontal (Horizontal Logo): Comprobación de ajuste para logos alargados. (TID03)

(SizeLimitingPyMap: {caption=false, item_image={alt=Weyland yutani logo horizontal, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/WeyYu.webp, width=410, height=138, max_width=410, max_height=138}})

Imagen Cuadrada (Square): Renderizado estándar de imagen 1:1. (TID04)

(SizeLimitingPyMap: {caption=false, item_image={alt=Profesional portrait at the ofice, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/sqportrait.png, width=300, height=300, max_width=300, max_height=300}})

Profesional portrait at the ofice

Imagen Paisaje (Landscape): Renderizado estándar de imagen en formato horizontal. (TID05)

(SizeLimitingPyMap: {caption=false, item_image={alt=Urban landscape, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/urban.png, width=1536, height=1024, max_width=1536, max_height=1024}})

Urban landscape

.is-cover

Imagen Panorámica (Low Landscape): Imagen con relación de aspecto ancha. (TID01)

(SizeLimitingPyMap: {caption=false, item_image={alt=Night landscape, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/matthew-savage-starry-night.webp, width=522, height=348, max_width=522, max_height=348}})

Night landscape

Logo Cuadrado (Square Logo): Validación de renderizado de logotipos en formato cuadrado. (TID02)

(SizeLimitingPyMap: {caption=false, item_image={alt=Weyland yutani logo square, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/weiland.png, width=200, height=200, max_width=200, max_height=200}})

Logo Horizontal (Horizontal Logo): Comprobación de ajuste para logos alargados. (TID03)

(SizeLimitingPyMap: {caption=false, item_image={alt=Weyland yutani logo horizontal, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/WeyYu.webp, width=410, height=138, max_width=410, max_height=138}})

Imagen Cuadrada (Square): Renderizado estándar de imagen 1:1. (TID04)

(SizeLimitingPyMap: {caption=false, item_image={alt=Profesional portrait at the ofice, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/sqportrait.png, width=300, height=300, max_width=300, max_height=300}})

Profesional portrait at the ofice

Imagen Paisaje (Landscape): Renderizado estándar de imagen en formato horizontal. (TID05)

(SizeLimitingPyMap: {caption=false, item_image={alt=Urban landscape, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/urban.png, width=1536, height=1024, max_width=1536, max_height=1024}})

Urban landscape

Use captions

.regular

Caption corto: Texto breve descriptivo bajo la imagen. (TID06)

(SizeLimitingPyMap: {caption=Donec vel orci ac nunc pharetra vehicula, item_image={alt=Urban landscape, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/urban.png, width=1536, height=1024, max_width=1536, max_height=1024}})

Urban landscape — Donec vel orci ac nunc pharetra vehicula

Caption largo: Párrafo extenso para verificar el ajuste del texto y el espaciado del figcaption. (TID07)

(SizeLimitingPyMap: {caption=Phasellus sollicitudin ligula auctor, iaculis orci non, finibus ligula. Maecenas risus ligula, aliquam eu est vitae, finibus mollis nulla. Vestibulum suscipit mi in consequat fermentum. Praesent in erat dolor. In nec sollicitudin magna, id rhoncus diam. Phasellus in commodo nunc, id pretium urna. Suspendisse sollicitudin fermentum urna, vel rhoncus ex sodales et. Nullam venenatis congue velit, in ultrices nulla mattis sit amet. Ut ac sem eget nunc volutpat efficitur quis porta odio., item_image={alt=Urban landscape, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/urban.png, width=1536, height=1024, max_width=1536, max_height=1024}})

Urban landscape — Phasellus sollicitudin ligula auctor, iaculis orci non, finibus ligula. Maecenas risus ligula, aliquam eu est vitae, finibus mollis nulla. Vestibulum suscipit mi in consequat fermentum. Praesent in erat dolor. In nec sollicitudin magna, id rhoncus diam. Phasellus in commodo nunc, id pretium urna. Suspendisse sollicitudin fermentum urna, vel rhoncus ex sodales et. Nullam venenatis congue velit, in ultrices nulla mattis sit amet. Ut ac sem eget nunc volutpat efficitur quis porta odio.

Caso inválido: item_image null. La guard clause requiere item_image con src — su ausencia hace que la macro no emita ningún HTML. (TID08)

(SizeLimitingPyMap: {caption=false, item_image=null})

.regular .caption-left

Caption corto: Texto breve descriptivo bajo la imagen. (TID06)

(SizeLimitingPyMap: {caption=Donec vel orci ac nunc pharetra vehicula, item_image={alt=Urban landscape, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/urban.png, width=1536, height=1024, max_width=1536, max_height=1024}})

Urban landscape — Donec vel orci ac nunc pharetra vehicula

Caption largo: Párrafo extenso para verificar el ajuste del texto y el espaciado del figcaption. (TID07)

(SizeLimitingPyMap: {caption=Phasellus sollicitudin ligula auctor, iaculis orci non, finibus ligula. Maecenas risus ligula, aliquam eu est vitae, finibus mollis nulla. Vestibulum suscipit mi in consequat fermentum. Praesent in erat dolor. In nec sollicitudin magna, id rhoncus diam. Phasellus in commodo nunc, id pretium urna. Suspendisse sollicitudin fermentum urna, vel rhoncus ex sodales et. Nullam venenatis congue velit, in ultrices nulla mattis sit amet. Ut ac sem eget nunc volutpat efficitur quis porta odio., item_image={alt=Urban landscape, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/urban.png, width=1536, height=1024, max_width=1536, max_height=1024}})

Urban landscape — Phasellus sollicitudin ligula auctor, iaculis orci non, finibus ligula. Maecenas risus ligula, aliquam eu est vitae, finibus mollis nulla. Vestibulum suscipit mi in consequat fermentum. Praesent in erat dolor. In nec sollicitudin magna, id rhoncus diam. Phasellus in commodo nunc, id pretium urna. Suspendisse sollicitudin fermentum urna, vel rhoncus ex sodales et. Nullam venenatis congue velit, in ultrices nulla mattis sit amet. Ut ac sem eget nunc volutpat efficitur quis porta odio.

Caso inválido: item_image null. La guard clause requiere item_image con src — su ausencia hace que la macro no emita ningún HTML. (TID08)

(SizeLimitingPyMap: {caption=false, item_image=null})

.regular .caption-right

Caption corto: Texto breve descriptivo bajo la imagen. (TID06)

(SizeLimitingPyMap: {caption=Donec vel orci ac nunc pharetra vehicula, item_image={alt=Urban landscape, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/urban.png, width=1536, height=1024, max_width=1536, max_height=1024}})

Urban landscape — Donec vel orci ac nunc pharetra vehicula

Caption largo: Párrafo extenso para verificar el ajuste del texto y el espaciado del figcaption. (TID07)

(SizeLimitingPyMap: {caption=Phasellus sollicitudin ligula auctor, iaculis orci non, finibus ligula. Maecenas risus ligula, aliquam eu est vitae, finibus mollis nulla. Vestibulum suscipit mi in consequat fermentum. Praesent in erat dolor. In nec sollicitudin magna, id rhoncus diam. Phasellus in commodo nunc, id pretium urna. Suspendisse sollicitudin fermentum urna, vel rhoncus ex sodales et. Nullam venenatis congue velit, in ultrices nulla mattis sit amet. Ut ac sem eget nunc volutpat efficitur quis porta odio., item_image={alt=Urban landscape, loading=lazy, size_type=auto, src=https://26977350.fs1.hubspotusercontent-eu1.net/hubfs/26977350/demos/urban.png, width=1536, height=1024, max_width=1536, max_height=1024}})

Urban landscape — Phasellus sollicitudin ligula auctor, iaculis orci non, finibus ligula. Maecenas risus ligula, aliquam eu est vitae, finibus mollis nulla. Vestibulum suscipit mi in consequat fermentum. Praesent in erat dolor. In nec sollicitudin magna, id rhoncus diam. Phasellus in commodo nunc, id pretium urna. Suspendisse sollicitudin fermentum urna, vel rhoncus ex sodales et. Nullam venenatis congue velit, in ultrices nulla mattis sit amet. Ut ac sem eget nunc volutpat efficitur quis porta odio.

Caso inválido: item_image null. La guard clause requiere item_image con src — su ausencia hace que la macro no emita ningún HTML. (TID08)

(SizeLimitingPyMap: {caption=false, item_image=null})