@govbr-ds/core/dist/components/tab/examples/tab-density.html

Padrão Digital de Governo

<p class="h4">Densidade alta</p>
<div class="br-tab small">
  <nav class="tab-nav">
    <ul>
      <li class="tab-item active" title="Sobre">
        <button type="button" data-panel="panel-1-small"><span class="name">Sobre</span></button>
      </li>
      <li class="tab-item" title="Todos">
        <button type="button" data-panel="panel-2-small"><span class="name">Todos</span></button>
      </li>
      <li class="tab-item" title="Notícias">
        <button type="button" data-panel="panel-3-small"><span class="name">Notícias</span></button>
      </li>
      <li class="tab-item" title="Serviços">
        <button type="button" data-panel="panel-4-small"><span class="name">Serviços</span></button>
      </li>
      <li class="tab-item" title="Aplicativos">
        <button type="button" data-panel="panel-5-small"><span class="name">Aplicativos</span></button>
      </li>
      <li class="tab-item" title="Mídias">
        <button type="button" data-panel="panel-6-small"><span class="name">Mídias</span></button>
      </li>
    </ul>
  </nav>
  <div class="tab-content">
    <div class="tab-panel active" id="panel-1-small">
      <p>Painel Sobre</p>
    </div>
    <div class="tab-panel" id="panel-2-small">
      <p>Painel Todos</p>
    </div>
    <div class="tab-panel" id="panel-3-small">
      <p>Painel Noticias</p>
    </div>
    <div class="tab-panel" id="panel-4-small">
      <p>Painel Serviços</p>
    </div>
    <div class="tab-panel" id="panel-5-small">
      <p>Painel Aplicativos</p>
    </div>
    <div class="tab-panel" id="panel-6-small">
      <p>Painel Mídias</p>
    </div>
  </div>
</div>
<p class="h4 mt-5">Densidade padrão</p>
<div class="br-tab">
  <nav class="tab-nav">
    <ul>
      <li class="tab-item active">
        <button type="button" data-panel="panel-1"><span class="name">Sobre</span></button>
      </li>
      <li class="tab-item">
        <button type="button" data-panel="panel-2"><span class="name">Todos</span></button>
      </li>
      <li class="tab-item">
        <button type="button" data-panel="panel-3"><span class="name">Notícias</span></button>
      </li>
      <li class="tab-item">
        <button type="button" data-panel="panel-4"><span class="name">Serviços</span></button>
      </li>
      <li class="tab-item">
        <button type="button" data-panel="panel-5"><span class="name">Aplicativos</span></button>
      </li>
      <li class="tab-item">
        <button type="button" data-panel="panel-6"><span class="name">Mídias</span></button>
      </li>
    </ul>
  </nav>
  <div class="tab-content">
    <div class="tab-panel active" id="panel-1">
      <p>Painel Sobre</p>
    </div>
    <div class="tab-panel" id="panel-2">
      <p>Painel Todos</p>
    </div>
    <div class="tab-panel" id="panel-3">
      <p>Painel Noticias</p>
    </div>
    <div class="tab-panel" id="panel-4">
      <p>Painel Serviços</p>
    </div>
    <div class="tab-panel" id="panel-5">
      <p>Painel Aplicativos</p>
    </div>
    <div class="tab-panel" id="panel-6">
      <p>Painel Mídias</p>
    </div>
  </div>
</div>
<p class="h4 mt-5">Densidade baixa</p>
<div class="br-tab large">
  <nav class="tab-nav">
    <ul>
      <li class="tab-item active" title="Sobre">
        <button type="button" data-panel="large-panel-1"><span class="name">Sobre</span></button>
      </li>
      <li class="tab-item" title="Todos">
        <button type="button" data-panel="large-panel-2"><span class="name">Todos</span></button>
      </li>
      <li class="tab-item" title="Notícias">
        <button type="button" data-panel="large-panel-3"><span class="name">Notícias</span></button>
      </li>
      <li class="tab-item" title="Serviços">
        <button type="button" data-panel="large-panel-4"><span class="name">Serviços</span></button>
      </li>
      <li class="tab-item" title="Aplicativos">
        <button type="button" data-panel="large-panel-5"><span class="name">Aplicativos</span></button>
      </li>
      <li class="tab-item" title="Mídias">
        <button type="button" data-panel="large-panel-6"><span class="name">Mídias</span></button>
      </li>
    </ul>
  </nav>
  <div class="tab-content">
    <div class="tab-panel active" id="large-panel-1">
      <p>Painel Sobre</p>
    </div>
    <div class="tab-panel" id="large-panel-2">
      <p>Painel Todos</p>
    </div>
    <div class="tab-panel" id="large-panel-3">
      <p>Painel Noticias</p>
    </div>
    <div class="tab-panel" id="large-panel-4">
      <p>Painel Serviços</p>
    </div>
    <div class="tab-panel" id="large-panel-5">
      <p>Painel Aplicativos</p>
    </div>
    <div class="tab-panel" id="large-panel-6">
      <p>Painel Mídias</p>
    </div>
  </div>
</div>