@govbr-ds/core

<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/> <title>Abas</title>  <link rel="stylesheet" href="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/fonts/rawline/css/rawline.css"/>  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&display=swap"/>  <link rel="stylesheet" href="../../core.css"/>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"/> </head> <body> <div class="container-fluid"> <p class="h4 mt-5">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">Padrão 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">Padrão 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> <p class="h4 mt-5">Com Contadores</p> <div class="br-tab" data-counter="true"> <nav class="tab-nav"> <ul> <li class="tab-item is-active" title="Todos"> <button type="button" data-panel="panel-7-count"><span class="name">Todos</span></button><span class="results">(124)</span> </li> <li class="tab-item" title="Notícias"> <button type="button" data-panel="panel-8-count"><span class="name">Notícias</span></button><span class="results">(74)</span> </li> <li class="tab-item" title="Serviços"> <button type="button" data-panel="panel-9-count"><span class="name">Serviços</span></button><span class="results">(16)</span> </li> <li class="tab-item" title="Aplicativos"> <button type="button" data-panel="panel-10-count"><span class="name">Aplicativos</span></button><span class="results">(12)</span> </li> </ul> </nav> <div class="tab-content"> <div class="tab-panel active" id="panel-7-count"> <p>Painel Todos</p> </div> <div class="tab-panel" id="panel-8-count"> <p>Painel Notícias</p> </div> <div class="tab-panel" id="panel-9-count"> <p>Painel Serviços</p> </div> <div class="tab-panel" id="panel-10-count"> <p>Painel Aplicativos</p> </div> </div> </div> <p class="h4 mt-5">Com Icones</p> <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> <p class="h4 mt-5">Somente Icones</p> <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> <p class="h4 mt-5">Fundo Escuro</p> <div class="bg-gray-60 p-3"> <div class="br-tab dark-mode"> <nav class="tab-nav"> <ul> <li class="tab-item active" title="Sobre"> <button type="button" data-panel="panel-1-inverted"><span class="name">Sobre</span></button> </li> <li class="tab-item" title="Todos"> <button type="button" data-panel="panel-2-inverted"><span class="name">Todos</span></button> </li> <li class="tab-item" title="Notícias"> <button type="button" data-panel="panel-3-inverted"><span class="name">Notícias</span></button> </li> <li class="tab-item" title="Serviços"> <button type="button" data-panel="panel-4-inverted"><span class="name">Serviços</span></button> </li> <li class="tab-item" title="Aplicativos"> <button type="button" data-panel="panel-5-inverted"><span class="name">Aplicativos</span></button> </li> <li class="tab-item" title="Mídias"> <button type="button" data-panel="panel-6-inverted"><span class="name">Mídias</span></button> </li> </ul> </nav> <div class="tab-content"> <div class="tab-panel active" id="panel-1-inverted"> <p>Painel Sobre</p> </div> <div class="tab-panel" id="panel-2-inverted"> <p>Painel Todos</p> </div> <div class="tab-panel" id="panel-3-inverted"> <p>Painel Noticias</p> </div> <div class="tab-panel" id="panel-4-inverted"> <p>Painel Serviços</p> </div> <div class="tab-panel" id="panel-5-inverted"> <p>Painel Aplicativos</p> </div> <div class="tab-panel" id="panel-6-inverted"> <p>Painel Mídias</p> </div> </div> </div> </div> </div> <script src="../../core-init.js"></script> </body> </html>