Contenido principal y secciones

Código

Copiar el marcado

import "@luz-ds/catalog/components/glow.css";

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/glow.min.css" integrity="sha384-Jz/eFLH0Ygi6iqQ+xcRrRhniKJbUEGD6yVdCDsRKJDrTq4H6FcjT1dFGo7UmRWba" crossorigin="anonymous">

import "@luz-ds/catalog/components/main.css";

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/main.min.css" integrity="sha384-fSDcBofUvDclss8ermBOj5Mp3HwqS0KiPg5PdY1+ux+91hdpKOF9wcLmM+G3Coq4" crossorigin="anonymous">

import "@luz-ds/catalog/components/section.css";

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/section.min.css" integrity="sha384-IQZYJCtvKeQG+qt4Hfu95jMHtMMQam8TJG78lOSvj106ud4ncidLUQ+JjWKJKKpV" crossorigin="anonymous">

<body class="o-page luz-glow">
  <a class="luz-skip-link" href="#main-content">Skip to content</a>
  <!-- the header -->
  <main id="main-content" class="o-container o-stack luz-main" tabindex="-1">
    <!-- the hero -->
    <section class="o-stack luz-section" aria-labelledby="programme-title">
      <h2 id="programme-title">Programme</h2>
      <p>Twelve talks and six workshops over two days.</p>
    </section>
    <section class="o-stack luz-section luz-band" aria-labelledby="last-seats-title">
      <h2 id="last-seats-title">Registration closes on 30 April</h2>
      <div class="o-actions">
        <a class="luz-btn luz-btn--primary" href="#register">Register now</a>
      </div>
    </section>
  </main>
  <!-- the footer -->
</body>

<section class="o-stack luz-section" aria-labelledby="why-title">
  <p class="luz-section__eyebrow">Why teams switch</p>
  <h2 class="luz-section__title" id="why-title">One count for <em>every</em> shelf</h2>
  <p class="luz-section__lead">Acme Stock reads each sale as it happens, in every shop.</p>
  <!-- the content -->
</section>

<section class="o-stack luz-section" aria-labelledby="talks-title">
  <div class="o-row">
    <h2 class="luz-section__title" id="talks-title">Upcoming talks</h2>
    <a class="luz-section__more" href="/talks/">See all talks</a>
  </div>
  <!-- the content -->
</section>

Variantes y opciones

Clases de landing sobre los objetos de core, el encabezado de una sección y dos propiedades ajustables. Una sección destaca sobre la banda de core.

Cómo funciona

CSS de components/main.css, section.css y glow.css de @luz-ds/catalog sobre los objetos de core. No usa JavaScript.

• .o-container de core da al contenido principal su ancho y sus márgenes interiores, y .o-stack dispone los elementos en columna; la capa del catálogo va después de los objetos de core, así que prevalecen sus separaciones.
• El tinte del resplandor va en el borde inicial: arriba a la izquierda en una página de izquierda a derecha y arriba a la derecha en una de derecha a izquierda. --luz-glow-x lo desplaza; 50% lo centra en ambas direcciones.
• El encabezado comparte sus reglas y la propiedad ajustable em con el hero.
• El enlace de .luz-section__more se alinea al final con margin-inline-start: auto, así que sigue la dirección de lectura; se alinea con la línea base del título.
• Usa una sección en un <section> cuando el grupo tenga su propio encabezado, o en un <div> cuando no lo tenga.

Sin JavaScript

No cambia nada: el contenido principal, las secciones y el resplandor usan CSS.

Teclado y ARIA

Ninguno de los tres tiene una interacción ni un rol propios.

• El <main> es el punto de referencia principal y el destino del enlace para saltar al contenido: asígnale id y tabindex="-1".
• El enlace de .luz-section__more es un enlace normal, en el orden de la página tras el título. Su texto nombra la página que abre, así que fuera de contexto sigue teniendo sentido en una lista de enlaces.
• Un <section> con nombre mediante aria-labelledby se convierte en un punto de referencia de región; pon nombre solo a las secciones a las que se quiera saltar.
• El resplandor no transmite significado: si desaparece (con colores forzados o al imprimir), no se pierde nada.

Contraste y foco están en la pestaña Diseño.

Diseño

Cuándo usarlo

Usa el contenido principal y sus secciones en todas las páginas de un sitio de landing para mantener el mismo espacio entre bloques. Usa el resplandor en una página corta, como una página de inicio o de registro, para darle calidez.

Cuándo no usarlo

No uses una sección para separar párrafos de texto seguido: los estilos del texto ya lo hacen.

• Para colocar bloques uno al lado del otro, usa los objetos de cuadrícula de core, como ul.o-grid.o-grid--split para varias características con la misma importancia.
• No uses el resplandor en páginas largas ni detrás de una banda: el tinte compite con ella.

Buenas y malas prácticas

Redacción del contenido

Empieza cada sección con un encabezado que indique para qué sirve.

• Usa el nivel de encabezado siguiente al título de la página: <h2> debajo del <h1> del hero.
• Incluye una idea por sección; una segunda idea necesita otra sección.
• La etiqueta superior tiene entre una y tres palabras: es una etiqueta, no una frase. El título expresa la idea de la sección, en estilo de frase. La entradilla tiene una o dos frases; omite cualquiera de los tres elementos que no necesites.
• Haz que el enlace de .luz-section__more diga adónde lleva: «See all talks», no «See all» ni «More». Su texto es tuyo; los ejemplos son de ejemplo.
• Pon el em en una o dos palabras del título para destacarlas. Úsalo para enfatizar, no solo para añadir color.

Contraste y foco

El contenido principal y las secciones solo gestionan el espaciado; el encabezado añade texto principal y secundario sobre la página. El resplandor sitúa el texto sobre el tinte sutil de la marca en una esquina y sobre la superficie atenuada en la parte inferior.

Calculado a partir de los valores de los tokens de cada modo, redondeado hacia abajo. El mínimo es el de WCAG 2.2 AA: 4,5:1 para el texto.

• Foco: ninguno de los tres recibe el foco; los elementos que contienen conservan sus propios anillos.
• Acento: --luz-title-accent es tuyo. Comprueba el contraste del color que definas con la superficie de la página en todos los modos que ofrezcas; el texto necesita 4,5:1.
• Colores forzados: se elimina el resplandor y la página usa el fondo del sistema.

Tokens que utiliza

Los 18 tokens que leen, por familia, las reglas de .luz-main, .luz-section y .luz-glow del catálogo, definidas en components/main.css, section.css y glow.css. Cada familia enlaza a su página, donde están los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.

Color

--luz-brand-subtle, --luz-surface-muted, --luz-surface-page, --luz-text-primary, --luz-text-secondary

Spacing and sizing

--luz-space-3xl, --luz-space-md, --luz-space-sm

Typography

--luz-font-heading, --luz-font-mono, --luz-font-sans, --luz-text-2xl, --luz-text-3xl, --luz-text-4xl, --luz-text-base, --luz-text-lg, --luz-text-xl, --luz-text-xs

Teclado y ARIA están en la pestaña Código.