Components (registry)Layout
Marquee de Reviews
Layout template: review-marquee
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
{{section_id}}{{eyebrow}}{{heading}}{{row1_quote_1}}{{row1_name_1}}{{row1_role_1}}{{row1_quote_2}}{{row1_name_2}}{{row1_role_2}}{{row2_quote_1}}{{row2_name_1}}{{row2_role_1}}{{row2_quote_2}}{{row2_name_2}}{{row2_role_2}}- Componentes requeridos
review-cardmarqueemarquee-draggable
Anatomía CSS
<div class="layoutReviewMarquee"> </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.
.l-review-marquee {
overflow: hidden;
padding-block: 125px;
}
.l-review-marquee__header {
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
text-align: center;
margin-inline: auto;
margin-block-end: 80px;
padding-inline: 24px;
max-width: 42rem;
}
.l-review-marquee__eyebrow {
color: #525252;
font-size: 12.8px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.l-review-marquee__title {
margin: 0;
}
.l-review-marquee__row {
margin-block-start: 24px;
}
/* El estirado de las cards NO va aqui: lo trae review-card.css, para que
funcione igual en un host que no use este layout. */
.l-review-marquee .marquee__item {
padding: 8px;
white-space: normal;
}
Codigo fuente
layouts/review-marquee.css
.l-review-marquee { overflow: hidden; padding-block: var(--section-padding-l); } .l-review-marquee__header { display: flex; flex-direction: column; gap: var(--spacing-4); align-items: center; text-align: center; margin-inline: auto; margin-block-end: var(--rhythm-s); padding-inline: var(--spacing-6); max-width: 42rem; } .l-review-marquee__eyebrow { color: var(--muted-foreground); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: 0.08em; text-transform: uppercase; } .l-review-marquee__title { margin: 0; } .l-review-marquee__row { margin-block-start: var(--spacing-6); } /* El estirado de las cards NO va aqui: lo trae review-card.css, para que funcione igual en un host que no use este layout. */ .l-review-marquee .marquee__item { padding: var(--spacing-2); white-space: normal; }