Layout & data

The parts that arrange a page and its data: headings with counts, ruled rows, facts, tabs, meters and downloads. They sit on the table; only their buttons are raised.

SectionHeading

The heading over a group: a section title, an optional count in tabular figures, an optional action, and an ink rule underneath.

Revit families

Notes

Part	Tokens	Notes
Title	`type-section · h2 or h3`	Sentence case.
Count	`text-muted-foreground · tabular-nums`	A number, not a badge.
Rule	`border-b border-foreground · pb-1`	Ink, the one heavy line on the page.

MetaLine

Facts about a thing on one line, joined with a middle dot. Empty items drop out, so the line never shows a stray dot.

S-600 · 3" = 1'-0" · v2.3.1

Snowdon Towers · today, 9:14 AM

Part	Tokens	Notes
Type	`type-meta · 13/16 · 500`	Tabular figures.
Join	`" · "`	A middle dot with a space each side.

ListRow

A ruled row: a title, a meta line under it, and one trailing action. With href, the whole row is the link while the trailing button stays its own target.

A307 Bolts-Head
5/8" · 4×
Steel Shear Plate-Face
3/4" · 1×
000_BreakLine_Pick
Typical · 3×

Part	Tokens	Notes
Row	`border-b border-border · py-2`	Hairlines between rows, none around them.
Title	`type-item`	A link when href or render is set.
Trailing	`One action`	Usually a small secondary or icon button.

KeyValueList

Facts with names, as a ruled list: the detail page’s About panel, the Portal’s account facts.

Project: Snowdon Towers Sample Structural
Sheet: S600 · Details
Scale: 3" = 1'-0"
Placed: 4 times

NavTabs

Route tabs for a section: the Library bar, the Portal tabs. The current tab is ink with a 2px cyan underline and aria-current=page.

Part	Tokens	Notes
Tab	`min-h-6 · text-sm font-semibold`	Graphite, ink on hover.
Current	`aria-current=page · border-b-2 border-cyan`	Cyan marks where you are.
Render	`render={<Link to=… />}`	Pass the router’s Link so navigation stays client-side.

Meter

How much of a known total is used: named seats in the Portal. Not a progress bar; use it only when the maximum is real.

Named seats24 of 95 used

Part	Tokens	Notes
Track	`h-1 · rounded-full · bg-muted · recessed`	8px tall.
Fill	`bg-primary`	Ink, never a state hue.
Value	`valueText`	Say it in words, too.

LoadMore

The next page of a long list, at its foot. A secondary button, centred, that shows it is loading.

Detail 1
S-600
Detail 2
S-601
Detail 3
S-602

Avatar & Kbd

Two small parts. Avatar is a member’s initials on ink; Kbd is a key in the shortcut it belongs to.

Avatar

Kbd

Ctrl K⌘KEsc

DownloadButton

A download that says what is happening. The label swaps to “Downloading…” while the file is fetched; the size follows the label when you know it.

Part	Tokens	Notes
Label	`label · pendingLabel`	“Download …” then “Downloading…”.
Size	`size (bytes)`	Shown as 48 MB through formatSize.
Source	`href + filename, or getUrl`	getUrl for signed links fetched on click.