Kinds of site
Landing page
The page of a product or an event: a prompt for an LLM, and recipes for its header, hero, sections, stats and footer.
Paste the prompt into any LLM. It asks about your page in short rounds, shows you the plan and writes nothing until you say "go".
Or build the page yourself from the recipes below, in the order a visitor reads them. They use the classes of core, the catalog and landing only; Install LUZ lists the files to load.
Header
The skip link, a site header that stays at the top, the <main> that holds the blocks below, and the footer. .o-page makes the body a column at least as tall as the window, so the footer rests on the bottom of a short page.
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
The title of the page, one sentence, the main action and a picture: the hero. The page's one <h1> is here. The text comes first in the source, so it comes first for a screen reader and when the columns stack.
Give the image its real width and height, and an alt that says what it shows. Do not lazy-load it: it is the first thing on the page.
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>Section
One block of the page under its own <h2>: a section with a head (an eyebrow, a title and a lead) and features of equal weight as cards in a list. As a list, it tells a screen reader how many there are. .o-grid--split gives two columns when each gets 16rem, and one below.
For a call to action near the end of the page, add core's .luz-band to the section: the tint runs from edge to edge, and the text keeps the column.
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>Stats
Three figures that back the page's promise, each a stat with a short label under it, in a list on core's grid. Say where a figure comes from in the label or the lead, and keep it a figure a visitor can check.
-
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>Footer
The brand and the links a visitor looks for last, in columns: the site footer. Each column is a <nav> named by its title. The pattern also has a footer of one line.
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>