BAGS — Design System

Pills 

<ul class="nav nav-pills" role="tablist">

    <li class="nav-item">
        <a href="#VSECHNY" class="nav-link active" id="VSECHNY-tab" data-toggle="tab" role="tab" aria-controls="VSECHNY" aria-selected="true">VŠECHNY</a>
    </li>

    <li class="nav-item">
        <a href="#A" class="nav-link" id="A-tab" data-toggle="tab" href="#A" role="tab" aria-controls="A" aria-selected="false">A</a>
    </li>

    <li class="nav-item">
        <a href="#B" class="nav-link" id="B-tab" data-toggle="tab" href="#B" role="tab" aria-controls="B" aria-selected="false">B</a>
    </li>

    <li class="nav-item">
        <a href="#C" class="nav-link" id="C-tab" data-toggle="tab" href="#C" role="tab" aria-controls="C" aria-selected="false">C</a>
    </li>

    <li class="nav-item">
        <a href="#D" class="nav-link" id="D-tab" data-toggle="tab" href="#D" role="tab" aria-controls="D" aria-selected="false">D</a>
    </li>

    <li class="nav-item">
        <a href="#E" class="nav-link" id="E-tab" data-toggle="tab" href="#E" role="tab" aria-controls="E" aria-selected="false">E</a>
    </li>

    <li class="nav-item">
        <a href="#F" class="nav-link" id="F-tab" data-toggle="tab" href="#F" role="tab" aria-controls="F" aria-selected="false">F</a>
    </li>

    <li class="nav-item">
        <a href="#G" class="nav-link" id="G-tab" data-toggle="tab" href="#G" role="tab" aria-controls="G" aria-selected="false">G</a>
    </li>

    <li class="nav-item">
        <a href="#H" class="nav-link" id="H-tab" data-toggle="tab" href="#H" role="tab" aria-controls="H" aria-selected="false">H</a>
    </li>

    <li class="nav-item">
        <a href="#I" class="nav-link" id="I-tab" data-toggle="tab" href="#I" role="tab" aria-controls="I" aria-selected="false">I</a>
    </li>

    <li class="nav-item">
        <a href="#J" class="nav-link" id="J-tab" data-toggle="tab" href="#J" role="tab" aria-controls="J" aria-selected="false">J</a>
    </li>

</ul>
 
<ul class="nav nav-pills" role="tablist">
    {# <li class="nav-item">
        <a href="#VSECHNY" class="nav-link active" id="vsechny-tab" data-toggle="tab" href="#VSECHNY" role="tab" aria-controls="vsechny" aria-selected="true">Všechny</a>
    </li> #}
    <li class="nav-item">
        <a href="#{{ active_link }}" class="nav-link active" id="{{ active_link }}-tab" data-toggle="tab" role="tab" aria-controls="{{ active_link }}" aria-selected="true">{{ active_text }}</a>
    </li>
    {% for pill in items %}
        <li class="nav-item">
            <a href="#{{ pill.link }}" class="nav-link" id="{{ pill.link }}-tab" data-toggle="tab" href="#{{ pill.link }}" role="tab" aria-controls="{{ pill.link }}" aria-selected="false">{{ pill.text }}</a>
        </li>
    {% endfor %}
</ul>
 
{
  "active_link": "VSECHNY",
  "active_text": "VŠECHNY",
  "items": [
    {
      "link": "A",
      "text": "A"
    },
    {
      "link": "B",
      "text": "B"
    },
    {
      "link": "C",
      "text": "C"
    },
    {
      "link": "D",
      "text": "D"
    },
    {
      "link": "E",
      "text": "E"
    },
    {
      "link": "F",
      "text": "F"
    },
    {
      "link": "G",
      "text": "G"
    },
    {
      "link": "H",
      "text": "H"
    },
    {
      "link": "I",
      "text": "I"
    },
    {
      "link": "J",
      "text": "J"
    }
  ]
}

No notes defined.