Page Header Split

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

{{breadcrumb1_url}}{{breadcrumb1_label}}{{breadcrumb2_url}}{{breadcrumb2_label}}{{headline}}{{description}}

Componentes requeridos

breadcrumbtypography

Anatomía CSS

<div class="layoutPageHeaderSplit">

</div>

CSS mínimo funcional

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

/* Layout: page-header-split — structure only */
.l-page-header-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 48px 32px;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .l-page-header-split {
    grid-template-columns: 1fr;
  }
}
.l-page-header-split__left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.l-page-header-split__headline {
  font-size: var(--text-4xl);
}
.l-page-header-split__right {
  display: flex;
  align-items: center;
}