Components (registry)Layout
FAQ Accordion
Preguntas frecuentes en accordion de una columna, con CTA de contacto al final. Structure only.
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}}{{faq1_question}}{{faq1_answer}}{{faq2_question}}{{faq2_answer}}{{faq3_question}}{{faq3_answer}}{{faq4_question}}{{faq4_answer}}{{faq5_question}}{{faq5_answer}}{{contactHref}}{{contactCta}}- Componentes requeridos
accordionwhatsapp-buttontypography
Anatomía CSS
<div class="layoutFaqAccordion"> </div>
CSS mínimo funcional
Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS.
/* Layout: faq-accordion — structure only */
.l-faq-accordion {
padding-inline: var(--container-padding);
}
.l-faq-accordion__inner {
max-width: 45rem;
margin-inline: auto;
}
.l-faq-accordion__header {
text-align: center;
margin-bottom: 32px;
}
.l-faq-accordion__cta {
text-align: center;
margin-top: 32px;
}
Codigo fuente
layouts/faq-accordion.css
/* Layout: faq-accordion — structure only */ .l-faq-accordion { padding-inline: var(--container-padding); } .l-faq-accordion__inner { max-width: 45rem; margin-inline: auto; } .l-faq-accordion__header { text-align: center; margin-bottom: var(--spacing-8); } .l-faq-accordion__cta { text-align: center; margin-top: var(--spacing-8); }