Dealogic Styleguide

section menu

Tabs

Tabs keeps related content in a single container that is shown and hidden through navigation. Please note that the interactivity for a tab-component is not provided by this toolkit.

To use these styles with react-tabs, add the dl-tab class to the <Tabs> component.

Examples

  • Label
  • Label
  • Label
  • Label 12
  • Label
  • Another tab
  • Label 12
  • Label
  • Another tab
  • Label 12
  • Tab nº 4
<div class="dl-tab">
    <ul class="tablist">
        <li class="selected">Label</li>
        <li>Label</li>
    </ul>
</div>

<div class="dl-tab">
    <ul class="tablist">
        <li class="selected">Label</li>
        <li>
            Label
            <span class="dl-badge count">12</span>
        </li>
    </ul>
</div>

<div class="dl-tab">
    <ul class="tablist">
        <li class="selected">Label</li>
        <li>Another tab</li>
        <li>
            Label
            <span class="dl-badge count">12</span>
        </li>
    </ul>
</div>

<div class="dl-tab">
    <ul class="tablist">
        <li>Label</li>
        <li>Another tab</li>
        <li class="selected">
            Label
            <span class="dl-badge count">12</span>
        </li>
        <li>Tab nº 4</li>
    </ul>
</div>