Blocks

Data & detail

Composed layouts for reading and acting on a single record: a detail page split, an empty placeholder, a faceted result browser, an activity feed, and a destructive confirmation. Each is assembled only from existing .ds-* primitives — flat, 1px, no radius, no shadow.

Detail layout

A primary .ds-card for the record body beside a 320px .ds-card sidebar holding a .ds-dl key/value readout.

Main + detail sidebar

A 6-month mission to migrate the reporting warehouse. The day rate is computed from the target salary, the agreed margin, and rebilled travel capped at €200 per day.

<div class="bk-split"> <!-- grid-template-columns: 1fr 320px -->
  <article class="ds-card">
    <div class="ds-card__header"><h3 class="ds-card__title">Acme Consulting — Senior data engineer</h3></div>
    <div class="ds-card__body"><p>A 6-month mission to migrate the reporting warehouse…</p></div>
  </article>
  <aside class="ds-card">
    <div class="ds-card__block">
      <dl class="ds-dl">
        <dt class="ds-dl__term">Status</dt><dd class="ds-dl__desc"><span class="ds-tag ds-tag--success">Confirmed</span></dd>
        <dt class="ds-dl__term">Owner</dt><dd class="ds-dl__desc">Vincent Devillers</dd>
        <dt class="ds-dl__term">Created</dt><dd class="ds-dl__desc">2026-05-02</dd>
        <dt class="ds-dl__term">Updated</dt><dd class="ds-dl__desc">2026-06-17</dd>
      </dl>
    </div>
  </aside>
</div>

Empty state

A .ds-empty placeholder — icon, title, description, and a primary action — set inside a bordered .ds-card.

Empty in a card

No missions yet

Create your first mission to compute a day rate, margin, and target salary.

<div class="ds-card">
  <div class="ds-empty">
    <div class="ds-empty__icon" aria-hidden="true"><svg>…</svg></div>
    <p class="ds-empty__title">No missions yet</p>
    <p class="ds-empty__desc">Create your first mission to compute a day rate…</p>
    <div class="ds-empty__actions">
      <button class="ds-button ds-button--primary">New mission</button>
    </div>
  </div>
</div>

Faceted filter

A .ds-card facet panel of .ds-checkbox groups and .ds-tag chips beside a .ds-card result list.

Facets + results

<div class="bk-facets"> <!-- grid-template-columns: 240px 1fr -->
  <aside class="ds-card">
    <div class="bk-group">
      <p class="bk-group__title">Status</p>
      <label class="ds-checkbox"><input type="checkbox" checked><span class="ds-checkbox__box"></span> Confirmed</label>
      <label class="ds-checkbox"><input type="checkbox"><span class="ds-checkbox__box"></span> Draft</label>
    </div>
    <div class="bk-group">
      <p class="bk-group__title">Discipline</p>
      <span class="ds-tag ds-tag--info">Data</span> <span class="ds-tag">Design</span>
    </div>
  </aside>
  <section class="ds-card">
    <div class="bk-result"><span>Acme — Senior data engineer</span><span class="bk-result__meta">€900 / day</span></div>
  </section>
</div>

Activity feed

A .ds-timeline of record events; is-* recolors each .ds-timeline__dot by status.

.ds-timeline

09:42

Mission confirmed

Day rate locked at €900 after Director sign-off.
09:30

Review requested

Sent to the Director for approval.
08:15

Margin below target

Computed margin 28% — under the 30% floor.
Yesterday

Currency missing

Salary entered without a currency.
2 days ago

Draft created

Imported from the Q3 template.

<ol class="ds-timeline">
  <li class="ds-timeline__item">
    <span class="ds-timeline__dot is-success"></span>
    <div class="ds-timeline__time">09:42</div>
    <div class="ds-timeline__title">Mission confirmed</div>
    <div class="ds-timeline__body">Day rate locked at €900 after Director sign-off.</div>
  </li>
  <li class="ds-timeline__item">
    <span class="ds-timeline__dot is-warning"></span>
    <div class="ds-timeline__time">08:15</div>
    <div class="ds-timeline__title">Margin below target</div>
    <div class="ds-timeline__body">Computed margin 28% — under the 30% floor.</div>
  </li>
</ol>

Confirmation dialog

A destructive confirm built from .ds-modal. The fixed .ds-overlay backdrop is set to flow here so it renders inline; a .ds-modal__spacer pushes Cancel + the danger Confirm to the right.

Destructive confirm

<div class="ds-overlay is-open">
  <div class="ds-modal">
    <div class="ds-modal__head">
      <h2 class="ds-modal__title">Delete mission</h2>
      <button class="ds-button ds-modal__close">Close</button>
    </div>
    <div class="ds-modal__body">
      <p>Deleting <strong>Acme — Senior data engineer</strong> removes its rate, margin, and history. This cannot be undone.</p>
    </div>
    <div class="ds-modal__foot">
      <span class="ds-modal__spacer"></span>
      <button class="ds-button">Cancel</button>
      <button class="ds-button ds-button--danger">Delete mission</button>
    </div>
  </div>
</div>