Some features from this component may require sgds.js

Tabs are navigation elements that let users easily access different areas of a site or different parts of an individual page. Think tabbed dividers in a filing cabinet – by clicking a tab, users can easily locate a page containing related content

Tab 1 Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eos fugiat in incidunt mollitia quam qui totam vel veritatis vero.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eos fugiat in incidunt mollitia quam qui totam vel veritatis vero.
Tab 2 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti deserunt enim illo impedit libero, temporibus veritatis. Deserunt, fugit quasi! Voluptates!

Tab 3 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid aspernatur beatae, dolores ea eum illo quasi reprehenderit sequi vero?


Code Snippets for Tabs
<div class="sgds-tabs">
    <ul class="no-margin" role="tablist">
        <li class="is-active">
            <a data-tab="#tab1" role="tab" aria-selected="true" aria-controls="tab1">
                <i class="sgds-icon sgds-icon-place padding--right--sm"></i>
                Tab 1
            </a>
        </li>
        <li>
            <a data-tab="#tab2" role="tab" aria-selected="false" aria-controls="tab2">
                <i class="sgds-icon sgds-icon-boat padding--right--sm"></i>Tab 2
            </a>
        </li>
        <li>
            <a data-tab="#tab3" role="tab" aria-selected="false" aria-controls="tab3">
                <i class="sgds-icon sgds-icon-map padding--right--sm"></i>Tab 3
            </a>
        </li>
    </ul>
</div>

Code Snippets for Tab Content
<div class="row" id="tab1">
    <div class="col">
        <p>Tab content 1</p>
    </div>
</div>
<div class="row" id="tab2">
    <div class="col">
        <p>Tab content 2</p>
    </div>
</div>
<div class="row" id="tab3">
    <div class="col">
        <p>Tab content 3</p>
    </div>
</div>

Guidelines

Tab should:

  • Be clearly labeled to differentiate the sections beneath them
  • Have short labels, kept to single words if possible
  • Have only one being active at a time
  • Not be used for primary navigation

Styles
Modifier Description
is-boxed Use when you want a border
is-toggle Use when you want to have toggle buttons
is-centered Use when you want position your toggle buttons at the center
is-small
is-medium
is-large
Use when you want to change the size of your tabs

Examples
Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team