How to reach the people behind the nearest article or the whole page: an email, a phone number, a profile link. Not for any postal address in the text. Browsers make it italic; LUZ makes it upright and secondary.

<address>
  Ana García<br>
  Calle Mayor 1, Cádiz<br>
  <a href="mailto:hello@example.com">hello@example.com</a>
</address>

Styled by elements/sections.css, with no class.

A piece that would still make sense if you lifted it out and published it somewhere else: a blog post, a product card, a comment.

<article>
  <h4>Release notes</h4>
  <p>Version 3.1 styles the elements that had no look of their own.</p>
</article>

LUZ adds no style: the browser look is kept. Neutral box. Give it a class such as luz-card when you want a surface.

Content beside the main flow that a reader can skip without losing the thread: a sidebar, a pull quote, related links. At the top level of the page it is a complementary landmark.

<aside aria-label="Related">
  <p>Related: <a href="#">Design tokens</a></p>
</aside>

LUZ adds no style: the browser look is kept.

Closing details for the page, or for the nearest article or section: who wrote it, copyright, related links.

<footer>
  <small>© 2026 LUZ Design System</small>
</footer>

LUZ adds no style: the browser look is kept.

The top heading, naming what the page is about. Use one per page. LUZ sets every heading in the serif heading font, light weight and tight tracking.

<h1>Heading level 1</h1>

Styled by elements/sections.css, with no class. Hidden from assistive technology here, so this page keeps a single h1 and a correct outline. The markup below is what to copy.

The heading of a main part of the page. Go down one level at a time, without skipping. LUZ sets it in the serif heading font, light weight and tight tracking.

<h2>Heading level 2</h2>

Styled by elements/sections.css, with no class. Hidden from assistive technology here, so this page keeps a single h1 and a correct outline. The markup below is what to copy.

The heading of a part inside an h2 section. LUZ sets it in the serif heading font, light weight and tight tracking.

<h3>Heading level 3</h3>

Styled by elements/sections.css, with no class. Hidden from assistive technology here, so this page keeps a single h1 and a correct outline. The markup below is what to copy.

The heading of a part inside an h3 section. LUZ sets it in the serif heading font, light weight and tight tracking.

<h4>Heading level 4</h4>

Styled by elements/sections.css, with no class. Hidden from assistive technology here, so this page keeps a single h1 and a correct outline. The markup below is what to copy.

The heading of a part inside an h4 section. LUZ sets it in the serif heading font, light weight and tight tracking.

<h5>Heading level 5</h5>

Styled by elements/sections.css, with no class. Hidden from assistive technology here, so this page keeps a single h1 and a correct outline. The markup below is what to copy.

The deepest heading, for a part inside an h5 section. If you need it often, the page may be nested too deeply. LUZ sets it in the serif heading font, light weight and tight tracking.

<h6>Heading level 6</h6>

Styled by elements/sections.css, with no class. Hidden from assistive technology here, so this page keeps a single h1 and a correct outline. The markup below is what to copy.

The opening of the page, or of the nearest article or section: a title, a logo, a search box, the main navigation.

<header>
  <h4>Getting started</h4>
  <p>Three layers, adopted in order.</p>
</header>

LUZ adds no style: the browser look is kept.

Keeps a heading and its subtitle or tagline together, so the extra line is not taken for a heading of its own.

<hgroup>
  <h4>Tokens</h4>
  <p>Variables for every design decision.</p>
</hgroup>

LUZ adds no style: it is structure. The heading and the paragraph in it keep their own style.

Wraps what is unique to this page, without the header, navigation and footer that repeat on every page. Only one main can be visible, so this card shows the markup only: the page you are reading is already inside one.

Markup only: this element is not rendered.

<main id="main-content" tabindex="-1">
  <h1>Page title</h1>
  …
</main>

LUZ adds no style: the browser look is kept. tabindex="-1" lets the skip link move focus into it.

Wraps the links people use to move around the site or the page. When a page has more than one, give each a label so screen reader users can tell them apart.

<nav aria-label="Example navigation">
  <a href="#">Home</a> ·
  <a href="#">Docs</a> ·
  <a href="#">Site</a>
</nav>

LUZ adds no style: it is a landmark, not a visual box. A nav with a list is a plain list; for a row of links use .o-row, and for breadcrumbs and the sidebar, LUZ has components with their own classes.

Wraps a search or filter form, and screen readers then list it as a search landmark. No role attribute needed.

<search>
  <form action="#">
    <label for="d-search">Search the docs</label>
    <input class="luz-input" id="d-search" type="search" name="q">
    <button class="luz-btn luz-btn--primary" type="submit">Search</button>
  </form>
</search>

LUZ adds no style: it is a landmark, not a visual box. The form inside it carries the look.

Groups the content under one heading when no more specific element fits. It becomes a landmark only when you give it an accessible name.

<section>
  <h4>Installation</h4>
  <p>Add the tokens first, then the core.</p>
</section>

LUZ adds no style: the browser look is kept.