Steps Numbered

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

{{eyebrow}}{{headline}}{{subtitle}}{{step1_title}}{{step1_body}}{{step2_title}}{{step2_body}}{{step3_title}}{{step3_body}}{{cta_href}}{{cta}}

Componentes requeridos

steppertypographybutton

Anatomía CSS

<div class="layoutStepsNumbered">

</div>

CSS mínimo funcional

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

/* Layout: steps-numbered — structure only */
.l-steps-numbered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 64px 32px;
}
.l-steps-numbered__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  max-width: 640px;
}
.l-steps-numbered__stepper {
  width: 100%;
  max-width: 960px;
}
.l-steps-numbered__cta {
  display: flex;
  justify-content: center;
}
@media (max-width: 767px) {
  .l-steps-numbered__stepper.stepper--horizontal {
    flex-direction: column;
  }
}