CSS reference - Bifrost

Tabs styling

Use <button class="bf-tab"> inside .bf-tabs and .bf-tabs-container to style tab buttons. Mark a tab as active with .bf-tab-active:

<div class="bf-tabs-container">
  <div class="bf-tabs">
    <button class="bf-tab">First tab</button>
    <button class="bf-tab bf-tab-active">Active tab</button>
    <button class="bf-tab">Third tab</button>
    <button class="bf-tab bf-tab-disabled" disabled>Disabled</button>
  </div>
</div>
<div class="bf-page-padding">Tab content</div>

Tab content

Styled variant

Add .bf-tabs-styled on the container for an alternative styling.

<div class="bf-tabs-container bf-tabs-styled">
  <div class="bf-tabs">
    <button class="bf-tab">First tab</button>
    <button class="bf-tab bf-tab-active">Active tab</button>
    <button class="bf-tab">Third tab</button>
    <button class="bf-tab bf-tab-disabled" disabled>Disabled</button>
  </div>
</div>
<div class="bf-page-padding">Tab content</div>

Tab content

Link tabs

Links inside .bf-tabs will render as tab buttons. Mark a link tab as active with .active.

<div class="bf-tabs-container">
  <div class="bf-tabs">
    <a href="#path">First tab</a>
    <a href="#path" class="active">Active tab</a>
    <a href="#path">Third tab</a>
    <a href="#path" class="bf-tab-disabled" tabindex="-1">Disabled</a>
  </div>
</div>
<div class="bf-page-padding">Tab content</div>

First tab Active tab Third tab Disabled

Tab content

No background

<div class="bf-tabs-container bf-tabs-no-background">
  <div class="bf-tabs">
    <a href="#path">First tab</a>
    <a href="#path" class="active">Active tab</a>
    <a href="#path">Third tab</a>
    <a href="#path" class="bf-tab-disabled" tabindex="-1">Disabled</a>
  </div>
</div>
<div class="bf-page-padding">Tab content</div>

First tab Active tab Third tab Disabled

Tab content

Active tab background

To set background of active tab for .bf-tabs-styled variant use --bf-tabs-content-bg variable. Make sure to match background with your content.

<div
  class="bf-tabs-container bf-tabs-styled"
  style="--bf-tabs-content-bg:var(--bfc-base-3)"
>
  <div class="bf-tabs">
    <a href="#path">First tab</a>
    <a href="#path" class="active">Active tab</a>
    <a href="#path">Third tab</a>
    <a href="#path" class="bf-tab-disabled" tabindex="-1">Disabled</a>
  </div>
</div>
<div class="bf-page-padding bfc-base-3-bg">bfc-base-3-bg</div>

First tab Active tab Third tab Disabled

bfc-base-3-bg

Badge in Tabs

You can include a badge inside tab labels. Add margin so the badge doesn't stick to the text.

<div class="bf-tabs-container">
  <div class="bf-tabs">
    <button class="bf-tab bf-tab-active">
      Inbox<span style="margin-left: 8px" class="bf-badge bfc-theme-fade-bg"
        >1</span
      >
    </button>
    <button class="bf-tab">
      Sent<span style="margin-left: 8px" class="bf-badge bfc-neutral-fade-bg"
        >10</span
      >
    </button>
  </div>
</div>
<div class="bf-page-padding">Tab content</div>

Tab content

Sandbox

<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css" /><link rel="stylesheet" href="styles.css" />

<div class="bf-tabs-container">
  <div class="bf-tabs">
    <button class="bf-tab">First tab</button>
    <button class="bf-tab bf-tab-active">Active tab</button>
    <button class="bf-tab">Third tab</button>
    <button class="bf-tab bf-tab-disabled" disabled>Disabled</button>
  </div>
</div>
<div class="bf-page-padding">Tab content</div>

Open Sandbox