Tab

Options

Classe Elément Description
.tab <ul> Créer une navigation par onglet.
.tabJustify <ul> Créer une navigation par onglet avec les onglets justifiés.
data-color <ul> Définir la couleur du thème.
.active <li> Activer l'onglet affiché par défaut.
.tabContent <ul> Créer le contenu des onglets.

Exemples

Exemple 1

  • Tab 01
  • Tab 02
  • Tab 03

Content 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.

Content 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere.

Content 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere.

<ul class="tab" data-color="red">
    <li>Tab 01</li>
    <li>Tab 02</li>
    <li>Tab 03</li>
</ul>

<div class="tabContent">
    <div>
        <p>Content 1</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>
    </div>
    <div>
        <p>Content 2</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere.</p>
    </div>
    <div>
        <p>Content 3</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere.</p>
    </div>
</div>

Exemple 02

  • Card
  • Image
  • Texte

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.

<ul class="tabJustify" data-color="green">
    <li>Card</li>
    <li class="active">Image</li>
    <li>Texte</li>
</ul>
<div class="tabContent">
    <div>
        <div class="grid6 grid12M gutter">
            <div class="card shadow removePadding">
                <img src="https://framework.surikat.fr/0.2/web/images/wallpapers/01.jpg">
                <div class="paddingXXL">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.</p>
                </div>
            </div>
            <div class="card shadow removePadding">
                <img src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg">
                <div class="paddingXXL">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.</p>
                </div>
            </div>
        </div>
    </div>
    <div>
        <img src="https://framework.surikat.fr/0.2/web/images/wallpapers/01.jpg">
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>
    </div>
</div>