Tipos de sitio
Landing page
La página de un producto o de un evento: un prompt para un LLM y recetas para su cabecera, hero, secciones, datos destacados y pie de página.
Pega el prompt en cualquier LLM. Te pregunta por tu página en rondas cortas, te enseña el plan y no escribe nada hasta que dices "go".
O construye tú la página con las recetas de abajo, en el orden en que las lee quien la visita. Usan solo las clases de core, del catálogo y de landing; Instalar LUZ indica los archivos que debes cargar.
Cabecera
El enlace para saltar al contenido, una cabecera que permanece arriba, el <main> que contiene los bloques de abajo y el pie de página. .o-page hace que el cuerpo de la página sea una columna al menos tan alta como la ventana, de modo que el pie de página quede abajo incluso en una página corta.
At 768 px of window and below, the links fold into the catalog's navbar menu. The example does not stick: on a page, .o-sticky keeps it at the top.
<body class="o-page luz-glow">
<a class="luz-skip-link" href="#main-content">Skip to content</a>
<header class="luz-site-header o-sticky">
<div class="o-container o-container--inline o-row">
<button class="luz-nav-toggle" type="button" popovertarget="site-nav" aria-label="Menu">
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h16"/></g></svg>
</button>
<a class="luz-site-header__brand" href="/">Acme Stock</a>
<nav class="luz-navbar" id="site-nav" aria-label="Main" popover>
<ul class="luz-navbar__list">
<li><a class="luz-navbar__link" href="/" aria-current="page">Product</a></li>
<li><a class="luz-navbar__link" href="/customers/">Customers</a></li>
<li><a class="luz-navbar__link" href="/pricing/">Pricing</a></li>
</ul>
</nav>
<div class="o-row luz-site-header__actions">
<a class="luz-btn luz-btn--ghost" href="/login/">Log in</a>
</div>
</div>
</header>
<main id="main-content" class="o-container o-stack luz-main" tabindex="-1">
<!-- the hero, then one section for each block -->
</main>
<!-- the footer -->
</body>Hero
El título de la página, una frase, la acción principal y una imagen: el hero. El único <h1> de la página está aquí. El texto va primero en el código fuente, así que es lo primero para un lector de pantalla y cuando las columnas se apilan.
Dale a la imagen su width y su height reales, y un alt que diga lo que muestra. No la cargues de forma diferida: es lo primero que aparece en la página.
New in version 2
Stock counts that keep up with the shop
Acme Stock updates every shelf as it sells, so you reorder before it runs out.
The picture goes under the text in a column narrower than 51rem, and beside it on a page of full width. The frame is empty, so it shows its flat surface, and the title is a paragraph: this page has its own <h1>.
<section class="luz-hero o-grid o-grid--split" aria-labelledby="hero-title">
<div class="luz-hero__copy">
<p class="luz-hero__eyebrow">New in version 2</p>
<h1 class="luz-hero__title" id="hero-title">Stock counts that keep up with the shop</h1>
<p class="luz-hero__lead">Acme Stock updates every shelf as it sells, so you reorder before it runs out.</p>
<div class="o-actions">
<a class="luz-btn luz-btn--primary" href="/trial/">Start free trial</a>
<a class="luz-btn luz-btn--outline" href="/demo/">Book a demo</a>
</div>
</div>
<div class="luz-hero__media">
<div class="luz-image luz-image--4x3">
<img src="/img/dashboard-1280.jpg" width="1280" height="960" alt="The stock dashboard, with the items running low marked" fetchpriority="high" decoding="async">
</div>
</div>
</section>Sección
Un bloque de la página con su propio <h2>: una sección con una cabecera (etiqueta superior, título y entradilla) y características del mismo peso como tarjetas en una lista. Al ser una lista, indica a un lector de pantalla cuántas hay. .o-grid--split da dos columnas cuando cada una dispone de 16rem, y una si no.
Para una llamada a la acción cerca del final de la página, añade .luz-band de core a la sección: el color de fondo va de un borde al otro y el texto conserva su columna.
Why teams switch
One count for every shelf
Acme Stock reads each sale as it happens, in every shop.
-
Counts as it sells
Every till updates the shelf it sold from.
-
Orders before it runs out
You set the minimum; the order is ready when stock reaches it.
<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 every shelf</h2>
<p class="luz-section__lead">Acme Stock reads each sale as it happens, in every shop.</p>
<ul class="o-grid o-grid--split">
<li class="luz-card">
<h3 class="luz-card__title">Counts as it sells</h3>
<p class="luz-card__body">Every till updates the shelf it sold from.</p>
</li>
<li class="luz-card">
<h3 class="luz-card__title">Orders before it runs out</h3>
<p class="luz-card__body">You set the minimum; the order is ready when stock reaches it.</p>
</li>
</ul>
</section>Datos destacados
Tres cifras que respaldan la promesa de la página, cada una un dato destacado con una etiqueta breve debajo, en una lista sobre la cuadrícula de core. Indica en la etiqueta o en la entradilla de dónde sale la cifra, y que sea una cifra que quien visita la página pueda comprobar.
-
4,000+
teams on the platform
-
99.95%
uptime in the last year
-
12 min
to set up, on average
Three columns from 768 px; in a narrower column the three stack.
<section class="o-stack luz-section" aria-labelledby="numbers-title">
<h2 id="numbers-title">What teams see in their first year</h2>
<ul class="o-grid o-grid--3">
<li>
<div class="luz-stat">
<p class="luz-stat__value">4,000+</p>
<p class="luz-stat__label">teams on the platform</p>
</div>
</li>
<li>
<div class="luz-stat">
<p class="luz-stat__value">99.95%</p>
<p class="luz-stat__label">uptime in the last year</p>
</div>
</li>
<li>
<div class="luz-stat">
<p class="luz-stat__value">12 min</p>
<p class="luz-stat__label">to set up, on average</p>
</div>
</li>
</ul>
</section>Pie de página
La marca y los enlaces que se buscan al final, en columnas: el pie de página. Cada columna es un <nav> que toma su nombre de su título. El patrón tiene también un pie de una sola línea.
From 768 px of window the brand is twice as wide as a column, in one row with them. Here it is a <div> with paragraphs for titles: this page has its own footer and headings.
<footer class="luz-site-footer">
<div class="o-container o-container--inline o-grid">
<div class="luz-site-footer__brand">
<p><strong>Acme Stock</strong> <span>v2.0</span></p>
<p>Stock counts that keep up with the shop.</p>
</div>
<nav class="luz-site-footer__col" aria-labelledby="footer-product">
<h2 class="luz-site-footer__col-title" id="footer-product">Product</h2>
<ul>
<li><a href="/pricing/">Pricing</a></li>
<li><a href="/trial/">Start free trial</a></li>
</ul>
</nav>
<nav class="luz-site-footer__col" aria-labelledby="footer-company">
<h2 class="luz-site-footer__col-title" id="footer-company">Company</h2>
<ul>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact sales</a></li>
</ul>
</nav>
</div>
</footer>