Skip to main content

Content Switcher

Types

Solid

Result
Loading...
Live Editor
<div class="fds-content-switcher fds-content-switcher--solid">
  <button class="fds-content-switcher__btn fds-content-switcher__btn--selected">
    <span class="fds-content-switcher__label">First Section</span>
  </button>
  <button class="fds-content-switcher__btn">
    <span class="fds-content-switcher__label">Second Section</span>
  </button>
  <button class="fds-content-switcher__btn">
    <span class="fds-content-switcher__label">Third Section</span>
  </button>
</div>

Outline

Result
Loading...
Live Editor
<div class="fds-content-switcher fds-content-switcher--outline">
  <button class="fds-content-switcher__btn fds-content-switcher__btn--selected">
    <span class="fds-content-switcher__label">First Section</span>
  </button>
  <button class="fds-content-switcher__btn">
    <span class="fds-content-switcher__label">Second Section</span>
  </button>
  <button class="fds-content-switcher__btn">
    <span class="fds-content-switcher__label">Third Section</span>
  </button>
</div>

Size

Default

Result
Loading...
Live Editor
<div class="fds-content-switcher fds-content-switcher--solid">
  <button class="fds-content-switcher__btn fds-content-switcher__btn--selected">
    <span class="fds-content-switcher__label">First Section</span>
  </button>
  <button class="fds-content-switcher__btn">
    <span class="fds-content-switcher__label">Second Section</span>
  </button>
  <button class="fds-content-switcher__btn">
    <span class="fds-content-switcher__label">Third Section</span>
  </button>
</div>

Small

Result
Loading...
Live Editor
<div class="fds-content-switcher fds-content-switcher--solid fds-content-switcher--sm">
  <button class="fds-content-switcher__btn fds-content-switcher__btn--selected">
    <span class="fds-content-switcher__label">First Section</span>
  </button>
  <button class="fds-content-switcher__btn">
    <span class="fds-content-switcher__label">Second Section</span>
  </button>
  <button class="fds-content-switcher__btn">
    <span class="fds-content-switcher__label">Third Section</span>
  </button>
</div>