Blocks

App chrome

The framing furniture of an application screen — composed sections built only from existing .ds-* components. Stack a page header, a toolbar, a filter bar and a stat band to assemble the top of a working view.

Page header

A .ds-page-header stacks a .ds-breadcrumb, a .ds-page-header__top (title + actions) and a .ds-page-header__tabs row of .ds-tabs.

.ds-page-header

<header class="ds-page-header">
  <nav aria-label="Breadcrumb">
    <ol class="ds-breadcrumb">
      <li class="ds-breadcrumb__item"><a class="ds-breadcrumb__link" href="#">Home</a></li>
      <li class="ds-breadcrumb__item"><a class="ds-breadcrumb__link" href="#">Pricing</a></li>
      <li class="ds-breadcrumb__item" aria-current="page">Matrix</li>
    </ol>
  </nav>
  <div class="ds-page-header__top">
    <h1 class="ds-page-header__title">Pricing matrix</h1>
    <div class="ds-page-header__actions">
      <button class="ds-button">Export</button>
      <button class="ds-button ds-button--primary">New rate</button>
    </div>
  </div>
  <div class="ds-page-header__tabs">
    <div class="ds-tabs">
      <button class="ds-tabs__tab is-active">Rates</button>
      <button class="ds-tabs__tab">Profiles</button>
      <button class="ds-tabs__tab">History</button>
    </div>
  </div>
</header>

Toolbar

A .ds-toolbar with a search .ds-input on the left, a .ds-toolbar__spacer, and a right .ds-toolbar__group of actions ending in a .ds-button--primary.

.ds-toolbar

<div class="ds-toolbar ds-toolbar--bordered" role="toolbar">
  <input class="ds-input" type="search" placeholder="Search rates…" aria-label="Search">
  <div class="ds-toolbar__spacer" aria-hidden="true"></div>
  <div class="ds-toolbar__group">
    <button class="ds-button">Columns</button>
    <button class="ds-button">Export</button>
    <button class="ds-button ds-button--primary">New rate</button>
  </div>
</div>

Filter bar

A row of active filters as removable .ds-tags and a .ds-chip, followed by .ds-select refinements and a ghost .ds-button to clear them.

Filter bar

Region: EU Active 24 results

<div class="bk-filterbar">
  <span class="ds-tag ds-tag--removable">Region: EU<button class="ds-tag__remove" type="button" aria-label="Remove">×</button></span>
  <span class="ds-tag ds-tag--removable">Active<button class="ds-tag__remove" type="button" aria-label="Remove">×</button></span>
  <span class="ds-chip"><b>24</b> results</span>
  <div class="bk-filterbar__spacer" aria-hidden="true"></div>
  <span class="ds-select">
    <select aria-label="Profile">
      <option>All profiles</option>
      <option>Junior</option>
      <option>Senior</option>
    </select>
  </span>
  <span class="ds-select">
    <select aria-label="Sort">
      <option>Sort: rate ↑</option>
      <option>Sort: rate ↓</option>
    </select>
  </span>
  <button class="ds-button ds-button--sm" type="button">Clear</button>
</div>

Stat band

A .ds-statgrid of four .ds-statgrid__cells, each pairing an accent-ticked .ds-statgrid__label with a large display .ds-statgrid__value.

.ds-statgrid

Active rates

128

Avg. margin

31%

Profiles

Updated

2 days ago

<div class="ds-statgrid">
  <div class="ds-statgrid__cell">
    <div class="ds-statgrid__label">Active rates</div>
    <div class="ds-statgrid__value">128</div>
  </div>
  <div class="ds-statgrid__cell">
    <div class="ds-statgrid__label">Avg. margin</div>
    <div class="ds-statgrid__value">31<small>%</small></div>
  </div>
  <div class="ds-statgrid__cell">
    <div class="ds-statgrid__label">Profiles</div>
    <div class="ds-statgrid__value">42</div>
  </div>
  <div class="ds-statgrid__cell">
    <div class="ds-statgrid__label">Updated</div>
    <div class="ds-statgrid__value">2<small> days ago</small></div>
  </div>
</div>