UI Library

Pills

Toggle example guides Toggle HTML markup

Tab-like controls for use with icons inspired by macOS.

<insert-markup>pills-</insert-markup>
Markup 
<nav class="m-pill">
    <a href="#" class="m-pill__link is-active">
        Option 1
    </a>
    <a href="#" class="m-pill__link">
        Option 2
    </a>
    <a href="#" class="m-pill__link">
        Option 3
    </a>
    <a href="#" class="m-pill__link">
        Option 4
    </a>
</nav>
Source: static/css/src/_m-pills.scss, line 1