Tipos de sitio
Un blog o un periódico, con cualquier CMS: un prompt para un LLM y recetas para su cabecera, cabecera de página, tarjetas de artículo, cabecera de artículo, índice y pie de página.
Pega el prompt en cualquier LLM. Te pregunta por tu blog y tu CMS en rondas cortas, te enseña el plan y no escribe nada hasta que dices "go".
O constrúyelo tú con las recetas de abajo. Sirve con cualquier CMS o generador de sitios estáticos: cada receta es el HTML de una de sus plantillas y el CMS pone el texto. Usan solo las clases de core, del catálogo y de cms; Instalar LUZ indica los archivos que debes cargar.
El enlace para saltar al contenido, la cabecera con el nombre del blog y sus secciones, el <main> y el pie de página. Para un periódico, la cabecera de portada no permanece fija. La búsqueda y el selector de idioma son elementos del catálogo: omítelos si no lo cargas.
At 768 px of window and below, the sections 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">
<a class="luz-skip-link" href="#main-content">Skip to content</a>
<header class="luz-site-header luz-site-header--publication o-sticky">
<div class="o-container o-container--inline o-row">
<button class="luz-nav-toggle" type="button" popovertarget="cms-nav" aria-label="Sections">
<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="/">The Vejer Review</a>
<nav class="luz-navbar" id="cms-nav" aria-label="Sections" popover>
<ul class="luz-navbar__list">
<li><a class="luz-navbar__link" href="/news/" aria-current="true">News</a></li>
<li><a class="luz-navbar__link" href="/culture/">Culture</a></li>
<li><a class="luz-navbar__link" href="/opinion/">Opinion</a></li>
</ul>
</nav>
<div class="o-row luz-site-header__actions">
<luz-search>…</luz-search>
<luz-lang-switch>…</luz-lang-switch>
</div>
</div>
</header>
<main id="main-content" class="o-container o-stack" tabindex="-1">
<!-- a page header and a list of posts, or an article -->
</main>
<!-- the footer -->
</body>El título de una página que no es un artículo: una sección, un archivo, la página «Acerca de». La cabecera de página contiene su <h1> y una frase.
Coast
The sea, the port and the beaches of Vejer, and the people who work on them.
<div class="luz-page-header">
<h1 class="luz-page-header__title">Coast</h1>
<p class="luz-page-header__lead">The sea, the port and the beaches of Vejer, and the people who work on them.</p>
</div>Un artículo en una lista: una imagen, su sección, el título, una línea de resumen y la fecha. Es la tarjeta de core, sin CSS propio. El enlace del título convierte toda la tarjeta en un solo enlace, con una sola parada de tabulación; la sección es una etiqueta, no un segundo enlace.
Una lista de artículos es la lista de artículos, un <ul> que ajusta columnas de 16rem o más; el marcado de abajo también funciona sobre .o-grid--auto. Más tarjetas, los artículos relacionados y el recuadro del autor están en las plantillas de CMS.
Coast
Volunteers have read the gauge in the port twice a day since 2016.
Culture
Three families still set the almadraba each spring.
<ul class="o-grid o-grid--auto">
<li class="luz-card">
<div class="luz-image luz-image--3x2 u-mb-sm">
<img src="/img/tide-gauge-640.jpg" width="640" height="427" alt="" loading="lazy" decoding="async">
</div>
<p class="luz-tag luz-tag--gray u-mb-sm">Coast</p>
<h2 class="luz-card__title"><a href="/2026/10/tide-records/">What ten years of tide records say about the bay</a></h2>
<p class="luz-card__body">Volunteers have read the gauge in the port twice a day since 2016.</p>
<p class="luz-meta"><time datetime="2026-10-12">12 October 2026</time> <span>6 min read</span></p>
</li>
<!-- one li for each post -->
</ul>El principio de un artículo: su sección, el título, la entradilla, la firma con la fecha y el tiempo de lectura, y la imagen principal. La cabecera de artículo contiene el <h1> del artículo; la fecha y el tiempo de lectura son la línea de metadatos de core.
What ten years of tide records say about the bay
Volunteers have read the gauge in the port twice a day since 2016. The sea is four centimetres higher.
<header class="luz-article-header">
<p class="luz-article-header__kicker"><a href="/coast/">Coast</a></p>
<h1 class="luz-article-header__title">What ten years of tide records say about the bay</h1>
<p class="luz-article-header__standfirst">Volunteers have read the gauge in the port twice a day since 2016. The sea is four centimetres higher.</p>
<div class="luz-article-header__byline">
<span class="luz-avatar luz-avatar--lg"><img src="/authors/ana-ruiz-96.jpg" width="48" height="48" alt=""></span>
<div>
<p>By <a href="/authors/ana-ruiz/">Ana Ruiz</a></p>
<p class="luz-meta"><time datetime="2026-10-12">12 October 2026</time> <span>6 min read</span></p>
</div>
</div>
<figure class="luz-article-header__media">
<div class="luz-image">
<img src="/img/tide-gauge-1280.jpg" width="1280" height="720" alt="A green gauge post marked in centimetres, in shallow water by a stone quay" fetchpriority="high" decoding="async">
</div>
<figcaption>The tide gauge in the port, at low tide. Photo: Ana Ruiz.</figcaption>
</figure>
</header>Las secciones de un artículo largo, junto a su texto: el índice, en un <article> con el texto como texto corrido de core. Omítelo en un artículo corto y la maquetación es solo el texto.
Since March 2016, a group of volunteers has read the tide gauge in the port at six in the morning and six in the evening.
Each reading is the height of the water against the gauge, to the nearest centimetre, with the time and the wind.
The average height at high tide was 4 cm higher in 2025 than in 2016.
Beside the text when the article is 46rem wide or more, above it below that. With the catalog's script, the section in view is marked as you scroll.
<article class="luz-article">
<header class="luz-article-header">…</header>
<div class="luz-article__layout">
<nav class="luz-toc" aria-labelledby="toc-title" data-luz-spy>
<h2 class="luz-toc__title" id="toc-title">Contents</h2>
<ol class="luz-toc__list">
<li><a href="#method">How the readings were taken</a></li>
<li><a href="#level">Four centimetres in ten years</a></li>
</ol>
</nav>
<div class="luz-prose">
<p>Since March 2016, a group of volunteers has read the tide gauge…</p>
<h2 id="method">How the readings were taken</h2>
<p>…</p>
<h2 id="level">Four centimetres in ten years</h2>
<p>…</p>
</div>
</div>
</article>Quién publica el blog y los enlaces que se buscan al final, en una fila: el pie de página.
A <div> here: a page has one footer landmark, and this page has its own.
<footer class="luz-site-footer">
<div class="o-container o-container--inline o-row">
<p>The Vejer Review is published by a cooperative.</p>
<nav class="o-actions" aria-label="Links">
<a class="luz-btn luz-btn--ghost luz-btn--sm" href="/corrections/">Corrections</a>
<a class="luz-btn luz-btn--ghost luz-btn--sm" href="/accessibility/">Accessibility statement</a>
</nav>
</div>
</footer>