Components

Tabs

Root .wckd-tabs with .columns; each tab is a .column containing button.tabs-toggle then .tabs-content. Mark one .column.active on load. Optional .accordion stacks toggles on narrow viewports. Omit .tabs-toolbar to let JS build the toolbar from toggle labels.

Jump to:

Download & setup

Download WCKD UI Style guide

Load the kit from Get Started; use the style guide for utilities and tokens while wiring this component.

Default implementation

Basic tabs

Without .tabs-toolbar, wckd-ui.js builds the tablist from each column’s .tabs-toggle text.

Launch summary and key outcomes.

Authentication, endpoints, and examples.

Connector setup, webhooks, and deployment notes.

Markup

<div class="wckd-tabs columns count-1 accordion background-color">
  <div class="column active">
    <button class="tabs-toggle" type="button">Overview</button>
    <div class="tabs-content pad">Overview content</div>
  </div>
  <div class="column">
    <button class="tabs-toggle" type="button">API</button>
    <div class="tabs-content pad">API content</div>
  </div>
  <div class="column">
    <button class="tabs-toggle" type="button">Integrations</button>
    <div class="tabs-content pad">Integration content</div>
  </div>
</div>

Configuration options

Each variant keeps the same markup contract as the default; add only the classes or attributes named in the heading.

Vertical tabs

Add vertical for a sidebar-style tab rail; toolbar labels still come from each .tabs-toggle unless you add .tabs-toolbar.

Name, bio, and avatar settings.

Password and 2FA setup.

Markup

<div class="wckd-tabs columns count-1 accordion vertical background-color">
  <div class="column active">
    <button class="tabs-toggle" type="button">Profile</button>
    <div class="tabs-content pad">Profile settings</div>
  </div>
  <div class="column">
    <button class="tabs-toggle" type="button">Security</button>
    <div class="tabs-content pad">Security settings</div>
  </div>
</div>

Accordion behaviour on narrow screens

Add accordion to allow stacked toggle behaviour when viewport width is constrained.

Overview content.

Specs content.

Markup

<div class="wckd-tabs columns count-1 accordion background-color">
  <div class="column active">
    <button class="tabs-toggle" type="button">Overview</button>
    <div class="tabs-content pad">Overview content</div>
  </div>
  <div class="column">
    <button class="tabs-toggle" type="button">Specs</button>
    <div class="tabs-content pad">Specs content</div>
  </div>
</div>

Explicit toolbar markup

Add .tabs-toolbar before .wckd-tabs when toolbar order or labels must differ from the in-panel toggle text.

Summary panel content.

API panel content.

Markup

<div class="tabs-toolbar" aria-label="Sample toolbar">
  <button class="tabs-toggle" type="button">Summary</button>
  <button class="tabs-toggle" type="button">API</button>
</div>
<div class="wckd-tabs columns count-1 background-color">
  <div class="column active"><button class="tabs-toggle" type="button">Summary</button><div class="tabs-content pad">Summary panel</div></div>
  <div class="column"><button class="tabs-toggle" type="button">API</button><div class="tabs-content pad">API panel</div></div>
</div>

When to use

  • Related panels (settings, product vs API vs integrations) without route changes.
  • Dense docs layouts with vertical tab stacks.

Implementation notes

  • If there is no .tabs-toolbar before .wckd-tabs, JS creates one and labels buttons from each .column > .tabs-toggle.
  • Author .tabs-toolbar yourself when you need custom labels or order, and keep button count aligned with columns.
  • Use <button type="button"> for tab controls unless you intentionally use link-shaped tabs.

Developer checklist

  • Keep .wckd-tabs > .column > .tabs-toggle + .tabs-content; exactly one .column.active initially.
  • If you author .tabs-toolbar, match button count/order to columns.
  • Add aria-label on .tabs-toolbar or .wckd-tabs when context is not obvious from nearby headings.
  • Keyboard-test: Tab into the tablist, arrow between tabs if supported, verify panels update.

← All components