Component

List and detail

A list of records beside the detail of the selected one, each pane scrolling on its own.

Plain-text source, for agents and clipboard use: /components/source/split-view.txt

When to use it

For working through a queue: supplier requests, messages, tasks. The list stays in view while the detail changes, so moving to the next record is one click. Selecting an item marks it current and shows its panel. The split view responds to its own width rather than the viewport: below 32rem the list and the detail take turns, the detail gains a Back button, and focus follows the change of view.

Not this

Not when each record needs the full width or a URL of its own that people share; link to a detail page. Not for comparing two records side by side.

Examples

Supplier requests

Select a request to show it. Make the window narrow to see the panes take turns.

Hotel Rangá

Booking: KB-104931
Rooms: 6 double, 14–16 Sep
Requested: 3 days ago

html

<div class="flux-split" data-flux-split>
  <div class="flux-split__list">
    <ul class="flux-split__items" aria-label="Supplier requests">
      <li>
        <button class="flux-split__item" type="button" aria-controls="request-1" aria-current="true">
          <span class="flux-split__item-title">Hotel Rangá <span class="flux-badge flux-badge--pending">On request</span></span>
          <span class="flux-split__item-meta"><span class="flux-split__ref">KB-104931</span> · 6 rooms, 14 Sep</span>
        </button>
      </li>
      <li>
        <button class="flux-split__item" type="button" aria-controls="request-2" aria-current="false">
          <span class="flux-split__item-title">Fosshótel Glacier Lagoon <span class="flux-badge flux-badge--awaiting">Awaiting supplier</span></span>
          <span class="flux-split__item-meta"><span class="flux-split__ref">KB-104940</span> · 2 rooms, 19 Sep</span>
        </button>
      </li>
      <li>
        <button class="flux-split__item" type="button" aria-controls="request-3" aria-current="false">
          <span class="flux-split__item-title">Hótel Búðir <span class="flux-badge flux-badge--confirmed">Confirmed</span></span>
          <span class="flux-split__item-meta"><span class="flux-split__ref">KB-104957</span> · 8 rooms, 22 Sep</span>
        </button>
      </li>
    </ul>
  </div>
  <div class="flux-split__detail">
    <section class="flux-split__panel" id="request-1" aria-labelledby="request-1-title">
      <button class="flux-button flux-button--ghost flux-button--sm flux-split__back" type="button"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.5 8h-9M7 4.5L3.5 8 7 11.5" /></svg>All requests</button>
      <h3 class="flux-split__title" id="request-1-title">Hotel Rangá</h3>
      <dl class="flux-dl">
        <div class="flux-dl__pair"><dt class="flux-dl__term">Booking</dt><dd class="flux-dl__detail flux-dl__detail--data">KB-104931</dd></div>
        <div class="flux-dl__pair"><dt class="flux-dl__term">Rooms</dt><dd class="flux-dl__detail">6 double, 14–16 Sep</dd></div>
        <div class="flux-dl__pair"><dt class="flux-dl__term">Requested</dt><dd class="flux-dl__detail">3 days ago</dd></div>
      </dl>
      <div class="flux-split__actions">
        <button class="flux-button" type="button">Mark confirmed</button>
        <button class="flux-button flux-button--secondary" type="button">Send reminder</button>
      </div>
    </section>
    <section class="flux-split__panel" id="request-2" aria-labelledby="request-2-title" hidden>
      <button class="flux-button flux-button--ghost flux-button--sm flux-split__back" type="button"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.5 8h-9M7 4.5L3.5 8 7 11.5" /></svg>All requests</button>
      <h3 class="flux-split__title" id="request-2-title">Fosshótel Glacier Lagoon</h3>
      <dl class="flux-dl">
        <div class="flux-dl__pair"><dt class="flux-dl__term">Booking</dt><dd class="flux-dl__detail flux-dl__detail--data">KB-104940</dd></div>
        <div class="flux-dl__pair"><dt class="flux-dl__term">Rooms</dt><dd class="flux-dl__detail">2 twin, 19–20 Sep</dd></div>
        <div class="flux-dl__pair"><dt class="flux-dl__term">Requested</dt><dd class="flux-dl__detail">Yesterday</dd></div>
      </dl>
    </section>
    <section class="flux-split__panel" id="request-3" aria-labelledby="request-3-title" hidden>
      <button class="flux-button flux-button--ghost flux-button--sm flux-split__back" type="button"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.5 8h-9M7 4.5L3.5 8 7 11.5" /></svg>All requests</button>
      <h3 class="flux-split__title" id="request-3-title">Hótel Búðir</h3>
      <dl class="flux-dl">
        <div class="flux-dl__pair"><dt class="flux-dl__term">Booking</dt><dd class="flux-dl__detail flux-dl__detail--data">KB-104957</dd></div>
        <div class="flux-dl__pair"><dt class="flux-dl__term">Rooms</dt><dd class="flux-dl__detail">8 double, 22–23 Sep</dd></div>
        <div class="flux-dl__pair"><dt class="flux-dl__term">Confirmed</dt><dd class="flux-dl__detail">Today, 09:12</dd></div>
      </dl>
    </section>
  </div>
</div>

Anatomy

Part	Description
Container	One bordered surface with a fixed height. Each pane scrolls inside it.
List	A labelled ul of item buttons, each with a title line and a line of metadata.
Item	A button with aria-controls naming its panel and aria-current="true" when selected.
Detail	The pane holding one panel per item. Only the selected one is shown.
Panel	A section with a heading, the record and its actions, plus a Back button that only appears when narrow.

API

Name	Kind	Description
`flux-split`	class	The container. Its height is --flux-split-height.
`data-flux-split`	attribute	Wires selection, panels and the narrow view.
`flux-split__list \| __items`	class	The list pane and its ul. Label the ul.
`flux-split__item`	class	On each button. Set aria-controls to its panel’s id.
`flux-split__item-title \| __item-meta \| __ref`	class	The title line, the metadata line and a mono reference inside it.
`flux-split__detail \| __panel`	class	The detail pane and each panel. Hide all but the selected panel.
`flux-split__back`	class	On a button in each panel. Only shown when the container is narrow.
`flux-split__title`	class	The panel heading. Receives focus when the narrow view switches to it.
`flux-split__actions`	class	The record’s actions, below a hairline at the end of the panel.
`data-view`	attribute	"list" or "detail", set by the script. Decides which pane shows when narrow.

States

State	Treatment
Item hover	layer-hover-01 fill.
Item selected	surface-selected fill that continues past the divider as a pointer at the detail, with aria-current="true".
Narrow, list	Below 32rem of container width, only the list shows.
Narrow, detail	Only the detail shows, with a Back button above its heading.

Keyboard

Keys	Action
`Tab`	Moves through the items, then into the detail.
`Enter, Space`	Selects the item and shows its panel. When narrow, focus moves to the panel heading.
`Back button`	Returns to the list and focuses the selected item.

Accessibility

Items are buttons, with aria-current="true" marking the selection so it is not conveyed by fill alone.
Each panel is a section labelled by its heading.
When the view switches in a narrow container, focus follows the switch so it is never left on a hidden element.

Tokens

The tier-3 and tier-2 tokens this component binds to. Change the token, not the component.

--flux-split-list-width | -height | -bg | -border
--flux-split-item-padding-y | -item-padding-x | -item-hover | -item-meta
--flux-split-item-selected | -item-pointer-size
--flux-split-detail-padding

Do and don’t

Keep each item to a title line and a metadata line.
Select the first item when the view opens, so the detail is never blank.
Put the record’s actions in its panel, not in the list.

Don’t

Do not nest another bordered surface inside the detail; group with headings and hairlines.
Do not use a split view for records people need to link to.