Tickster Styleguide

Appearance

v2.34.1

Tabs ​

When to use it ​

The Tabs component is used to create tabbed navigation interfaces. It supports both ordered and unordered lists of links or just a series of link elements with a wrapper element.

Variants ​

  • Filled: Use the .c-tabs__tab--filled modifier to create tabs with a filled background.
  • Rounded: Use the .c-tabs--rounded and .c-tabs__tab--rounded modifiers to create tabs with a filled background.
  • Large Tabs: Use the .c-tabs__tab--large modifier to increase the font size of the tabs.
  • Selected color: Set --selected-color when you want to override the selected tab accent. It drives the underline on default tabs and the selected background on rounded tabs.

What it looks like ​

Code examples ​

html
<div class="c-tabs">
    <a href="#tab1" class="c-tabs__tab">Not selected</a>
    <a href="#tab2" class="c-tabs__tab c-tabs__tab--selected">Selected</a>
    <a href="#tab3" class="c-tabs__tab">Not selected</a>
    <a href="#tab4" class="c-tabs__tab">Not selected</a>
</div>
html
<div class="o-grid">
    <div class="o-grid__col-12">
        <div class="c-tabs" data-tabs>
            <a href="#tab1" class="c-tabs__tab c-tabs__tab--selected">Tab 1</a>
            <a href="#tab2" class="c-tabs__tab">Tab 2</a>
            <a href="#tab3" class="c-tabs__tab">Tab 3</a>
        </div>
    </div>
    <div class="o-grid__col-12" id="tab1">
        <p class="c-box"><strong>Tab panel one.</strong></p>
    </div>
    <div class="o-grid__col-12" id="tab2">
        <p class="c-box"><strong>Tab panel two.</strong></p>
    </div>
    <div class="o-grid__col-12" id="tab3">
        <p class="c-box"><strong>Tab panel three.</strong></p>
    </div>
</div>
html
<div class="c-tabs">
    <a href="#tab1" class="c-tabs__tab c-tabs__tab--filled">Not selected</a>
    <a href="#tab2" class="c-tabs__tab c-tabs__tab--filled c-tabs__tab--selected">Selected</a>
    <a href="#tab3" class="c-tabs__tab c-tabs__tab--filled">Not selected</a>
    <a href="#tab4" class="c-tabs__tab c-tabs__tab--filled">Not selected</a>
</div>
html
<nav class="c-tabs c-tabs--rounded">
    <a href="#" class="c-tabs__tab c-tabs__tab--rounded">Not selected</a>
    <a href="#" class="c-tabs__tab c-tabs__tab--rounded c-tabs__tab--selected">Selected</a>
    <a href="#" class="c-tabs__tab c-tabs__tab--rounded">Not selected</a>
    <a href="#" class="c-tabs__tab c-tabs__tab--rounded">Not selected</a>
</nav>
html
<ul class="c-tabs c-tabs--rounded">
    <li><a href="#tab4" class="c-tabs__tab c-tabs__tab--rounded c-tabs__tab--selected">Selected <span class="c-pill"><span>5</span></span></a></li>
    <li><a href="#tab5" class="c-tabs__tab c-tabs__tab--rounded">Not selected <span class="c-pill"><span>2</span></span></a></li>
    <li><a href="#" class="c-tabs__tab c-tabs__tab--rounded">Not selected</a></li>
    <li><a href="#" class="c-tabs__tab c-tabs__tab--rounded">Not selected</a></li>
    <li><a href="#" class="c-tabs__tab c-tabs__tab--rounded">Not selected</a></li>
    <li><a href="#" class="c-tabs__tab c-tabs__tab--rounded">Not selected</a></li>
    <li><a href="#" class="c-tabs__tab c-tabs__tab--rounded">Not selected</a></li>
    <li><a href="#" class="c-tabs__tab c-tabs__tab--rounded">Not selected</a></li>
    <li><a href="#" class="c-tabs__tab c-tabs__tab--rounded">Not selected</a></li>
    <li><a href="#" class="c-tabs__tab c-tabs__tab--rounded">Not selected</a></li>
    <li><a href="#" class="c-tabs__tab c-tabs__tab--rounded">Not selected</a></li>
    <li><a href="#" class="c-tabs__tab c-tabs__tab--rounded">Not selected</a></li>
    <li><a href="#" class="c-tabs__tab c-tabs__tab--rounded">Not selected</a></li>
    <li><a href="#" class="c-tabs__tab c-tabs__tab--rounded">Not selected</a></li>
</ul>

Accessibility notes ​

If the data-tabs attribute is present and the tabs’ href attributes lead to existing ids on the same page, the accessible tabs functionality is created automatically to show/hide them (see components.tabs.js). If you're making your own JS implementation of the same feature, try to follow these guidelines:

  1. Keyboard Navigation: Users should be able to navigate through tabs using the keyboard. Use tabindex to manage focus.
  2. ARIA Roles: Use appropriate ARIA roles such as role="tablist", role="tab", and role="tabpanel".
  3. ARIA Attributes: Use aria-selected and aria-labelledby to link tabs with their corresponding panels.
  4. Focus Management: Ensure that the active tab is focusable and that focus is managed correctly when tabs are switched.