list-tabular — Lattice component

list-tabular

InventoryLedgerStructure

Hairline-ruled ledger of items — name on the left, body on the right.

Open in Playground
Variant

Use for compact reference tables: glossary-style entries, key/value pairs, specs. Four primary variants (def, metric, spec, register) tune the visual treatment; secondary modifiers (rule, solid, stacked, outline) refine each.

referenceoverviewstatus

When to use

  • Compact reference rows. Five or more rows where each row is a name plus a short description or value. Glossary-style entries, key/value pairs, technical specs.
  • Pick one primary variant. def for editorial, metric for tiled values, spec for technical keys, register for tagged pills. Default (no variant) is the hairline ledger.
  • Numbered automatically. Author as ol (1. source). The leading column is the counter — def and spec.stacked enlarge it to span both rows.

When not to use

  • Three or fewer rows. The ledger needs density to justify its shape. For two to four items, reach for cards-stack — the rows get the room to breathe.
  • Long per-row prose. Each row is a name plus a sentence. If the description runs two or three sentences, move to cards-stack or split across slides.
  • Stacking two primary variants. def, metric, spec, and register are mutually exclusive. Pair each only with its secondary modifier (def+rule, metric+solid, spec+stacked, register+outline).

Common mistakes

  • Pairing a secondary modifier with the wrong primary variant (e.g. def solid or metric rule). Each secondary modifier is scoped to exactly one primary — rule only styles def, solid only styles metric, stacked only styles spec, outline only styles register; pairing across combinations does nothing because no CSS selector matches.
  • Authoring rows as a bullet list (-) instead of a numbered list (1.). The counter column and row styling are keyed to ol > li — a ul doesn't produce the numbered ledger at all.

Authoring

<!-- _class: list-tabular -->

## Slide heading.

1. First entry
   - Description or value for the first entry.
2. Second entry
   - Description or value for the second entry.
3. Third entry
   - Description or value for the third entry.
4. Fourth entry
   - Description or value for the fourth entry.

Slots

SlotSelectorRequiredDescription
titleh2yesSlide heading.
rowsol > liyesEach numbered item (1.) is one row — the name on the line, with an optional nested bullet for its description or value. The leading column is the auto counter.

Anatomy

┌─────────────────────────────────────────┐
│  header                                 │
│  Ledger heading.                        │
│                                         │
│  01  Term      value     metadata       │
│  02  Term      value     metadata       │
│  03  Term      value     metadata       │
│  04  Term      value     metadata       │
│                                         │
│  footer                           1/19  │
└─────────────────────────────────────────┘

Variant decision rule

  • default (no modifier)A plain hairline-ruled ledger — name left, description right, nothing tinted.
  • defReference entries read like dictionary definitions — an eyebrow above each term and an enlarged counter spanning both lines.
  • metricEach row's value is the point — renders the trailing value as a display-weight figure instead of the default's plain mono text.
  • specRows are technical flags or parameters — monospace keys beside type chips.
  • registerEach row carries a status — status pills per row.
  • ruleUnder def, the register wants a visible accent rail running down the left edge of the whole list, not just the per-term counter.
  • solidUnder metric, the values are headline numbers that deserve a filled panel instead of an outlined tile.
  • stackedUnder spec, the description clause is long enough to want its own line below the key instead of trailing beside it.
  • outlineUnder register, a lighter, keyline-only pill treatment fits the deck's tone better than filled pills.

Variants

defEditorial (def)

Counter spans rows; eyebrow above.

<!-- _class: list-tabular def -->

## def pairs each term with its role.

1. Label `Term`
   - def styles the register as definitions.
2. Chip `Role`
   - The inline code becomes a right-hand chip.
3. Body `Clause`
   - One clause under each term.

metricTile (metric)

Values in bordered tiles.

<!-- _class: list-tabular metric -->

## metric turns the chips into figures.

1. Rows carry values `12 / 16`
2. Figures right-align `100%`
3. Labels stay short `4 rows`

specspec

Mono keys for flags and params.

<!-- _class: list-tabular spec -->

## spec documents flags and their types.

1. `LATTICE_THEME` `string`
   - spec sets code labels beside type chips.
2. `LATTICE_DEBUG` `bool`
   - One clause explains each flag.

registerregister

Status pills on each row.

<!-- _class: list-tabular register -->

## register pairs names with status chips.

1. cards-grid `stable`
2. split-panel `stable`
3. radar `beta`
4. word-cloud `preview`

ruledef + rule

Accent rail down the left edge.

<!-- _class: list-tabular def rule -->

## rule draws a hairline under every row.

1. Hairlines `On`
   - rule adds the horizontal separators.
2. Density `Same`
   - Budgets do not change with the look.

solidmetric + solid

Filled value tiles for headlines.

<!-- _class: list-tabular metric solid -->

## solid fills the register with panel color.

1. Net new rows `4`
2. Panel fill `on`
3. Best for `headline metrics`

stackedspec + stacked

Clause drops below the name.

<!-- _class: list-tabular spec stacked -->

## stacked drops the clause under its label.

1. `GET /plans/:name` `200 | 404`
   - stacked gives each row two decks of text.
2. `GET /gallery/:name` `200`
   - The clause wraps below, full width.

outlineregister + outline

Outline pills — a lighter register.

<!-- _class: list-tabular register outline -->

## outline boxes each row in a keyline.

1. cards-grid `stable`
2. split-panel `stable`
3. quote `stable`

Related

  • glossaryterm/definition pairs with auto-derived range pill
  • cards-stacktwo or three richer items, not a ledger
  • actorsthe left column is a named person, not a key
  • listrows are bullets without a label-plus-description shape