@govbr-ds/core
Version:
Padrão Digital de Governo
47 lines (46 loc) • 2.25 kB
HTML
<div class="mt-5">
<div class="br-tab">
<nav class="tab-nav">
<ul>
<li class="tab-item active">
<button type="button" aria-label="Exemplo de tab com ícone" data-panel="panel-1-icons" data-tooltip-text="sobre"><span class="name"><i class="fas fa-image" aria-hidden="true"></i></span></button>
</li>
<li class="tab-item">
<button type="button" aria-label="Exemplo de tab com ícone" data-panel="panel-2-icons" data-tooltip-text="Todos"><span class="name"><i class="fas fa-image" aria-hidden="true"></i></span></button>
</li>
<li class="tab-item">
<button type="button" aria-label="Exemplo de tab com ícone" data-panel="panel-3-icons" data-tooltip-text="Notícias"><span class="name"><i class="fas fa-image" aria-hidden="true"></i></span></button>
</li>
<li class="tab-item">
<button type="button" aria-label="Exemplo de tab com ícone" data-panel="panel-4-icons" data-tooltip-text="Serviços"><span class="name"><i class="fas fa-image" aria-hidden="true"></i></span></button>
</li>
<li class="tab-item">
<button type="button" aria-label="Exemplo de tab com ícone" data-panel="panel-5-icons" data-tooltip-text="Aplicativos"><span class="name"><i class="fas fa-image" aria-hidden="true"></i></span></button>
</li>
<li class="tab-item">
<button type="button" aria-label="Exemplo de tab com ícone" data-panel="panel-6-icons" data-tooltip-text="Mídias"><span class="name"><i class="fas fa-image" aria-hidden="true"></i></span></button>
</li>
</ul>
</nav>
<div class="tab-content">
<div class="tab-panel active" id="panel-1-icons">
<p>Painel Sobre</p>
</div>
<div class="tab-panel" id="panel-2-icons">
<p>Painel Todos</p>
</div>
<div class="tab-panel" id="panel-3-icons">
<p>Painel Noticias</p>
</div>
<div class="tab-panel" id="panel-4-icons">
<p>Painel Serviços</p>
</div>
<div class="tab-panel" id="panel-5-icons">
<p>Painel Aplicativos</p>
</div>
<div class="tab-panel" id="panel-6-icons">
<p>Painel Mídias</p>
</div>
</div>
</div>
</div>