CTA Newsletter

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}}{{subtitle}}{{cta}}{{privacyNote}}

Componentes requeridos

inputbuttontypography

Anatomía CSS

<div class="layoutCtaNewsletter">

</div>

Tokens resueltos

Valores finales tras seguir la cadena de tokens. Derivados del source: si un token cambia, esta tabla cambia sola.

CSS mínimo funcional

Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS.

/* Layout: cta-newsletter — structure only */
.l-cta-newsletter {
  text-align: center;
  padding: 48px 32px;
  max-width: 480px;
  margin: 0 auto;
}
.l-cta-newsletter__headline {
  font-size: var(--text-xl);
}
.l-cta-newsletter__subtitle {
  color: #525252;
}
.l-cta-newsletter__form {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}
.l-cta-newsletter__privacy {
  font-size: var(--text-xs);
  color: #525252;
}