Blockquote

Paquete: @tiendana/web-foundation

Bloques de mensajes con iconos y gradientes de borde para destacar información importante.

Características

✅ 4 variantes visuales - Default, info, alert, warning
✅ Gradientes de borde - Técnica mask para bordes limpios
✅ Iconos circulares - Material Symbols Rounded integrados
✅ Diseño flexible - Soporta títulos y contenido largo
✅ Consistente - Usa tokens del design system
✅ Responsive - Adaptable a diferentes tamaños

Demos Visuales

Default (Forrest)

CSS/HTML/Angular

Cargando demo...

Ver código

Flutter

Cargando demo...

Ver código

Info (Success/Green)

CSS/HTML/Angular

Cargando demo...

Ver código

Flutter

Cargando demo...

Ver código

Alert (Error/Red)

CSS/HTML/Angular

Cargando demo...

Ver código

Flutter

Cargando demo...

Ver código

Warning (Green Neon)

CSS/HTML/Angular

Cargando demo...

Ver código

Estructura HTML

<!-- Estructura base -->
<blockquote class="[variante]">
  <div class="blockquote--icon">
    <i class="material-symbols-rounded mat-icon">[icono]</i>
  </div>
  <div>
    <strong>Título:</strong>
    <div class="blockquote--text">
      Contenido del mensaje...
    </div>
  </div>
</blockquote>

Ejemplos

<!-- Default (sin clase variante) -->
<blockquote>
  <div class="blockquote--icon">
    <i class="material-symbols-rounded mat-icon">info</i>
  </div>
  <div>
    <strong>Nota:</strong>
    <div class="blockquote--text">Mensaje general</div>
  </div>
</blockquote>

<!-- Info/Success -->
<blockquote class="blockquote--info">
  <div class="blockquote--icon">
    <i class="material-symbols-rounded mat-icon">check_circle</i>
  </div>
  <div>
    <strong>Éxito:</strong>
    <div class="blockquote--text">Operación completada</div>
  </div>
</blockquote>

<!-- Alert/Error -->
<blockquote class="blockquote--alert">
  <div class="blockquote--icon">
    <i class="material-symbols-rounded mat-icon">error</i>
  </div>
  <div>
    <strong>Error:</strong>
    <div class="blockquote--text">Algo salió mal</div>
  </div>
</blockquote>

<!-- Warning -->
<blockquote class="blockquote--warning">
  <div class="blockquote--icon">
    <i class="material-symbols-rounded mat-icon">warning</i>
  </div>
  <div>
    <strong>Advertencia:</strong>
    <div class="blockquote--text">Acción irreversible</div>
  </div>
</blockquote>

Flutter

Cargando demo...

Ver código

Props / API

CSS/HTML - Angular

CSS Classes

Clase	Descripción	Estilo
blockquote	Base (default)	Flex con gap --spacing-lg, fondo --color-light-forrest, borde sólido --color-forrest, radio --border-radius-2xl
.blockquote--info	Success/Info	Fondo #00D47E33 (natura con alfa), gradiente forrest→natura
.blockquote--alert	Error/Alert	Fondo #F54F4F33 (error con alfa), gradiente forrest→#F54F4F
.blockquote--warning	Warning	Fondo forrest claro, gradiente green-neon→forrest
.blockquote--icon	Contenedor de icono	Círculo de 48px (--spacing-2xl) con fondo según variante
.blockquote--text	Contenedor de texto	--font-size-base, peso normal, color --color-forrest con 60% de opacidad

Selectores

Las variantes se declaran como blockquote.blockquote--info, blockquote.blockquote--alert y blockquote.blockquote--warning: funcionan solo sobre el elemento <blockquote>. .blockquote--icon y .blockquote--text se estilizan solo dentro de un <blockquote>.

Color del icono

El color del glifo (--color-light-forrest en la base, --color-light-sun en alert y --color-dark-forrest en warning) se aplica únicamente a .mat-icon. Con <i class="material-symbols-rounded mat-icon"> el glifo hereda el color del texto del contenedor. Agrega mat-icon al <i> para que reciba el color del glifo.

Flutter

TdnBlockquote

Propiedad	Tipo	Default	Descripción
title	String	required	Título del blockquote
message	String	required	Mensaje del blockquote
icon	IconData	required	Ícono a mostrar

Constructores Nombrados

Constructor	Descripción
TdnBlockquote()	Blockquote default (Forrest)
TdnBlockquote.info()	Blockquote de éxito/información (Green)
TdnBlockquote.alert()	Blockquote de error/alerta (Red)
TdnBlockquote.warning()	Blockquote de advertencia (Green Neon)

---

Características Técnicas

Gradientes de Borde

• Info: Gradiente de forrest (#1B434C) a natura (#00D47E)
• Alert: Gradiente de forrest (#1B434C) a error (#F54F4F)
• Warning: Gradiente de green-neon (#C6F54F) a forrest (#1B434C)
• El borde de las variantes es un pseudo-elemento ::before recortado con mask + mask-composite: exclude, de --border-width-thin

Layout

• Flexbox con gap de 24px (--spacing-lg)
• Icono circular de 48px
• Padding de --spacing-md y margen vertical --spacing-md

Iconos Recomendados

Variante	Iconos Sugeridos
Default	info, lightbulb, description
Info	check_circle, done, verified
Alert	error, cancel, dangerous
Warning	warning, report, priority_high

Ver También

• Foundations - Colors - Paleta de colores
• Foundations - Borders - Sistema de bordes
• Utilities - Typography - Estilos de texto