Component documentation

Basics

Components

Objects

Utilities

See a real exemple on our prototypes pages here.

Tabs

<nav class="c-tabs">
    <ul>
        <li>
            <a class="c-tabs__item" href="#" aria-selected="true">Item</a>
        </li>
        <li>
            <a class="c-tabs__item" href="#">Item</a>
        </li>
        <li>
            <a class="c-tabs__item" href="#">Item</a>
        </li>
    </ul>
</nav>

nav.c-tabs
    ul
        li
            a.c-tabs__item(href='#' aria-selected="true") Item
        li
            a.c-tabs__item(href='#') Item
        li
            a.c-tabs__item(href='#') Item

Tabs (with sections)

Item
Item
Item
Item
Item

a tab

another tab

a third tab

a fourth tab

a fifth tab

<nav class="c-tabs">
    <ul>
        <li>
            <a class="c-tabs__item" href="#section1">Item</a>
        </li>
        <li>
            <a class="c-tabs__item" href="#section2">Item</a>
        </li>
        <li>
            <a class="c-tabs__item" href="#section3">Item</a>
        </li>
        <li>
            <a class="c-tabs__item" href="#section4">Item</a>
        </li>
        <li>
            <a class="c-tabs__item" href="#section5">Item</a>
        </li>
    </ul>
    <div class="c-tabs__section" id="section1">
        <p>a tab</p>
    </div>
    <div class="c-tabs__section" id="section2">
        <p>another tab</p>
    </div>
    <div class="c-tabs__section" id="section3">
        <p>a third tab</p>
    </div>
    <div class="c-tabs__section" id="section4">
        <p>a fourth tab</p>
    </div>
    <div class="c-tabs__section" id="section5">
        <p>a fifth tab</p>
    </div>
</nav>

nav.c-tabs
    ul
        li
            a.c-tabs__item(href="#section1") Item
        li
            a.c-tabs__item(href="#section2") Item
        li
            a.c-tabs__item(href="#section3") Item
        li
            a.c-tabs__item(href="#section4") Item
        li
            a.c-tabs__item(href="#section5") Item

    .c-tabs__section#section1
        p a tab
    .c-tabs__section#section2
        p another tab
    .c-tabs__section#section3
        p a third tab
    .c-tabs__section#section4
        p a fourth tab
    .c-tabs__section#section5
        p a fifth tab

Tabs (border bottom)

<nav class="c-tabs c-tabs--border-bottom">
    <ul>
        <li>
            <a class="c-tabs__item" href="#" aria-selected="true">Item</a>
        </li>
        <li>
            <a class="c-tabs__item" href="#">Item</a>
        </li>
        <li>
            <a class="c-tabs__item" href="#">Item</a>
        </li>
    </ul>
</nav>

nav.c-tabs.c-tabs--border-bottom
    ul
        li
            a.c-tabs__item(href='#' aria-selected="true") Item
        li
            a.c-tabs__item(href='#') Item
        li
            a.c-tabs__item(href='#') Item