Components

Reference lists and checklists

Build dense key-value references and scannable completion checklists 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-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">Documentation</a></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` / `.bs-list-group-flush` / `.bs-list-group-compact`	Creates the bordered collection and optional edge-to-edge or dense variants.	A semantic list.
`.bs-list-group-item` / `.bs-list-group-item-action`	Styles a row and adds interactive hover treatment where appropriate.	A list item, link, or button.
`.bs-list-group-leading` / `.bs-list-group-content` / `.bs-list-group-trailing`	Aligns optional supporting regions around flexible row content.	Row children.
`.bs-list-group-title` / `.bs-list-group-description`	Formats a primary label and secondary description.	Text inside the content region.