<h6 class="subtitle is-6 is-uppercase has-text-grey">Component</h6><h1 class="title is-serif is-1 has-text-weight-bold">Tabs</h1>
<p class="subtitle is-5">
    <span class="has-text-weight-semibold">Tabs</span> are used to quickly navigate between views within the same context.
</p>

<hr class="is-large is-visible">

<div class="box is-well is-marginless is-large">
    <div class="tabs">
        <ul class="is-borderless">
            <li><a>Pilot</a></li>
            <li class="is-active"><a>Care</a></li>
            <li><a>Plan</a></li>
            <li><a>Claim</a></li>
        </ul>
    </div>
</div>

    <div class="tabs">
        <ul>
            <li><a>Pilot</a></li>
            <li class="is-active"><a>Care</a></li>
            <li><a>Plan</a></li>
            <li><a>Claim</a></li>
        </ul>
    </div>
<hr class="is-visible is-large">

<h2 class="title is-4 is-family-sans-serif">Boxed Tabs</h2>

Give your Tabs a bolder look by using `is-boxed` in combinaision with a box component immediately after.

<br><br>

<div class="tabs is-boxed is-marginless">
    <ul>
        <li><a>Employer</a></li>
        <li class="is-active"><a>Insured</a></li>
        <li><a>Incapacity</a></li>
        <li><a>Certificates</a></li>
    </ul>
</div>
<div class="box is-white is-large has-text-grey-dark">
    Boxed content<br><i>Use Javascript for the tab switching behaviour.</i>
</div>

    <div class="tabs is-boxed is-marginless">
        <ul>
            <li><a>Employer</a></li>
            <li class="is-active"><a>Insured</a></li>
            <li><a>Incapacity</a></li>
            <li><a>Certificates</a></li>
        </ul>
    </div>
    <div class="box is-white">
        ...
    </div>
<hr>

<a href="http://bulma.io/documentation/components/tabs/" target="blank" class="box is-bordered">
    More options on &nbsp;→&nbsp; <strong class="has-text-primary">Bulma / Tabs</strong>
</a>
