LUZ debug

Every element and component of LUZ, one under another, to look at by hand. This page is not indexed.

HTML tags

Every tag with no class, as its card in the docs shows it.

<a>

elements/inline.css Docs page

Read the full reference before you start.

<abbr>

elements/inline.css Docs page

LUZ uses plain CSS.

<address>

elements/sections.css Docs page
Ana García
Calle Mayor 1, Cádiz
hello@example.com

<area>

none Docs page
A blue square and a grey circle The square The circle

<article>

none Docs page

Release notes

Version 3.1 styles the elements that had no look of their own.

<aside>

none Docs page

<audio>

elements/media.css Docs page

<b>

elements/inline.css Docs page

The ET Book typeface is used for headings.

<base>

none Docs page
HTML 
<base href="https://example.com/app/" target="_blank">

<bdi>

none Docs page

User إيان scored 90 points.

<bdo>

none Docs page

This text runs right to left.

<blockquote>

elements/text.css Docs page

The best interface is the one the browser already ships.

<body>

elements/document.css Docs page
HTML 
<body class="o-shell">
  <a class="luz-skip-link" href="#main-content">Skip to main content</a>
  <main id="main-content">…</main>
</body>

<br>

none Docs page

Line one
Line two
Line three

<button>

elements/forms.css Docs page

<canvas>

elements/media.css Docs page
A square and a circle.

<caption>

elements/tables.css Docs page
Packages and their layer
PackageLayer
tokens1
core2

<cite>

none Docs page

The Design of Everyday Things is a book by Don Norman.

<code>

elements/inline.css Docs page

Use var(--luz-brand-primary) for links.

<col>

none Docs page
PackageLayer
tokens1
core2

<colgroup>

none Docs page
PackageLayer
tokens1
core2

<data>

none Docs page

LUZ has three layers.

<datalist>

none Docs page

<dd>

elements/text.css Docs page
Token
A named design decision, stored as a variable.

<del>

elements/inline.css Docs page

Price: $20 $15

<details>

elements/interactive.css Docs page
What is LUZ?

A vanilla design system in plain CSS and ES modules.

<dfn>

elements/inline.css Docs page

A design token is a named design decision, stored as a variable.

<dialog>

elements/interactive.css Docs page

A native dialog

Press Escape or the button to close it.

<div>

none Docs page
First block
Second block

<dl>

elements/text.css Docs page
Tokens
Layer 1, standalone.
Core
Layer 2, requires tokens.

<dt>

elements/text.css Docs page
Catalog
Layer 3, catalog patterns.

<em>

none Docs page

Load the tokens before the core.

<embed>

elements/media.css Docs page

<fieldset>

elements/forms.css Docs page
Plan

<figcaption>

elements/text.css Docs page
A blue square and a grey circle
Two shapes, drawn in SVG.

<figure>

elements/text.css Docs page
A blue square and a grey circle
Two shapes, drawn in SVG.

<form>

none Docs page

<geolocation>

none Docs page
HTML 
<geolocation>
  <button id="fallback">Use location</button>
</geolocation>

<h1>

elements/sections.css Docs page

Heading level 1

<h2>

elements/sections.css Docs page

Heading level 2

<h3>

elements/sections.css Docs page

Heading level 3

<h4>

elements/sections.css Docs page

Heading level 4

<h5>

elements/sections.css Docs page
Heading level 5

<h6>

elements/sections.css Docs page
Heading level 6

<head>

none Docs page
HTML 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My page</title>
</head>

<header>

none Docs page

Getting started

Three layers, adopted in order.

<hgroup>

none Docs page

Tokens

Variables for every design decision.

<hr>

elements/text.css Docs page

Above the break.

Below the break.

<html>

elements/document.css Docs page
HTML 
<!DOCTYPE html>
<html lang="en" data-theme="light">
  <head>…</head>
  <body>…</body>
</html>

<i>

none Docs page

The result is ad hoc, not a rule.

<iframe>

elements/media.css Docs page

<img>

elements/media.css Docs page
A blue square and a grey circle

<input>

elements/forms.css Docs page

<ins>

elements/inline.css Docs page

Price: $20 $15

<kbd>

elements/inline.css Docs page

Press Ctrl + K to open the command palette.

<label>

elements/forms.css Docs page

<legend>

elements/forms.css Docs page
Notifications

<li>

elements/text.css Docs page
  • Tokens
  • Core
  • Catalog

<main>

none Docs page
HTML 
<main id="main-content" tabindex="-1">
  <h1>Page title</h1>
  …
</main>

<map>

none Docs page
A blue square and a grey circle The square The circle

<mark>

elements/inline.css Docs page

Search results for tokens.

<math>

none Docs page
x= −b±b2−4ac 2a

<menu>

elements/text.css Docs page

    • <meta>

    none Docs page
    HTML 
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A vanilla design system in plain CSS.">

    <meter>

    elements/forms.css Docs page
    6 of 10 GB

    <nav>

    none Docs page

    <noscript>

    none Docs page
    HTML 
    <noscript>
  <p>This page needs JavaScript for the live demos.</p>
</noscript>

    <object>

    elements/media.css Docs page
    A blue square and a grey circle

    <ol>

    elements/text.css Docs page
    1. Install the tokens.
    2. Add the core.
    3. Add the catalog package.

    <optgroup>

    none Docs page

    <option>

    none Docs page

    <output>

    elements/forms.css Docs page

    <p>

    elements/text.css Docs page

    LUZ is a vanilla design system: tokens, components and app patterns in plain CSS and ES modules, with no framework and no build step.

    <picture>

    elements/media.css Docs page
    A blue square and a grey circle

    <pre>

    elements/text.css Docs page 
    $ pnpm add @luz-ds/tokens
            $ pnpm add @luz-ds/core

    <progress>

    elements/forms.css Docs page
    70% Working

    <q>

    none Docs page

    As they say, less is more.

    <rp>

    none Docs page
    漢(kan)字(ji)

    <rt>

    elements/inline.css Docs page
    漢(kan)字(ji)

    <ruby>

    none Docs page
    漢(kan)字(ji)

    <s>

    elements/inline.css Docs page

    $20 $15 this week.

    <samp>

    elements/inline.css Docs page

    The console prints Layer "tokens" is missing.

    <script>

    none Docs page
    HTML 
    <script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js"></script>

    <section>

    none Docs page

    Installation

    Add the tokens first, then the core.

    <select>

    elements/forms.css Docs page

    <selectedcontent>

    none Docs page
    HTML 
    <select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="design">Design</option>
  <option value="build">Build</option>
</select>

    <slot>

    none Docs page
    Hello from the light DOM This text fills the default slot.

    <small>

    elements/inline.css Docs page

    Total: $15 Prices include VAT.

    <source>

    none Docs page
    A blue square and a grey circle

    <span>

    none Docs page

    LUZ is stable.

    <strong>

    elements/inline.css Docs page

    Warning: do not edit the dist folder.

    <style>

    none Docs page
    HTML 
    <style>
  .banner { padding: var(--luz-space-md); }
</style>

    <sub>

    elements/inline.css Docs page

    Water is H2O.

    <summary>

    elements/interactive.css Docs page
    What is LUZ?

    A vanilla design system in plain CSS and ES modules.

    <sup>

    elements/inline.css Docs page

    E = mc2

    <svg>

    elements/media.css Docs page
    A square and a circle

    <table>

    elements/tables.css Docs page
    PackageLayer
    tokens1
    core2

    <tbody>

    none Docs page
    PackageLayer
    tokens1
    core2

    <td>

    elements/tables.css Docs page
    PackageLayer
    tokens1
    core2

    <template>

    none Docs page

      <textarea>

      elements/forms.css Docs page

      <tfoot>

      none Docs page
      PackageLayer
      tokens1
      core2
      Total2

      <th>

      elements/tables.css Docs page
      PackageLayer
      tokens1
      core2

      <thead>

      none Docs page
      PackageLayer
      tokens1
      core2

      <time>

      elements/inline.css Docs page

      Released on .

      <title>

      none Docs page
      HTML 
      <title>HTML elements: LUZ Design System</title>

      <tr>

      elements/tables.css Docs page
      PackageLayer
      tokens1
      core2

      <track>

      components/player.css Docs page

      <u>

      elements/inline.css Docs page

      This word is mispelled.

      <ul>

      elements/text.css Docs page
      • Tokens
      • Core
      • Catalog

      <var>

      elements/inline.css Docs page

      Solve x + y = 10.

      <video>

      elements/media.css Docs page

      <wbr>

      none Docs page

      https://example.com/very/long/path

      Layout objects

      The o-* objects, as the layout page shows them.

      .o-stack

      objects/_objects.css Docs page
      .o-stack
      1
      2
      3

      .o-row

      objects/_objects.css Docs page
      .o-row
      1
      2
      3
      4
      5

      .o-grid

      objects/_objects.css Docs page
      .o-grid
      1
      2
      3
      4

      .o-media

      objects/_objects.css Docs page
      .o-media

      Media object

      A fixed item beside content that takes the remaining width.

      Core components

      The example of each core component.

      Accordion

      components/accordion.css Docs page
      What is a design token?

      A named value, such as a color or a space, that components read instead of a literal.

      Why only one open at a time?

      The same name on each details connects them: opening one closes the other.

      Does it need JavaScript?

      No. The browser opens, closes and groups them.

      Alert

      components/alert.css Docs page
      Information
      A new version is available.
      Success
      Deployment completed.
      Warning
      Storage is almost full.
      Error
      The build failed.

      Avatar

      components/avatar.css Docs page
      AB CD EF
      Ana Belén Carlos Díaz Eva Flores

      Band

      components/band.css Docs page

      Registration closes on 30 April

      The hall holds 400 people, and the Two days ticket sold out last year.

      Register now

      The tint runs to the edges of this frame; in a page, to the edges of the window. The content keeps the column.

      Breadcrumb

      components/breadcrumb.css Docs page

      The trail at the top of this page is the same component.

      Button

      components/button.css Docs page
      Next step
      Link as button

      Card

      components/card.css Docs page

      API gateway

      1,204 requests per minute.

      Database

      48 active connections.

      Table

      Rows of records that share the same attributes.

      Carlos Díaz

      Looks after billing and invoices.

      Soft dunes in warm light under a clear blue sky

      Dunes at sunset

      A two-hour walk from the car park.

      Database

      48 active connections.

      Running
      Red wines
      • Malbec 2021

        Bodega Albar · 75 cl

        12,50 €

      • Tempranillo reserva 2019

        Bodega Albar · 75 cl

        Now 9,90 € Was 12,50 €

      One day

      79 €

      The talks and the workshops of one day.

      Choose One day
      Two days

      Now 149 € Was 180 €

      Both days, lunch and the recordings. Most chosen

      Choose Two days
      Team

      590 €

      Two days for five people, with a shared table.

      Choose Team
      Site
      Dunes

      A two-hour walk.

      Code

      components/code.css Docs page 
      .panel {
  padding: var(--luz-space-md);
  color: var(--luz-text-primary);
  background: var(--luz-surface);
}
      <button
  class="luz-btn luz-btn--primary"
  type="button">
  Save changes
</button>
      import { MidiPlayer }
  from "@luz-ds/core/midi";

const player = await MidiPlayer.load(url);
player.play();

      Inline code looks like var(--luz-text-primary) inside a sentence.

      Syntax colours in the three modes

      LUZ's own scheme: keywords stay ink and bold, colour goes to what the author wrote (names, properties, values), comments step back in italic. No red, because red means error.

      Each colour keeps 4.5:1 or more on the block, 7:1 or more in high contrast.

      TokenClassWhat it marks
      --luz-code-comment
      .tok-comment
      Comments in every language. Muted and italic.
      --luz-code-keyword
      .tok-keyword
      JavaScript and shell keywords, CSS at-rules and !important, the HTML doctype. Ink and bold, no colour.
      --luz-code-name
      .tok-name
      HTML tags, CSS selectors and functions, JavaScript function and class names, shell commands.
      --luz-code-property
      .tok-property
      HTML attributes, CSS properties and custom properties, JSON keys, shell flags and variables.
      --luz-code-string
      .tok-string
      Quoted strings in every language, HTML attribute values.
      --luz-code-literal
      .tok-literal
      Numbers and units, hex colours, true, false, null, HTML entities.

      Light

      /* Wide cards */
@media (min-width: 48rem) {
  .card::after {
    content: "new";
    inset: 0 auto auto 50%;
    color: var(--ink, #036);
  }
}
      <!doctype html>
<!-- Primary action -->
<button type="submit" disabled>
  Save &amp; close
</button>
      // Play a track
const player = await
  MidiPlayer.load("a.mid");
if (player) player.play(0, true);
      {
  "name": "@luz-ds/core",
  "private": false,
  "size": 7.02
}
      # Build and test
pnpm core:build
npx playwright test \
  --project=chromium $CI

      Dark

      /* Wide cards */
@media (min-width: 48rem) {
  .card::after {
    content: "new";
    inset: 0 auto auto 50%;
    color: var(--ink, #036);
  }
}
      <!doctype html>
<!-- Primary action -->
<button type="submit" disabled>
  Save &amp; close
</button>
      // Play a track
const player = await
  MidiPlayer.load("a.mid");
if (player) player.play(0, true);
      {
  "name": "@luz-ds/core",
  "private": false,
  "size": 7.02
}
      # Build and test
pnpm core:build
npx playwright test \
  --project=chromium $CI

      High contrast

      /* Wide cards */
@media (min-width: 48rem) {
  .card::after {
    content: "new";
    inset: 0 auto auto 50%;
    color: var(--ink, #036);
  }
}
      <!doctype html>
<!-- Primary action -->
<button type="submit" disabled>
  Save &amp; close
</button>
      // Play a track
const player = await
  MidiPlayer.load("a.mid");
if (player) player.play(0, true);
      {
  "name": "@luz-ds/core",
  "private": false,
  "size": 7.02
}
      # Build and test
pnpm core:build
npx playwright test \
  --project=chromium $CI

      Copy button

      components/copy-btn.css Docs page
      var(--luz-brand-primary)

      The button copies the text of its data-copy attribute.

      Dropdown

      components/dropdown.css Docs page
      • Edit

      Press Escape or click outside to close it.

      Figure

      components/figure.css Docs page
      Requests per day, last six days.

      Choice

      components/form.css, components/select.css Docs page
      Notifications
      Plan
      Error: Select a country of birth.

      Field parts

      components/form.css Docs page
      Letters, numbers and dashes.
      Error: Use letters, numbers and dashes only.
      Shipping address

      Inputs

      components/form.css Docs page
      Shown on the dashboard.
      Error: Use letters, numbers and dashes only.
      We send your receipt here.
      At least 8 characters.
      Search by name or topic.
      With the country code, such as +34 600 000 000.
      Start with https://.
      From 1 to 10.
      Pick a day in 2026.
      Your local time.
      Madrid time.
      Month and year, such as 2026-06.
      Week of the year, such as 2026-W24. Weeks start on Monday.
      PDF or PNG, up to 5 MB.
      Up to 500 characters.

      Values

      components/form.css, components/meter.css Docs page
      6 of 10 GB

      Icons

      components/icon-grid.css Docs page
      • Menu
      • Close
      • Search
      • Check
      • Plus
      • Minus
      • Chevron down
      • Chevron up
      • Chevron end
      • Arrow end
      • Cart
      • User
      • Mail
      • Calendar
      • Clock
      • Map pin
      • Download
      • External link
      • Info
      • Warning
      • Error
      • Heart
      • Filter
      • Robot
      • Book
      • Globe
      • Layers
      • Package
      • Grid
      • Feather
      • Terminal
      • List
      • Code
      • Code slash
      • Form
      • Brackets
      • Message
      • Sliders
      • Check circle
      • Help
      • Sun
      • Moon
      • Contrast
      • Auto
      • Page
      • Edit
      • App
      • Play
      • Pause
      • Volume
      • Volume off
      • Git branch
      • Feed

      The logo is not an icon of the set: it is filled, in four shades of the text colour, on its own 32 × 32 grid. Copy it as it is; do not draw it with a stroke.

      Each icon has a button that copies its SVG. These are LUZ's own icons, drawn for it: copy the SVG or the sprite.

      They are not a package, so nothing is loaded for them.

      Image

      components/image.css Docs page
      Out-of-focus sand dunes under a low sun and a blue sky
      With an image
      With no image: the flat surface

      Ratios: 16:9, --4x3, --3x2, --1x1, --21x9, --9x16.

      Meta line

      components/meta.css Docs page

      By Ana Ruiz 6 min read

      Location
      Plaza Mayor, Seville
      Date
      Price
      From 45 euros

      Meter

      components/meter.css Docs page
      Parcels per route, this week
      RouteParcels
      Sevilla to Madrid1,204
      Cádiz to Málaga312
      Huelva to Faro58

      Modal

      components/modal.css Docs page

      Delete this draft?

      You cannot undo this. The draft and its comments are deleted.

      A native <dialog>.

      Escape closes it and focus goes back to the button that opened it. Nothing is deleted here.

      Pagination

      components/pagination.css Docs page

      Player

      components/player.css Docs page
      0:00 0:00

      Video, MP4, 15 seconds, with English captions shown by default and Spanish subtitles. It has no sound: both tracks describe the picture.

      Video: NASA, Earth Views from the ISS, in the public domain.

      0:00 0:00

      Audio, MP3, 25 seconds.

      Nothing is downloaded until you press play. Recording: NASA, Apollo 11 launch countdown and lift-off, in the public domain.

      MIDI playback needs JavaScript.

      0:00 0:00

      MIDI, parsed and played with Web Audio by midi.js, which loads only when a MIDI player is on the page.

      Progress

      components/progress.css Docs page

      Prose

      components/prose.css Docs page

      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. Their sheets are the longest record of the sea in the bay that anyone has kept by hand, and the council will publish them as a table of open data.

      How the readings were taken

      Each reading is the height of the water against the gauge, to the nearest centimetre. The sheet calls it level_cm.

      • Two readings a day, every day of the year.
      • 41 volunteers over ten years.
      • Fewer than one reading in a hundred left out.

      We did not set out to measure the climate. We wanted to know when to take the boats out.

      Four centimetres in ten years

      The average height at high tide was 4 cm higher in 2025 than in 2016, close to what the national gauges record along the coast.

      Table

      components/table.css Docs page
      Service status
      ServiceStatusCPURegion
      api-gatewayRunning12%eu-west-1
      data-pipelineDegraded78%us-east-1
      mailerStopped0%eu-west-1

      Make the window narrow: below 480 px of container width each row becomes a card.

      Shipments this week
      RouteParcelsWeight (kg)
      Sevilla to Madrid1,2048,430.5
      Cádiz to Málaga3121,912.0
      Huelva to Faro58406.3
      Parcels per route
      RouteParcelsWeight (kg)Notes
      Cádiz to Málaga3121,912.0Daily
      Huelva to Faro58406.3Monday and Thursday
      Sevilla to Madrid1,2048,430.5Daily

      Tabs

      components/tabs.css Docs page

      Three services are running.

      Deploys run on every push.

      No errors in the last hour.

      Focus a tab, then use the arrow keys, Home and End. The Code and Design tabs of this page are the same component.

      Tag and badge

      components/tag.css Docs page
      Gray Blue Green Red Yellow Teal Purple
      3 12 99+

      Color mode

      components/theme-mode.css Docs page

      Radio group

      Button, fixed at the end corner

      Button, inline

      Without JavaScript the radios show in the flow, as in the first stage, and there is no button.

      Toast

      components/toast.css Docs page
      Success
      File exported.

      A static specimen: LUZ draws the toast, and you place it, show it and hide it.

      Tooltip

      components/tooltip.css Docs page

      Point at the button, or focus it with Tab.

      Catalog components and patterns

      The example of each catalog component and pattern.

      Announcement

      components/announcement.css Docs page

      Open day. Visit the winery on Saturday 25 October, from 11:00 to 18:00. Book a visit

      Planned maintenance. The shop will be closed on Monday 3 November from 07:00 to 09:00. See what still works

      On a site the announcement goes above the header, as wide as the window, and its text starts where the header’s row starts. Here it is as wide as the example.

      App header

      components/app-bar.css Docs page

      Bodega

      The bar at a window of full width: the sidebar is a column beside it, so the product name stays there. At 768 px and below the sidebar is a drawer, the menu button opens it and the product name shows beside it.

      The example is not sticky: in a page, .o-sticky keeps the bar at the top. The account list opens under the button: press it.

      Article header

      components/article-header.css Docs page

      Coast

      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, and winter storms now reach the old town's walls.

      By Ana Ruiz

      6 min read

      The tide gauge in the port, at low tide.

      Bar list

      components/bar-list.css Docs page
      • Sevilla1,204
      • Cádiz312
      Parcels per route, this week
      • Home42 KB
      • Docs28 KB
      • Blog14 KB
      84 KB in all, sample data.

      Chart

      components/chart.css Docs page
      Parcels per route, January to June
      MonthSevillaCádizJerez
      Jan1,204312640
      Feb1,310340620
      Mar1,180365700
      Apr1,420410690
      May1,390398760
      Jun1,480452810

      One column is one series, up to six. Without JavaScript it is the table.

      Parcels to Sevilla, January to June
      MonthSevilla
      Jan1,204
      Feb1,310
      Mar1,180
      Apr1,420
      May1,390
      Jun1,480

      With variant="area".

      Parcels a day, last 7 days
      • 41
      • 38
      • 44
      • 52
      • 47
      • 58
      • 63

      type="spark": a small line, and its last figure as text. The other six stay in the list for a screen reader.

      Visitors per day, April 1 to 28
      DayDesktopMobile
      Apr 1252148
      Apr 2271276
      Apr 3182128
      Apr 4380247
      Apr 5194203
      Apr 619174
      Apr 717998
      Apr 8179132
      Apr 9281217
      Apr 10187171
      Apr 11193251
      Apr 12278125
      Apr 13228152
      Apr 14120100
      Apr 15331270
      Apr 16319125
      Apr 17317259
      Apr 18271122
      Apr 19226121
      Apr 2018786
      Apr 21146130
      Apr 22206248
      Apr 23200256
      Apr 24248253
      Apr 25378284
      Apr 26216136
      Apr 27190153
      Apr 2819994

      Column chart

      components/column-chart.css Docs page
      Parcels per day, this week
      MonTueWedThuFriSatSun
      1,2048309011,4201,5003770
      Visitors per month, by device, January to March
      MonthDesktopMobile
      Jan18680
      Feb305200
      Mar237120
      Visitors per day, April 1 to 28
      DayDesktopMobile
      Apr 1252148
      Apr 2271276
      Apr 3182128
      Apr 4380247
      Apr 5194203
      Apr 619174
      Apr 717998
      Apr 8179132
      Apr 9281217
      Apr 10187171
      Apr 11193251
      Apr 12278125
      Apr 13228152
      Apr 14120100
      Apr 15331270
      Apr 16319125
      Apr 17317259
      Apr 18271122
      Apr 19226121
      Apr 2018786
      Apr 21146130
      Apr 22206248
      Apr 23200256
      Apr 24248253
      Apr 25378284
      Apr 26216136
      Apr 27190153
      Apr 2819994

      Dashboard

      components/dashboard.css Docs page

      Overview

      New report Export data

      • Sales this month

        The most important number gets the room of two columns, when the view has it.

        Open the sales report

      • Stock alerts

        Three products are below their minimum.

        Review stock

      • Open orders

        Twelve orders wait for a label.

        See orders

      The dashboard at the width of this column. In a page it is the <main>, and the title is the page's <h1>: here this page already has its own, so the title is a paragraph and the panels' titles are <h3>.

      The grid answers to the room of the dashboard, not to the window's.

      Overview (sample data)

      • Orders this month

        1,204

        12 % more than last month

      • Orders by channel

        • Online640
        • In store410
        • Phone154

      • Orders over time

        Orders per month, January to June
        MonthOrders
        Jan820
        Feb905
        Mar870
        Apr1,010
        May1,075
        Jun1,204

      • Orders by status

        • Delivered 62 %
        • In transit 21 %
        • Delayed 9 %
        • Returned 8 %

      The wide panel is the line chart: it takes two columns when the view has the room.

      Do and don't

      components/do-dont.css Docs page
      Do Title a page for what it lets the reader do.
      Don't Use a title that fits any page: "Introduction" tells the reader nothing.

      A Do and a Don't.

      The word, the mark before it and the frame (solid or dashed) say which is which, so the colour is never the only cue. The two stack on a narrow screen.

      Page head

      components/doc-header.css Docs page

      A picture of the head: it holds a title of its own, so it is hidden from assistive technology on this page. Its text is in the markup below.

      The chips wrap on a narrow screen.

      Shell

      components/docs-layout.css Docs page

      Embed

      components/embed.css Docs page
      Play video: John Young’s Lunar Salute on Apollo 16

      Without JavaScript the poster is a link to the video.

      This is the one page of this site that may load another site, and only after you press the button and agree: the security policy of the site lets this page, and no other, frame www.youtube-nocookie.com.

      Example

      components/example.css Docs page 
      <button class="luz-btn luz-btn--primary" type="button">Save changes</button>

      The preview, and the markup that makes it under it. The width of the frame follows --luz-example-w.

      FAQ

      components/faq.css Docs page

      Questions about renting a bike

      What to know before you pick up your bike at Marea Bikes in Cádiz.

      Booking and pickup

      How do I book a bike?

      Book on the Marea Bikes website or at our shop. Choose the day, the size and the type of bike, and pay online or when you pick it up. We send a confirmation by e-mail with your pickup time.

      What do I need to bring?

      Bring three things to the shop:

      • A photo ID.
      • The confirmation e-mail, on paper or on your phone.
      • A card for the €100 deposit, which we release when you return the bike.
      Can I cancel a booking?

      Yes, free of charge until 24 hours before pickup. After that, Marea Bikes keeps the price of the first day.

      On the road

      Can I ride outside Cádiz?

      Yes, anywhere in the province of Cádiz. For a trip outside it, ask us before you book: the insurance of a Marea Bikes bike covers the province only.

      What if the bike breaks down?

      Call the number on the tag of your key. In the city centre we fix or swap the bike within two hours, at no cost, unless the damage is not from normal use.

      Not here? Write to the shop

      On a site the list takes the width of its container, and each answer stops at a comfortable line length.

      Heat map

      components/heat-map.css Docs page
      Parcels per part of the day, this week. The stronger the colour, the more parcels.
      MonTueWedThuFri
      Morning120240360480600
      Afternoon060300180540
      Evening3090150270420

      Hero

      components/hero.css Docs page

      12 and 13 May 2027 · Seville

      Acme Summit 2027

      Two days of talks and workshops for retail teams.

      Register See the options

      This column is narrower than 51rem, so the picture goes under the text; on a page of full width it sits beside it. The frame is empty, so it shows its flat surface, and the title is a paragraph: this page already has its <h1>.

      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.

      Start free trial Book a demo

      The same hero with luz-hero--centered: one column at any width, the text centred. A picture that bleeds cannot be shown in this column, as it runs to the edges of the window: see Variants and options.

      Language switch

      components/lang-switch.css Docs page

      The links go to this site’s home page in each language. The list opens under the header, at the end of the row, as it does on the home page; this documentation is in English only.

      Masthead

      components/masthead.css Docs page

      Subscribe
      The Vejer Review

      At 768 px of window width and below the sections collapse into a menu, the catalog's navbar.

      The masthead is not sticky: three rows stuck to the top would take a third of a phone's screen. For one row that stays at the top, use the site header with --publication.

      Navbar

      components/navbar.css Docs page
      Acme

      At 768 px of window width and below the links collapse into a menu. Its panel opens under this example's bar where the browser supports CSS anchor positioning, and under the top of the window, where a header sits, elsewhere.

      Page foot

      components/page-footer.css Docs page

      Last updated · Edit this page · Report a problem

      Small print under a rule. It wraps on a narrow screen.

      Blog page header

      components/page-header.css Docs page

      About the Review

      An independent paper for Vejer and the coast, paid for by its readers.

      Rail

      components/page-rail.css Docs page

      Install

      Add the tool to your project with your package manager.

      Configure

      The tool reads one file from the root of the project.

      The config file

      Name it acme.config.json.

      The rail beside the text it lists, shown at any width: in a page it is a third column from 80rem and sits above the content below it. With the catalog's script, the section in view is marked as you scroll.

      Page transition

      components/page-transition.css Docs page

      Open the announcement page or the search page, then come back with the Back button.

      Nothing happens if your reader asked for reduced motion, in Firefox, or on the first load of a page.

      Pager

      components/pager.css Docs page

      Two blocks side by side, Next at the end; stacked at 640px and below. The whole block is the link.

      Post list

      components/post-list.css Docs page

      The base: as many columns as fit, none under 16rem.

      luz-post-list--lead: the first post spans two columns with its picture beside it, when the list is 40rem wide or more. Narrower, it is a card like the rest.

      luz-post-list--compact: one row for each post, the title and the facts, with no picture.

      3 results for "tide"

      Search results: the search box, then a heading that says how many, then the compact list. The posts, the word searched and the counts are placeholders: your search fills them in.

      Ring

      components/ring.css Docs page
      Visitors this month

      1,260 of 2,000 visitors

      Visitors by device, this month

      1,830 visitors

      • Desktop 1,260
      • Mobile 570

      Main and sections

      components/glow.css, components/main.css, components/section.css Docs page
      Heading
      Lead
      Content
      Heading
      Content

      Sections are 64 px (--luz-space-3xl) apart in the main; their blocks, 16 px (--luz-space-md).

      Why teams switch

      One count for every shelf

      Acme Stock reads each sale as it happens, in every shop.

      Content

      The head of a section: an eyebrow, a title and a lead. The title is a paragraph here, as this page already has its headings.

      Upcoming talks

      See all talks
      Content

      A title with a link to the whole list, at the end of the head. The title and the link are placeholders: write your own.

      .luz-glow

      Sidebar

      components/sidebar.css Docs page
      .luz-nav-toggle

      On small screens the sidebar becomes a drawer. This page's navigation uses it live.

      Site header

      components/site-header.css Docs page
      Acme Summit
      Log in
      The Vejer Review
      Subscribe

      At 768 px of window width and below the links collapse into a menu, the catalog's navbar. Its panel opens under this example where the browser supports CSS anchor positioning, and under the top of the window, where a header sits, elsewhere.

      The second header has .luz-site-header--publication: the name in the heading font, larger. The examples are not sticky: in a page, .o-sticky keeps the header at the top.

      Social links

      components/social.css Docs page

      LUZ ships no brand logos: the name says which place. The icons are those of the Icons page, or yours.

      Stacked bar

      components/stacked-bar.css Docs page
      Parcels by status, this week
      • Delivered 62 %
      • In transit 21 %
      • At depot 9 %
      • Delayed 5 %
      • Returned 2 %
      • Lost 1 %

      Stat

      components/stat.css Docs page

      • 4,000+

        teams on the platform

      • 99.95%

        uptime in the last year

      • 12 min

        to set up, on average

      The first two stand on the page; the third sits in a luz-card. In a column narrower than 768 px the three stack.

      Submenu

      components/submenu.css Docs page
      Bodega Albar

      Press Wines or About us. From 769 px of window width each opens a box under its button; at 768 px and below the links are in the menu, and each group opens in place, under its button.

      Terminal

      components/terminal.css Docs page 
      npm install @luz-ds/core
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.css">

      Open the CDN tab, then press Copy: the button copies the command of the open tab. Only the npm command shows a $ prompt.

      Color mode by time of day

      components/theme-time.css Docs page

      The slider alone

      show="time place saved moments"

      Without JavaScript there is no bar and the moments are not shown. Core's radios still change the mode.

      Timeline

      components/timeline.css Docs page

      Horizontal, the default. Pick a date, or use Previous and Next, the arrow keys on the dates, or swipe.

      1. First beta

        Ten teams try the app.

      2. Public launch

        Sign-up opens to everyone.

      3. Offline mode

        Notes sync when the connection returns.

      4. Version 2

        A new editor and shared folders.

      With autoplay: it moves on by itself while it is on screen. Pause stops it; it also waits while you point at it or use the keyboard in it.

      1. The idea

        Two people sketch the first screens.

      2. The team

        Five people work on it full time.

      3. The first customers

        Fifty schools use it every week.

      With layout="vertical": scroll, and the item in the middle of the screen becomes active.

      1. Version 0.1

        Buttons, forms and tables.

      2. Version 0.2

        Dark mode and a print stylesheet.

      3. Version 0.3

        Right-to-left layouts.

      4. Version 1.0

        The API is stable.

      Table of contents

      components/article.css Docs page

      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, every day of the year.

      How the readings were taken

      Each reading is the height of the water against the gauge, to the nearest centimetre, with the time, the wind and the state of the sea. Two people read it, and a third checks the sheet the same week.

      Four centimetres in ten years

      The average height at high tide was 4 cm higher in 2025 than in 2016. That is close to the rise that the national tide gauges record along the whole coast.

      Storms that reach the walls

      In the first five winters, waves reached the sea wall of the old town twice. In the last five, they reached it eleven times.

      What the council plans next

      The council will publish the full records as open data in January and has asked the volunteers to add a third daily reading.

      Beside the text, at the end, 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.