Item · 0nlyType

Example

Leader

Ada LindqvistDesign director
Jonas BergType designer
Mira OkaforProducerSince 2021

Lineation

Akzidenz-Grotesk1898
Futura1927
Gill Sans1928
Times New Roman1932
Helvetica1957
Univers1957
Optima1958
Frutiger1976
Avenir1988
Meta1991
Archivo2016
Bodoni Moda2020

Words

NorthlightA wayfinding site for a lighthouse trust on the Norwegian coast, in two languages and one typeface2026
TidewaterMotion titles2025
HaldenAn identity for a small press: a wordmark, a colophon and the covers of its first twelve books2026
MarramA web shop for dune grasses2025

Rest

Invoice 0142£24,000

Pointed at

Invoice 0142£24,000

Lineation, the fifth line

Akzidenz-Grotesk1898
Futura1927
Gill Sans1928
Times New Roman1932
Helvetica1957

Lineation, pointed at

Futura1927

Words, running out

HaldenAn identity for a small press: a wordmark, a colophon and the covers of its first twelve books2026

Words, pointed at

TidewaterMotion titles2025

Usage

This example also uses Avatar and Button.

npx shadcn@latest add https://thedirectors.agency/ui/r/avatar.json https://thedirectors.agency/ui/r/button.json

item-example.tsx

import { Avatar } from "@/components/ui/avatar"import { Button } from "@/components/ui/button"import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle } from "@/components/ui/item"const faces: [string, number][] = [["Akzidenz-Grotesk", 1898], ["Futura", 1927], ["Gill Sans", 1928], ["Times New Roman", 1932], ["Helvetica", 1957], ["Univers", 1957],["Optima", 1958], ["Frutiger", 1976], ["Avenir", 1988], ["Meta", 1991], ["Archivo", 2016], ["Bodoni Moda", 2020],]const projects: [string, string, number][] = [["Northlight", "A wayfinding site for a lighthouse trust on the Norwegian coast, in two languages and one typeface", 2026],["Tidewater", "Motion titles", 2025],["Halden", "An identity for a small press: a wordmark, a colophon and the covers of its first twelve books", 2026],["Marram", "A web shop for dune grasses", 2025],]export default function Example() {return (<div className="grid w-full grid-cols-[minmax(0,1fr)] justify-items-start gap-12"><div className="grid w-full justify-items-start gap-3"><span className="ot-label">Leader</span><Leader /></div><div className="grid w-full justify-items-start gap-3"><span className="ot-label">Lineation</span><ItemGroup variant="lineation" aria-label="Typefaces in the studio" className="w-full max-w-[40rem]">{faces.map(([name, year]) => (<Item key={name}><ItemContent><ItemTitle>{name}</ItemTitle></ItemContent><ItemActions>{year}</ItemActions></Item>))}</ItemGroup></div><div className="grid w-full justify-items-start gap-3"><span className="ot-label">Words</span><ItemGroup variant="words" aria-label="Projects" className="w-full max-w-[40rem]">{projects.map(([name, about, year]) => (<Item key={name}><ItemContent><ItemTitle>{name}</ItemTitle><ItemDescription>{about}</ItemDescription></ItemContent><ItemActions>{year}</ItemActions></Item>))}</ItemGroup></div></div>)}function Leader() {return (<ItemGroup className="w-full max-w-[40rem]"><Item><ItemMedia><Avatar size="s" alt="Ada Lindqvist" aria-hidden="true" /></ItemMedia><ItemContent><ItemTitle>Ada Lindqvist</ItemTitle><ItemDescription>Design director</ItemDescription></ItemContent><ItemActions><Button variant="quiet">Message</Button></ItemActions></Item><Item><ItemMedia><Avatar size="s" alt="Jonas Berg" aria-hidden="true" /></ItemMedia><ItemContent><ItemTitle>Jonas Berg</ItemTitle><ItemDescription>Type designer</ItemDescription></ItemContent><ItemActions><Button variant="quiet">Message</Button></ItemActions></Item><Item><ItemMedia><Avatar size="s" alt="Mira Okafor" aria-hidden="true" /></ItemMedia><ItemContent><ItemTitle>Mira Okafor</ItemTitle><ItemDescription>Producer</ItemDescription></ItemContent><ItemActions>Since 2021</ItemActions></Item></ItemGroup>)}

Contract

Underneath: native.
Anatomy: <ul class="ot-items"> of <li class="ot-item"> holding .ot-item-body (.ot-item-title, .ot-item-desc), .ot-item-leader (aria-hidden), then .ot-item-end (a value or an action).
A ledger line: what it is, a dotted leader, what you can do. As on a contents page, the title, the dots and the value share one baseline (the picture at the start centres on the line). Pointing at the line inks the leader from one end to the other.
variant on the group (data-variant): leader (the default), lineation or words.
lineation: a critical edition's line numbers. Every fifth line carries its number (a CSS counter, pp, pencil) hung in the margin on the line's baseline; the line you point at or focus shows its own, in ink. The numbers are drawn (content: counter() / ""), since the list already says where you are. Below 40rem the margin is too narrow, so the numbers step in and every line makes room for them.
words: SPECTRA's small print run along a contents line. The description runs in after the title (pp, pencil, one line) where the dots would be; a long one runs out in an ellipsis just before the value, and a short one leaves the dots to finish the line. Pointing inks the words to graphite with their leader. The whole sentence stays in the page for screen readers.

Props

Props of Item
Prop	Type	Default	What it does
`ItemGroup`	`ul props`		The ledger the items sit in.
`ItemGroup variant`	`"leader" \| "lineation" \| "words"`	`"leader"`	leader: a dotted leader on the baseline joins the title to the value. lineation: for a long list, every fifth line carries its number in the margin, and the line you point at or focus shows its own; below 40rem the numbers step in from the margin. words: the description runs in after the title, small, where the dots would be; a long one runs out in an ellipsis before the value, a short one leaves the dots to finish the line. The full text stays in the page for screen readers.
`ItemTitle / ItemDescription`	`span props`		What it is, and a line about it.
`ItemMedia`	`span props`		A small picture at the start of the line, such as an avatar.
`ItemContent`	`span props`		Holds the title and description.
`ItemActions`	`span props`		A value or an action at the end. It draws the leader that joins it to the content.

Craft

Where its move comes from

Where its move comes from
Component	Reference	Move
Item	Contents pages	A dotted leader joins name and value
Lineation items	A critical edition's line numbers	Every fifth line numbered in the margin; the line you point at shows its own
Words items	SPECTRA's small print; contents pages	The description runs along the leader and runs out before the value

How it moves

How it moves
Component	Articulation	What moves
Item	Ink	The leader inks from one end to the other
Lineation items	Ink	The pointed line's number inks in the margin
Words items	Ink	The words ink to graphite with their leader