List Group

HTML

<!-- Basic list group -->
<ul class="caat-list-group">
  <li class="caat-list-group__item">Understanding your DBplus pension</li>
  <li class="caat-list-group__item caat-list-group__item--active" aria-current="true">Contribution rates</li>
  <li class="caat-list-group__item">Retirement income estimator</li>
</ul>

<!-- Actionable list group -->
<div class="caat-list-group" role="list">
  <a href="/statements" class="caat-list-group__item caat-list-group__item--action" role="listitem">
    View my pension statement
  </a>
</div>

<!-- List group with badge -->
<ul class="caat-list-group">
  <li class="caat-list-group__item d-flex justify-content-between align-items-center">
    Secure messages
    <span class="caat-list-group__badge">12
      <span class="visually-hidden"> unread messages</span>
    </span>
  </li>
</ul>

<!-- Flush variant (no outer border) -->
<ul class="caat-list-group caat-list-group--flush">
  <li class="caat-list-group__item">Item one</li>
</ul>

HTL / Markup contract

<!-- Basic list group (non-interactive) -->
<ul class="caat-list-group">
  <li class="caat-list-group__item">{label}</li>
  <li class="caat-list-group__item caat-list-group__item--active" aria-current="true">{activeLabel}</li>
</ul>

<!-- Actionable list group (links) -->
<div class="caat-list-group" role="list">
  <a href="{url}" class="caat-list-group__item caat-list-group__item--action" role="listitem">
    {label}
  </a>
</div>

<!-- Item with badge -->
<li class="caat-list-group__item d-flex justify-content-between align-items-center">
  {label}
  <span class="caat-list-group__badge">{count}
    <span class="visually-hidden">{hiddenContext}</span>
  </span>
</li>

<!-- Item with icon and description -->
<li class="caat-list-group__item">
  <div class="d-flex align-items-start">
    <i class="bi bi-{icon} me-3 fs-4" aria-hidden="true"></i>
    <div>
      <strong>{label}</strong>
      <p class="mb-0 small text-muted">{description}</p>
    </div>
  </div>
</li>

<!-- Flush variant -->
<ul class="caat-list-group caat-list-group--flush">
  <li class="caat-list-group__item">{label}</li>
</ul>

.caat-list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  border-radius: var(--caat-list-group-border-radius);
  overflow: hidden;
  border: var(--caat-list-group-border-width) solid var(--caat-list-group-border-color);
}

.caat-list-group__item {
  position: relative;
  display: block;
  padding: var(--caat-list-group-padding-y) var(--caat-list-group-padding-x);
  background-color: var(--caat-list-group-bg);
  color: var(--caat-list-group-color);
  border-bottom: var(--caat-list-group-border-width) solid var(--caat-list-group-border-color);
  text-decoration: none;
}

.caat-list-group__item:last-child {
  border-bottom: 0;
}

.caat-list-group__item--active {
  background-color: var(--caat-list-group-active-bg);
  color: var(--caat-list-group-active-color);
  border-color: var(--caat-list-group-active-border);
  z-index: 2;
}

.caat-list-group__item--action {
  color: var(--caat-list-group-action-color);
  cursor: pointer;
}

.caat-list-group__item--action:hover,
.caat-list-group__item--action:focus {
  background-color: var(--caat-list-group-hover-bg);
  text-decoration: none;
}

.caat-list-group__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0.25em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  background-color: var(--caat-list-group-badge-bg);
  color: var(--caat-list-group-badge-color);
  border-radius: var(--caat-list-group-badge-radius);
}

.caat-list-group--flush {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

.caat-list-group--flush .caat-list-group__item:first-child {
  border-top: 0;
}

.caat-list-group--flush .caat-list-group__item:last-child {
  border-bottom: 0;
}

title: List Group
description: Flexible list of content items with optional actions, badges, and icons.
fields:
  - name: items
    label: Items
    type: multifield
    required: true
    minItems: 1
    maxItems: 20
    helpText: Add between 1 and 20 list items.
    fields:
      - name: label
        label: Label
        type: textfield
        required: true
        maxLength: 120
        helpText: Primary text for this list item.

      - name: description
        label: Description
        type: textfield
        required: false
        maxLength: 200
        helpText: Optional secondary text displayed below the label.

      - name: url
        label: URL
        type: pathbrowser
        required: false
        helpText: Link target. When provided, item renders as an actionable link.

      - name: badgeText
        label: Badge Text
        type: textfield
        required: false
        maxLength: 10
        helpText: Short counter or label displayed as a pill badge (e.g., "3", "New").

      - name: icon
        label: Icon
        type: iconpicker
        required: false
        helpText: Bootstrap Icon displayed before the label (e.g., bi-file-earmark-pdf).

  - name: variant
    label: Variant
    type: select
    required: false
    options:
      - value: default
        label: Default (bordered)
      - value: flush
        label: Flush (no outer border)
    helpText: Flush variant removes outer borders for embedding in cards.

  - name: activeIndex
    label: Active Item Index
    type: number
    required: false
    min: 1
    helpText: 1-based index of the item to highlight as active/current.