Components

Tabs

Title-voiced tabs with an accent underline on the active tab and an optional sublabel for context. Mark the active tab with is-active.

Tab row

Each ds-tabs__tab can carry a ds-tabs__sublabel for a one-line hint under the title.

With sublabels

<div class="ds-tabs">
  <button class="ds-tabs__tab is-active">Check a margin<small class="ds-tabs__sublabel">rate + salary known</small></button>
  <button class="ds-tabs__tab">Target rate<small class="ds-tabs__sublabel">from a salary</small></button>
  <button class="ds-tabs__tab">Max salary<small class="ds-tabs__sublabel">from a rate</small></button>
</div>

Web Component

Wrap a ds-tabs row of ds-tabs__tab[data-pane] buttons and matching ds-tabpane[data-pane] panes in a <ds-tabs> element to wire activation and ARIA. The active pane is the one whose data-pane matches the selected tab.

<ds-tabs>

Margin from a known rate and salary.

Target rate from a salary.

Maximum salary from a rate.

<ds-tabs>
  <div class="ds-tabs">
    <button class="ds-tabs__tab" data-pane="margin">Check a margin</button>
    <button class="ds-tabs__tab" data-pane="rate">Target rate</button>
    <button class="ds-tabs__tab" data-pane="salary">Max salary</button>
  </div>
  <div class="ds-tabpane" data-pane="margin">Margin from a known rate and salary.</div>
  <div class="ds-tabpane" data-pane="rate">Target rate from a salary.</div>
  <div class="ds-tabpane" data-pane="salary">Maximum salary from a rate.</div>
</ds-tabs>