@govbr-ds/core
Version:
Padrão Digital de Governo
45 lines (44 loc) • 2.52 kB
HTML
<div class="br-tab">
<nav class="tab-nav">
<ul>
<li class="tab-item active">
<button type="button" data-panel="panel-1-icon"><span class="name"><span class="d-flex flex-column flex-sm-row"><span class="icon mb-1 mb-sm-0 mr-sm-1"><i class="fas fa-image" aria-hidden="true"></i></span><span class="name">ITEM</span></span></span></button>
</li>
<li class="tab-item">
<button type="button" data-panel="panel-2-icon"><span class="name"><span class="d-flex flex-column flex-sm-row"><span class="icon mb-1 mb-sm-0 mr-sm-1"><i class="fas fa-image" aria-hidden="true"></i></span><span class="name">TODOS</span></span></span></button>
</li>
<li class="tab-item">
<button type="button" data-panel="panel-3-icon"><span class="name"><span class="d-flex flex-column flex-sm-row"><span class="icon mb-1 mb-sm-0 mr-sm-1"><i class="fas fa-image" aria-hidden="true"></i></span><span class="name">Notícias</span></span></span></button>
</li>
<li class="tab-item">
<button type="button" data-panel="panel-4-icon"><span class="name"><span class="d-flex flex-column flex-sm-row"><span class="icon mb-1 mb-sm-0 mr-sm-1"><i class="fas fa-image" aria-hidden="true"></i></span><span class="name">Serviços</span></span></span></button>
</li>
<li class="tab-item">
<button type="button" data-panel="panel-5-icon"><span class="name"><span class="d-flex flex-column flex-sm-row"><span class="icon mb-1 mb-sm-0 mr-sm-1"><i class="fas fa-image" aria-hidden="true"></i></span><span class="name">APLICATIVOS</span></span></span></button>
</li>
<li class="tab-item">
<button type="button" data-panel="panel-6-icon"><span class="name"><span class="d-flex flex-column flex-sm-row"><span class="icon mb-1 mb-sm-0 mr-sm-1"><i class="fas fa-image fa-1x" aria-hidden="true"></i></span><span class="name">Mídias</span></span></span></button>
</li>
</ul>
</nav>
<div class="tab-content">
<div class="tab-panel active" id="panel-1-icon">
<p>Painel Sobre</p>
</div>
<div class="tab-panel" id="panel-2-icon">
<p>Painel Todos</p>
</div>
<div class="tab-panel" id="panel-3-icon">
<p>Painel Noticias</p>
</div>
<div class="tab-panel" id="panel-4-icon">
<p>Painel Serviços</p>
</div>
<div class="tab-panel" id="panel-5-icon">
<p>Painel Aplicativos</p>
</div>
<div class="tab-panel" id="panel-6-icon">
<p>Painel Mídias</p>
</div>
</div>
</div>