Components (registry)Layout
Gallery Carousel
Layout template: gallery-carousel
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
{{headline}}{{image1}}{{caption1}}{{image2}}{{caption2}}{{image3}}{{caption3}}{{image4}}{{caption4}}- Componentes requeridos
imagetypographyicon-button
Anatomía CSS
<div class="layoutGalleryCarousel"> </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 | bg | rgba(0,0,0,0.6) | (literal) |
| all | fg | white | (unparsed) |
CSS mínimo funcional
Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS.
/* Layout: gallery-carousel — structure only */
.l-gallery-carousel {
padding: 48px 32px;
}
.l-gallery-carousel__header {
text-align: center;
margin-bottom: 24px;
}
.l-gallery-carousel__track {
display: flex;
overflow: hidden;
}
.l-gallery-carousel__slides {
display: flex;
gap: 16px;
flex-shrink: 0;
}
.l-gallery-carousel__slide {
min-width: 80%;
position: relative;
}
.l-gallery-carousel__slide img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 12px;
}
.l-gallery-carousel__caption {
position: absolute;
bottom: 16px;
left: 16px;
background: rgba(0,0,0,0.6);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: var(--text-sm);
}
Codigo fuente
layouts/gallery-carousel.css
/* Layout: gallery-carousel — structure only */ .l-gallery-carousel { padding: var(--spacing-12) var(--spacing-8); } .l-gallery-carousel__header { text-align: center; margin-bottom: var(--spacing-6); } .l-gallery-carousel__track { display: flex; overflow: hidden; } .l-gallery-carousel__slides { display: flex; gap: var(--spacing-4); flex-shrink: 0; } .l-gallery-carousel__slide { min-width: 80%; position: relative; } .l-gallery-carousel__slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); } .l-gallery-carousel__caption { position: absolute; bottom: var(--spacing-4); left: var(--spacing-4); background: rgba(0,0,0,0.6); color: white; padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--text-sm); }