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

Macros basics/wysiwyg

lista · todo

.regular

Texto sin etiquetas: Verificación de cómo el macro maneja strings planos sin HTML. (TID01)

(SizeLimitingPyMap: {html=Nam ut eros eget orci blandit aliquam tristique eu tortor.})
Nam ut eros eget orci blandit aliquam tristique eu tortor.

Párrafo simple: Renderizado básico de una etiqueta de párrafo con texto corto. (TID02)

(SizeLimitingPyMap: {html=<p>Lorem ipsum dolor sit amet, fusce quis mi vitae ipsum feugiat interdum at sit amet turpis. Suspendisse potenti.</p>})

Lorem ipsum dolor sit amet, fusce quis mi vitae ipsum feugiat interdum at sit amet turpis. Suspendisse potenti.

Contenido multilínea: Validación de múltiples párrafos y saltos de línea. (TID03)

(SizeLimitingPyMap: {html=<p>In non augue placerat, tincidunt lorem id, ullamcorper velit. Maecenas diam massa, cursus id ullamcorper ac, pretium nec ligula. Integer in ligula at augue tempus faucibus ut eget lorem. Pellentesque pellentesque ipsum ac est vestibulum egestas. Nunc blandit lectus blandit scelerisque malesuada</p><p>Suspendisse ac lectus ornare, vulputate ipsum fringilla, sodales diam. Integer dignissim sapien vitae dolor laoreet egestas. Vivamus sollicitudin risus et eros scelerisque tincidunt. Duis facilisis congue ipsum, sed convallis urna ornare sed. Aliquam ac eros sed arcu auctor ultrices sed vel erat. In est mauris, mattis et vehicula in, malesuada a urna</p>})

In non augue placerat, tincidunt lorem id, ullamcorper velit. Maecenas diam massa, cursus id ullamcorper ac, pretium nec ligula. Integer in ligula at augue tempus faucibus ut eget lorem. Pellentesque pellentesque ipsum ac est vestibulum egestas. Nunc blandit lectus blandit scelerisque malesuada

Suspendisse ac lectus ornare, vulputate ipsum fringilla, sodales diam. Integer dignissim sapien vitae dolor laoreet egestas. Vivamus sollicitudin risus et eros scelerisque tincidunt. Duis facilisis congue ipsum, sed convallis urna ornare sed. Aliquam ac eros sed arcu auctor ultrices sed vel erat. In est mauris, mattis et vehicula in, malesuada a urna

Kitchen sink: Prueba exhaustiva con diversos elementos HTML (negritas, listas, enlaces, citas, etc.) (TID04)

(SizeLimitingPyMap: {html=<p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em> Nunc mattis arcu quis sollicitudin interdum <strong>Curabitur eu dictum felis</strong> cursus pharetra augue elementum in magna sit amet <a href="#link">Duis quis tellus tortor</a>. Donec vel orci ac nunc pharetra vehicula. Proin venenatis pellentesque ligula, nec laoreet sapien maximus non. Nullam congue enim convallis tortor bibendum, a mollis lacus aliquet.</p><blockquote><p>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.</p><cite>John Doe</cite></blockquote><p>Ut vel enim ac nunc finibus suscipit. Etiam tempus rutrum tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce non nisl ante</p><ul><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li><li>Vestibulum at lorem nis</li><li>Nam eget metus sed ante vestibulum vehicula non eu nisi. Suspendisse ultrices sit amet lacus eu gravida.</li><li>Aenean velit justo, sodales sit amet fringilla nec</li></ul><p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam ac auctor lacus. Duis mattis arcu enim, ac viverra sem tincidunt vitae. Suspendisse eu hendrerit nisl, vel vulputate neque. Vestibulum tristique eros quis quam porta commodo. Cras libero tellus, gravida vel tellus nec, sagittis congue eros</p><p>Duis ex arcu, cursus eget bibendum eu, bibendum vel risus. Fusce quis mi vitae ipsum feugiat interdum at sit amet turpis. Suspendisse potenti.</p>})

Lorem ipsum dolor sit amet, consectetur adipiscing elit Nunc mattis arcu quis sollicitudin interdum Curabitur eu dictum felis cursus pharetra augue elementum in magna sit amet Duis quis tellus tortor. Donec vel orci ac nunc pharetra vehicula. Proin venenatis pellentesque ligula, nec laoreet sapien maximus non. Nullam congue enim convallis tortor bibendum, a mollis lacus aliquet.

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.

John Doe

Ut vel enim ac nunc finibus suscipit. Etiam tempus rutrum tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce non nisl ante

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Vestibulum at lorem nis
  • Nam eget metus sed ante vestibulum vehicula non eu nisi. Suspendisse ultrices sit amet lacus eu gravida.
  • Aenean velit justo, sodales sit amet fringilla nec

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam ac auctor lacus. Duis mattis arcu enim, ac viverra sem tincidunt vitae. Suspendisse eu hendrerit nisl, vel vulputate neque. Vestibulum tristique eros quis quam porta commodo. Cras libero tellus, gravida vel tellus nec, sagittis congue eros

Duis ex arcu, cursus eget bibendum eu, bibendum vel risus. Fusce quis mi vitae ipsum feugiat interdum at sit amet turpis. Suspendisse potenti.

Caso inválido: html vacío. La guard clause requiere contenido HTML — su ausencia hace que la macro no emita ningún HTML. (TID05)

(SizeLimitingPyMap: {html=})

.is-contained

Texto sin etiquetas: Verificación de cómo el macro maneja strings planos sin HTML. (TID01)

(SizeLimitingPyMap: {html=Nam ut eros eget orci blandit aliquam tristique eu tortor.})
Nam ut eros eget orci blandit aliquam tristique eu tortor.

Párrafo simple: Renderizado básico de una etiqueta de párrafo con texto corto. (TID02)

(SizeLimitingPyMap: {html=<p>Lorem ipsum dolor sit amet, fusce quis mi vitae ipsum feugiat interdum at sit amet turpis. Suspendisse potenti.</p>})

Lorem ipsum dolor sit amet, fusce quis mi vitae ipsum feugiat interdum at sit amet turpis. Suspendisse potenti.

Contenido multilínea: Validación de múltiples párrafos y saltos de línea. (TID03)

(SizeLimitingPyMap: {html=<p>In non augue placerat, tincidunt lorem id, ullamcorper velit. Maecenas diam massa, cursus id ullamcorper ac, pretium nec ligula. Integer in ligula at augue tempus faucibus ut eget lorem. Pellentesque pellentesque ipsum ac est vestibulum egestas. Nunc blandit lectus blandit scelerisque malesuada</p><p>Suspendisse ac lectus ornare, vulputate ipsum fringilla, sodales diam. Integer dignissim sapien vitae dolor laoreet egestas. Vivamus sollicitudin risus et eros scelerisque tincidunt. Duis facilisis congue ipsum, sed convallis urna ornare sed. Aliquam ac eros sed arcu auctor ultrices sed vel erat. In est mauris, mattis et vehicula in, malesuada a urna</p>})

In non augue placerat, tincidunt lorem id, ullamcorper velit. Maecenas diam massa, cursus id ullamcorper ac, pretium nec ligula. Integer in ligula at augue tempus faucibus ut eget lorem. Pellentesque pellentesque ipsum ac est vestibulum egestas. Nunc blandit lectus blandit scelerisque malesuada

Suspendisse ac lectus ornare, vulputate ipsum fringilla, sodales diam. Integer dignissim sapien vitae dolor laoreet egestas. Vivamus sollicitudin risus et eros scelerisque tincidunt. Duis facilisis congue ipsum, sed convallis urna ornare sed. Aliquam ac eros sed arcu auctor ultrices sed vel erat. In est mauris, mattis et vehicula in, malesuada a urna

Kitchen sink: Prueba exhaustiva con diversos elementos HTML (negritas, listas, enlaces, citas, etc.) (TID04)

(SizeLimitingPyMap: {html=<p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em> Nunc mattis arcu quis sollicitudin interdum <strong>Curabitur eu dictum felis</strong> cursus pharetra augue elementum in magna sit amet <a href="#link">Duis quis tellus tortor</a>. Donec vel orci ac nunc pharetra vehicula. Proin venenatis pellentesque ligula, nec laoreet sapien maximus non. Nullam congue enim convallis tortor bibendum, a mollis lacus aliquet.</p><blockquote><p>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.</p><cite>John Doe</cite></blockquote><p>Ut vel enim ac nunc finibus suscipit. Etiam tempus rutrum tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce non nisl ante</p><ul><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li><li>Vestibulum at lorem nis</li><li>Nam eget metus sed ante vestibulum vehicula non eu nisi. Suspendisse ultrices sit amet lacus eu gravida.</li><li>Aenean velit justo, sodales sit amet fringilla nec</li></ul><p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam ac auctor lacus. Duis mattis arcu enim, ac viverra sem tincidunt vitae. Suspendisse eu hendrerit nisl, vel vulputate neque. Vestibulum tristique eros quis quam porta commodo. Cras libero tellus, gravida vel tellus nec, sagittis congue eros</p><p>Duis ex arcu, cursus eget bibendum eu, bibendum vel risus. Fusce quis mi vitae ipsum feugiat interdum at sit amet turpis. Suspendisse potenti.</p>})

Lorem ipsum dolor sit amet, consectetur adipiscing elit Nunc mattis arcu quis sollicitudin interdum Curabitur eu dictum felis cursus pharetra augue elementum in magna sit amet Duis quis tellus tortor. Donec vel orci ac nunc pharetra vehicula. Proin venenatis pellentesque ligula, nec laoreet sapien maximus non. Nullam congue enim convallis tortor bibendum, a mollis lacus aliquet.

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.

John Doe

Ut vel enim ac nunc finibus suscipit. Etiam tempus rutrum tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce non nisl ante

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Vestibulum at lorem nis
  • Nam eget metus sed ante vestibulum vehicula non eu nisi. Suspendisse ultrices sit amet lacus eu gravida.
  • Aenean velit justo, sodales sit amet fringilla nec

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam ac auctor lacus. Duis mattis arcu enim, ac viverra sem tincidunt vitae. Suspendisse eu hendrerit nisl, vel vulputate neque. Vestibulum tristique eros quis quam porta commodo. Cras libero tellus, gravida vel tellus nec, sagittis congue eros

Duis ex arcu, cursus eget bibendum eu, bibendum vel risus. Fusce quis mi vitae ipsum feugiat interdum at sit amet turpis. Suspendisse potenti.

Caso inválido: html vacío. La guard clause requiere contenido HTML — su ausencia hace que la macro no emita ningún HTML. (TID05)

(SizeLimitingPyMap: {html=})

.is-cover

Texto sin etiquetas: Verificación de cómo el macro maneja strings planos sin HTML. (TID01)

(SizeLimitingPyMap: {html=Nam ut eros eget orci blandit aliquam tristique eu tortor.})
Nam ut eros eget orci blandit aliquam tristique eu tortor.

Párrafo simple: Renderizado básico de una etiqueta de párrafo con texto corto. (TID02)

(SizeLimitingPyMap: {html=<p>Lorem ipsum dolor sit amet, fusce quis mi vitae ipsum feugiat interdum at sit amet turpis. Suspendisse potenti.</p>})

Lorem ipsum dolor sit amet, fusce quis mi vitae ipsum feugiat interdum at sit amet turpis. Suspendisse potenti.

Contenido multilínea: Validación de múltiples párrafos y saltos de línea. (TID03)

(SizeLimitingPyMap: {html=<p>In non augue placerat, tincidunt lorem id, ullamcorper velit. Maecenas diam massa, cursus id ullamcorper ac, pretium nec ligula. Integer in ligula at augue tempus faucibus ut eget lorem. Pellentesque pellentesque ipsum ac est vestibulum egestas. Nunc blandit lectus blandit scelerisque malesuada</p><p>Suspendisse ac lectus ornare, vulputate ipsum fringilla, sodales diam. Integer dignissim sapien vitae dolor laoreet egestas. Vivamus sollicitudin risus et eros scelerisque tincidunt. Duis facilisis congue ipsum, sed convallis urna ornare sed. Aliquam ac eros sed arcu auctor ultrices sed vel erat. In est mauris, mattis et vehicula in, malesuada a urna</p>})

In non augue placerat, tincidunt lorem id, ullamcorper velit. Maecenas diam massa, cursus id ullamcorper ac, pretium nec ligula. Integer in ligula at augue tempus faucibus ut eget lorem. Pellentesque pellentesque ipsum ac est vestibulum egestas. Nunc blandit lectus blandit scelerisque malesuada

Suspendisse ac lectus ornare, vulputate ipsum fringilla, sodales diam. Integer dignissim sapien vitae dolor laoreet egestas. Vivamus sollicitudin risus et eros scelerisque tincidunt. Duis facilisis congue ipsum, sed convallis urna ornare sed. Aliquam ac eros sed arcu auctor ultrices sed vel erat. In est mauris, mattis et vehicula in, malesuada a urna

Kitchen sink: Prueba exhaustiva con diversos elementos HTML (negritas, listas, enlaces, citas, etc.) (TID04)

(SizeLimitingPyMap: {html=<p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em> Nunc mattis arcu quis sollicitudin interdum <strong>Curabitur eu dictum felis</strong> cursus pharetra augue elementum in magna sit amet <a href="#link">Duis quis tellus tortor</a>. Donec vel orci ac nunc pharetra vehicula. Proin venenatis pellentesque ligula, nec laoreet sapien maximus non. Nullam congue enim convallis tortor bibendum, a mollis lacus aliquet.</p><blockquote><p>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.</p><cite>John Doe</cite></blockquote><p>Ut vel enim ac nunc finibus suscipit. Etiam tempus rutrum tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce non nisl ante</p><ul><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li><li>Vestibulum at lorem nis</li><li>Nam eget metus sed ante vestibulum vehicula non eu nisi. Suspendisse ultrices sit amet lacus eu gravida.</li><li>Aenean velit justo, sodales sit amet fringilla nec</li></ul><p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam ac auctor lacus. Duis mattis arcu enim, ac viverra sem tincidunt vitae. Suspendisse eu hendrerit nisl, vel vulputate neque. Vestibulum tristique eros quis quam porta commodo. Cras libero tellus, gravida vel tellus nec, sagittis congue eros</p><p>Duis ex arcu, cursus eget bibendum eu, bibendum vel risus. Fusce quis mi vitae ipsum feugiat interdum at sit amet turpis. Suspendisse potenti.</p>})

Lorem ipsum dolor sit amet, consectetur adipiscing elit Nunc mattis arcu quis sollicitudin interdum Curabitur eu dictum felis cursus pharetra augue elementum in magna sit amet Duis quis tellus tortor. Donec vel orci ac nunc pharetra vehicula. Proin venenatis pellentesque ligula, nec laoreet sapien maximus non. Nullam congue enim convallis tortor bibendum, a mollis lacus aliquet.

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.

John Doe

Ut vel enim ac nunc finibus suscipit. Etiam tempus rutrum tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce non nisl ante

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Vestibulum at lorem nis
  • Nam eget metus sed ante vestibulum vehicula non eu nisi. Suspendisse ultrices sit amet lacus eu gravida.
  • Aenean velit justo, sodales sit amet fringilla nec

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam ac auctor lacus. Duis mattis arcu enim, ac viverra sem tincidunt vitae. Suspendisse eu hendrerit nisl, vel vulputate neque. Vestibulum tristique eros quis quam porta commodo. Cras libero tellus, gravida vel tellus nec, sagittis congue eros

Duis ex arcu, cursus eget bibendum eu, bibendum vel risus. Fusce quis mi vitae ipsum feugiat interdum at sit amet turpis. Suspendisse potenti.

Caso inválido: html vacío. La guard clause requiere contenido HTML — su ausencia hace que la macro no emita ningún HTML. (TID05)

(SizeLimitingPyMap: {html=})

intro

.intro .weight-medium

Texto de intro (TID06)

(SizeLimitingPyMap: {html=Nam ut eros eget orci blandit aliquam tristique eu tortor.})
Nam ut eros eget orci blandit aliquam tristique eu tortor.

.intro .color-muted

Texto de intro (TID06)

(SizeLimitingPyMap: {html=Nam ut eros eget orci blandit aliquam tristique eu tortor.})
Nam ut eros eget orci blandit aliquam tristique eu tortor.

.intro .weight-medium .color-secondary

Texto de intro (TID06)

(SizeLimitingPyMap: {html=Nam ut eros eget orci blandit aliquam tristique eu tortor.})
Nam ut eros eget orci blandit aliquam tristique eu tortor.

.intro-mini .color-muted

Texto de intro (TID06)

(SizeLimitingPyMap: {html=Nam ut eros eget orci blandit aliquam tristique eu tortor.})
Nam ut eros eget orci blandit aliquam tristique eu tortor.

.color-muted .intro-mini .line-through

Texto de intro (TID06)

(SizeLimitingPyMap: {html=Nam ut eros eget orci blandit aliquam tristique eu tortor.})
Nam ut eros eget orci blandit aliquam tristique eu tortor.

.intro-large .weight-bold

Texto de intro (TID06)

(SizeLimitingPyMap: {html=Nam ut eros eget orci blandit aliquam tristique eu tortor.})
Nam ut eros eget orci blandit aliquam tristique eu tortor.

.intro-responsive

Texto de intro (TID06)

(SizeLimitingPyMap: {html=Nam ut eros eget orci blandit aliquam tristique eu tortor.})
Nam ut eros eget orci blandit aliquam tristique eu tortor.

.intro-hard-responsive

Texto de intro (TID06)

(SizeLimitingPyMap: {html=Nam ut eros eget orci blandit aliquam tristique eu tortor.})
Nam ut eros eget orci blandit aliquam tristique eu tortor.

.page-header-intro

Texto de intro (TID06)

(SizeLimitingPyMap: {html=Nam ut eros eget orci blandit aliquam tristique eu tortor.})
Nam ut eros eget orci blandit aliquam tristique eu tortor.

.closeline

Texto de intro (TID06)

(SizeLimitingPyMap: {html=Nam ut eros eget orci blandit aliquam tristique eu tortor.})
Nam ut eros eget orci blandit aliquam tristique eu tortor.

.closeline .faded

Texto de intro (TID06)

(SizeLimitingPyMap: {html=Nam ut eros eget orci blandit aliquam tristique eu tortor.})
Nam ut eros eget orci blandit aliquam tristique eu tortor.