Footer Columns

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

{{footer_theme}}{{tagline}}{{col1_title}}{{col2_title}}{{col3_title}}{{legal}}

Filas repetibles

col1_link — link_url, link_label

col2_link — link_url, link_label

col3_link — link_url, link_label

Componentes requeridos

logonav-linkdivider

Anatomía CSS

<div class="layoutFooterColumns">

</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: footer-columns — structure only.
   Distribucion citada del footer de ATOM: marca separada de las columnas por
   un vacio grande (8.5em entre bloques), columnas cap a 13.375em con listas
   APRETADAS (0.3125em entre links — la densidad es parte del look), y fila
   legal en grid de 3 columnas. El lateral lo gobierna .container. */
.l-footer-columns {
  padding-block: 100px 32px;
  background-color: #fafafa;
  color: #0a0a0a;
  border-top: 1px solid #e5e5e5;
}

.l-footer-columns__top {
  display: flex;
  justify-content: space-between;
  /* separacion marca <-> columnas del footer-top__links de ATOM */
  gap: 8.5em;
}

.l-footer-columns__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 22rem;
}

.l-footer-columns__tagline {
  color: #525252;
}

.l-footer-columns__cols {
  display: flex;
  /* gap-sm de ATOM entre columnas; cada una cap a su 13.375em */
  gap: 20px;
  flex-wrap: wrap;
}

.l-footer-columns__col {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 13.375em;
  min-width: 9em;
  flex: 1;
}

.l-footer-columns__col-title {
  color: #525252;
  /* footer-link__col-top de ATOM: aire grande titulo -> lista */
  margin-block-end: 24px;
}

.l-footer-columns__col-links {
  display: flex;
  flex-direction: column;
  /* lista apretada de ATOM (footer-link__col-ul: 0.3125em) */
  gap: 0.3125em;
  align-items: flex-start;
}

.l-footer-columns__legal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-block-start: 80px;
}

.l-footer-columns__legal-text {
  color: #525252;
}

@media (max-width: 991px) {
  .l-footer-columns__top {
    flex-direction: column;
    gap: 48px;
  }
}

@media (max-width: 767px) {
  .l-footer-columns__cols {
    gap: 40px;
  }
  .l-footer-columns__col {
    max-width: none;
    min-width: 12em;
  }
  .l-footer-columns__legal {
    margin-block-start: 48px;
  }
}