Components

Reference lists and checklists

Build dense key-value references, scannable completion checklists, and customizable list groups with accessible semantic markup.

Components guideCopy-ready referencev0.7.0 current

Components

Reference lists and checklists

Reference lists make compact name-and-value data easy to scan without forcing it into a table. Checklists present a short set of completed requirements or recommended steps with a consistent success marker.

Key-value reference

A description list preserves the relationship between each name and value while the reference classes provide a compact responsive layout.

Package: @boobstrap/boobstrap
CSS entry: dist/boobstrap.css
JavaScript entry: dist/js/index.js

HTML · Description-list reference

<dl class="bs-reference-list">
  <div class="bs-reference-row">
    <dt class="bs-reference-name">Package</dt>
    <dd class="bs-reference-value bs-m-0">@boobstrap/boobstrap</dd>
  </div>
  <div class="bs-reference-row">
    <dt class="bs-reference-name">CSS entry</dt>
    <dd class="bs-reference-value bs-m-0">dist/boobstrap.css</dd>
  </div>
  <div class="bs-reference-row">
    <dt class="bs-reference-name">JavaScript entry</dt>
    <dd class="bs-reference-value bs-m-0">dist/js/index.js</dd>
  </div>
</dl>

Completion checklist

Use a checklist for a short set of satisfied requirements. Include status in the text because the decorative check marker is hidden from assistive technology.

Keyboard focus remains visible
Controls have accessible names
Content works at narrow widths

HTML · Completion checklist

<ul class="bs-checklist">
  <li>Keyboard focus remains visible</li>
  <li>Controls have accessible names</li>
  <li>Content works at narrow widths</li>
</ul>

List groups

Use a list group for a bordered collection of related records, destinations, or selectable rows. Links and buttons can opt into hover treatment with the action modifier.

Design systemUpdated two minutes agoReady
DocumentationCurrent workspace

HTML · List group

<ul class="bs-list-group">
  <li class="bs-list-group-item">
    <span class="bs-list-group-leading" aria-hidden="true">
      <i data-lucide="diamond" class="bs-icon" aria-hidden="true"></i>
    </span>
    <span class="bs-list-group-content">
      <strong class="bs-list-group-title">Design system</strong>
      <span class="bs-list-group-description">Updated two minutes ago</span>
    </span>
    <span class="bs-list-group-trailing">Ready</span>
  </li>
  <li>
    <a class="bs-list-group-item bs-list-group-item-action" href="/docs" aria-current="page">
      <span class="bs-list-group-content">
        <strong class="bs-list-group-title">Documentation</strong>
        <span class="bs-list-group-description">Current workspace</span>
      </span>
    </a>
  </li>
  <li>
    <button class="bs-list-group-item bs-list-group-item-action" type="button" aria-disabled="true">
      <span class="bs-list-group-content">
        <strong class="bs-list-group-title">Archived project</strong>
        <span class="bs-list-group-description">Read-only record</span>
      </span>
    </button>
  </li>
</ul>

Reference data

Prefer <dl>, <dt>, and <dd> for name/value pairs.

Choose row semantics

Use a link for navigation, a button for an action, and a list item for static content. Mark the current destination with aria-current.

Disabled rows

Prefer a native disabled button. For links, remove the destination and expose the disabled meaning in text.

List API

Reference rows use presentation classes and should retain meaningful content order: name first, value second. Checklists stay native lists so item count and navigation remain available to assistive technology.

Class	Purpose	Recommended element
`.bs-reference-list`	Groups rows inside one bordered, clipped surface.	`<dl>` or a neutral wrapper.
`.bs-reference-row`	Creates a responsive two-column name/value row.	A row wrapper inside the list.
`.bs-reference-name`	Allows long names and tokens to wrap safely.	`<dt>` or the first row child.
`.bs-reference-value`	Formats values in muted monospace text with safe wrapping.	`<dd>` or the second row child.
`.bs-checklist`	Removes default bullets and adds an accessible-color visual check marker to each item.	A semantic `<ul>`.
`.bs-list-group`	Creates the bordered collection of stacked list items.	A semantic `<ul>` or `<ol>`.
`.bs-list-group-flush`	Removes outer border and rounded corners for embedding edge-to-edge inside cards.	The `.bs-list-group` element.
`.bs-list-group-compact`	Reduces vertical padding for high-density toolbars or sidebars.	The `.bs-list-group` element.
`.bs-list-group-item`	Padded row with dividers and typography defaults.	`<li>`, `<a>`, or `<button>`.
`.bs-list-group-item-action`	Interactive hover, active, and focus styling for links and buttons.	The interactive item.
`.bs-list-group-leading`	Leading slot for icons or indicators.	Child element before content.
`.bs-list-group-content`	Main text column organizing title and description.	Middle container element.
`.bs-list-group-title`	Bold primary label for the item.	Heading or strong text.
`.bs-list-group-description`	Muted secondary description text.	Secondary span or paragraph.
`.bs-list-group-trailing`	Trailing slot for badges, values, or actions.	Last child container element.