Spec List Item

← All Components

Dense row component for directory listings. Designed for use in status-grouped lists where items need to be scanned quickly by title.

Each row renders as a single semantic <a> tag with a title and optional description. Status, tags, and dates are intentionally omitted — status is communicated by the parent grouping; everything else lives on the detail page.

  • Root element: Semantic <a> tag — the entire row is clickable.
  • Context: Must be placed inside a <li> within a <ul class="spec-list"> for correct list semantics.
  • Description: Optional secondary text for disambiguation when titles are similar.
<ul class="spec-list">
  <li>
    <SpecListItem
      title="Living Specs"
      url="/practices/living-specs"
      description="A practice for maintaining specifications..."
    />
  </li>
</ul>