Components (registry)Layout
Testimonio Spotlight
Layout template: testimonial-spotlight
Contrato del layout
Un layout transporta anatomia, no pintura: se rellena por slots y depende del CSS de los componentes que lista. Instalarlo sin ellos lo deja sin estilos.
- Slots
{{quote}}{{avatar}}{{name}}{{role}}{{companyLogo}}- Componentes requeridos
avatartypographyimage
Anatomía CSS
<div class="layoutTestimonialSpotlight"> </div>
Tokens resueltos
Valores finales tras seguir la cadena de tokens. Derivados del source: si un token cambia, esta tabla cambia sola.
| Variante | Prop | Valor | Token |
|---|---|---|---|
| all | fg | #525252 | muted.foreground |
CSS mínimo funcional
Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS.
/* Layout: testimonial-spotlight — structure only */
.l-testimonial-spotlight {
text-align: center;
padding: 48px 32px;
max-width: 720px;
margin: 0 auto;
}
.l-testimonial-spotlight__quote {
font-size: var(--text-2xl);
font-style: italic;
margin-bottom: 24px;
}
.l-testimonial-spotlight__author {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.l-testimonial-spotlight__name {
font-weight: 600;
}
.l-testimonial-spotlight__role {
font-size: var(--text-sm);
color: #525252;
}
.l-testimonial-spotlight__logo {
height: 24px;
margin-left: 16px;
}
Codigo fuente
layouts/testimonial-spotlight.css
/* Layout: testimonial-spotlight — structure only */ .l-testimonial-spotlight { text-align: center; padding: var(--spacing-12) var(--spacing-8); max-width: 720px; margin: 0 auto; } .l-testimonial-spotlight__quote { font-size: var(--text-2xl); font-style: italic; margin-bottom: var(--spacing-6); } .l-testimonial-spotlight__author { display: flex; align-items: center; justify-content: center; gap: var(--spacing-3); } .l-testimonial-spotlight__name { font-weight: 600; } .l-testimonial-spotlight__role { font-size: var(--text-sm); color: var(--muted-foreground); } .l-testimonial-spotlight__logo { height: 24px; margin-left: var(--spacing-4); }