component

TuxDescriptionList

Term / definition pairs. The right semantic structure for spec tables, event details, file metadata — anything shaped as "label : value". Renders as native <dl> + <dt> + <dd> for screen-reader and search-engine benefits. Two layouts (inline / stacked) and two emphases (editorial for content, data for product metadata).

canonical

Editorial · inline

Marketing surfaces — event details, exhibit captions, sponsor info. Eyebrow-styled terms, body-text values.

Event details

Date
Thursday, May 14, 2026
Time
9:00 AM – 4:00 PM CDT
Location
Rellis Conference Center · Building 4202
Capacity
120 attendees
Cost
Free for TAMUS staff; $75 external
<TuxDescriptionList
  title="Event details"
  :items="[
    { term: 'Date',     value: 'Thursday, May 14, 2026' },
    { term: 'Time',     value: '9:00 AM – 4:00 PM CDT' },
    { term: 'Location', value: 'Rellis Conference Center' },
  ]"
/>

data emphasis

Landscape file metadata

Pass emphasis="data" for product surfaces. Mono-font terms, tabular numerals on values. <code> tags inside values render in brand maroon.

File · findings.pdf

path
/research/grants/nsf-1234/data/2026/Q4/findings.pdf
size
4,217,832 bytes
modified
2026-04-22T14:33:18Z
owner
rchen@tti.tamu.edu
tier
Restricted · ITAR
retention
Permanent
classifier
CLS-204 · 0.87 confidence

stacked layout

More breathing room

Pass layout="stacked". Term above, value below. Right for full-width metadata blocks where each pair deserves real estate — research project overview, dataset description.

Project
Twelve-County Rural Roadway Study
Sponsor
TxDOT IAC 2020-78-104
Period of performance
2020-09-01 through 2026-08-31
Principal investigators
Dr. Lina Hassan (TTI), Dr. Imani Park (CTE)

slot composition

Rich values

Each item exposes a #value-{idx} slot for richer content than a string — links, badges, code snippets, embedded components.

classifier
CLS-204 · View confidence breakdown
tier
ITARRestricted
agent
landscape-agent@host-04 · last beat 3s ago

props

Props + item shape

  • items — array of { term, value? }. Required.
  • layout — "inline" | "stacked". Defaults to "inline".
  • emphasis — "editorial" | "data". Defaults to "editorial".
  • title — optional heading above the list with maroon underline.
  • #value-{idx} slots — rich values for any item.