Ejemplo de HtmlContent
Componente para renderizar HTML con estilos de Tailwind
Este es un ejemplo de cómo puedes usar el componente HtmlContent para renderizar HTML con estilos de Tailwind aplicados automáticamente.
Características principales
- Soporte para elementos HTML comunes
- Estilos consistentes con el diseño del sitio
- Fácil de usar y reutilizable
Ya no necesitas escribir HTML directamente en tus páginas, simplemente pasa el contenido como prop y el componente se encarga de aplicar los estilos.
Ejemplo de HtmlSection con imagen
Contenido HTML flexible
Este componente te permite crear secciones complejas con contenido HTML e imágenes sin escribir código HTML directamente en tus páginas.
Ventajas de usar HtmlSection
- Layout predefinido: No necesitas preocuparte por el CSS Grid o Flexbox
- Estilos consistentes: Todos los elementos HTML tienen estilos predefinidos
- Configuración flexible: Puedes ajustar el padding, fondo y posición de la imagen
Es perfecto para secciones como las que creaste en lateral-lift.astro donde necesitabas una estructura específica con HTML personalizado.
Contenido HTML con elementos complejos
Incluso puedes incluir componentes más complejos
Aunque el componente está diseñado para HTML simple, puedes combinarlo con otros componentes de Astro según necesites.
Posibilidades infinitas
Con estos componentes puedes:
- Crear secciones reutilizables para todo el sitio
- Mantener el código limpio y organizado
- Aplicar estilos consistentes a todo el contenido HTML
- Ahorar tiempo al no tener que escribir HTML y CSS repetitivo
Este enfoque es especialmente útil para contenido que viene de un CMS o API, como Strapi, donde ya recibes el HTML formateado.