MetaList

A wrapping row of facts in muted small text, joined by a dot.

Overview

The facts about a record under its title: branch, SHA, date.

Facts

Do
import { Code, MetaList, TextLink } from "@hackcove/ui";

<MetaList>
  <TextLink href="#hc-145">hc-145</TextLink>
  <Code>0f9d376</Code>
  <span>26 Oct 2026</span>
</MetaList>
A row of facts is a MetaList; an item is text, a Code or a TextLink.
Don't

hc-145 · 0f9d376 · 26 Oct 2026

import { Caption } from "@hackcove/ui";

<Caption as="p">hc-145 · 0f9d376 · 26 Oct 2026</Caption>
Dots typed into one string are one item to a screen reader and can wrap onto the end of a line.

Usage

  • Each child is one fact: text, a Code or a TextLink.
  • mono sets the whole row in the monospace face, for ids and paths.
  • Never type the dots into one string: they wrap onto the end of a line and a screen reader reads them.
  • A row of links is InlineLinks; a labelled fact is a KeyValueList.

Accessibility

  • A MetaList renders a <ul> with an <li> per fact.
  • The · separators are aria-hidden, so a screen reader reads the facts alone.
  • aria-* and data-* go on the list.

API

MetaList

A wrapping row of facts in muted small text, joined by a ·: branch · SHA · date. An item is text, a Code or a TextLink. The separator is aria-hidden and leads each item but the first, held to its item so a wrap never leaves one at a line's end. mono sets the whole row in the monospace face, for ids and paths.

mono
Type
boolean
Default
false