Meta line

Code

Copy the markup

<p class="luz-meta">
  <span>By <a href="/authors/ana-ruiz/">Ana Ruiz</a></span>
  <time datetime="2026-10-12">12 October 2026</time>
  <span>6 min read</span>
</p>

For labelled facts in a hero, a description list with one <div> per fact. The text is a placeholder: write your own.

<dl class="luz-meta luz-meta--facts">
  <div><dt>Location</dt><dd>Plaza Mayor, Seville</dd></div>
  <div><dt>Date</dt><dd><time datetime="2027-03-20">20 March 2027</time></dd></div>
  <div><dt>Price</dt><dd>From 45 euros</dd></div>
</dl>

Variants and options

One modifier: .luz-meta--facts.

How it works

CSS only, in components/meta.css: a flex row that wraps, and a dot drawn by ::before on each fact after the first. .luz-meta--facts turns the dots off and sets the label and the value of each pair.

• The dot sits in the gap before its fact. The line clips its start and end edges, so a fact that wraps to the start of a new line leaves its dot outside: no line starts with a dot.
• The line has 4 px of padding at each end, room for a link's focus ring inside the clip, and a negative margin of the same size, so its text lines up with the text above it.
• The labelled facts are the same wrapping row: each pair stays together and a pair that does not fit moves to the next line, so nothing is cut at 320 px or at a large text size.
• The dot is written content: "·" / "": an empty alternative text, so screen readers do not read it.
• Nothing in it is positioned, so in a card whose title link covers the card, the whole card stays one link.

Without JavaScript

Nothing changes: the meta line is CSS. Without CSS, the facts run together on one line with the spaces of your markup between them: keep a space or a line break between the elements.

Keyboard and ARIA

The line takes no focus and adds no role. Tab reaches the links in it, in order.

• A screen reader reads the facts one after another, without the dots. Write each fact so it makes sense alone: "6 min read", not "6".
• Give a date a <time datetime>, so software can read it.
• The labelled facts are a description list, so a screen reader says each label with its value ("Location, Plaza Mayor, Seville"). Wrapping each pair in a <div> is valid HTML and keeps the pairs together.

Contrast and focus are in the Design tab.

Design

When to use

Use a meta line for two to four short facts about a post, a story or an item: the author, the date, the reading time, the section.

When not to use

Do not use it for a sentence, or for facts the reader needs to compare across items.

• Facts with labels in a hero: use .luz-meta--facts. Facts the reader compares across items are a table.
• A path of pages is a breadcrumb; a set of labels is a row of tags.

Do and don't

Writing the content

Short facts, the most useful first: usually the author, then the date.

• Write the date in words, with the month spelled out, in the reader's language.
• Two to four facts. More than that is a list, not a line.

Contrast and focus

The facts and the dots are secondary text; in the facts variant the label is secondary text and the value is primary text; a link in the line keeps the link colour.

Measured from the token values of each mode, rounded down. Needs is the WCAG 2.2 AA minimum: 4.5:1 for text, 3:1 for focus rings, borders and icons.

• Focus: a link keeps core's 2 px --luz-focus-ring outline, inside the line's clip.

Tokens it uses

The 7 tokens that components/meta.css reads, by family. Each family links to its page, with the values in every mode. In Figma they are variables with the same names: see Tokens in Figma.

Color

--luz-text-primary, --luz-text-secondary

Spacing and sizing

--luz-space-2xs, --luz-space-md, --luz-space-xs

Typography

--luz-font-sans, --luz-text-md

Keyboard and ARIA are in the Code tab.