# Meta line

Shows a few facts about something on one line, such as its date, its reading time and its author, with a dot between them.

### Known issues
The dots are hidden from screen readers with alternative text for generated content, which Firefox has since version 128 and Safari since 17.4. An older browser lets a screen reader read each dot.

Not yet tested with a screen reader.

### Copy the markup
Meta line markup
```html
<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.

Meta line facts markup
```html
<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`.

- `.luz-meta`: The line: facts in a row that wraps, in the sans, in the secondary text colour
- Each child: One fact: a `<time>`, a link, or a `<span>` of text. Every child after the first gets a dot before it
- `.luz-meta--facts`: On a `<dl>`: the facts as labelled pairs, with no dots. Each child is a `<div>` that holds a `<dt>` (the label, in the secondary text colour) above its `<dd>` (the value, in the primary colour and semibold)

### 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.

### 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](https://nandovejer.github.io/luz/docs/components/table/).
- A path of pages is a [breadcrumb](https://nandovejer.github.io/luz/docs/components/breadcrumb/); a set of labels is a row of [tags](https://nandovejer.github.io/luz/docs/components/tag/).