<header class="br-header small">
<div class="container-lg">
<div class="header-top">
<div class="header-logo"><img src="https://cdn.dsgovserprodesign.estaleiro.serpro.gov.br/design-system/images/logo-positive.png" alt="logo"/>
<div class="header-sign">Assinatura</div>
</div>
<div class="header-actions">
<div class="header-links dropdown">
<button class="br-button circle small" type="button" data-toggle="dropdown" aria-label="Abrir Acesso Rápido"><i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
<div class="br-list">
<div class="header">
<div class="title">Acesso Rápido</div>
</div><a class="br-item" href="javascript:void(0)">Link de acesso 1</a><a class="br-item" href="javascript:void(0)">Link de acesso 2</a><a class="br-item" href="javascript:void(0)">Link de acesso 3</a><a class="br-item" href="javascript:void(0)">Link de acesso 4</a>
</div>
</div><span class="br-divider vertical mx-half mx-sm-1"></span>
<div class="header-functions dropdown">
<button class="br-button circle small" type="button" data-toggle="dropdown" aria-label="Abrir Funcionalidades do Sistema"><i class="fas fa-th" aria-hidden="true"></i>
</button>
<div class="br-list">
<div class="header">
<div class="title">Funcionalidades do Sistema</div>
</div>
<div class="align-items-center br-item">
<button class="br-button circle small" type="button"><i class="fas fa-chart-bar" aria-hidden="true"></i><span class="text">Funcionalidade 1</span>
</button>
</div>
<div class="align-items-center br-item">
<button class="br-button circle small" type="button"><i class="fas fa-headset" aria-hidden="true"></i><span class="text">Funcionalidade 2</span>
</button>
</div>
<div class="align-items-center br-item">
<button class="br-button circle small" type="button"><i class="fas fa-comment" aria-hidden="true"></i><span class="text">Funcionalidade 3</span>
</button>
</div>
<div class="align-items-center br-item">
<button class="br-button circle small" type="button"><i class="fas fa-adjust" aria-hidden="true"></i><span class="text">Funcionalidade 4</span>
</button>
</div>
</div>
</div><span class="br-divider vertical mx-half mx-sm-1"></span>
<div class="header-search-trigger">
<button class="br-button circle small" type="button" aria-label="Abrir Busca" data-toggle="search" data-target=".header-search"><i class="fas fa-search" aria-hidden="true"></i>
</button>
</div>
<div class="header-login">
<div class="header-sign-in">
<button class="br-button sign-in small" type="button" data-trigger="login"><i class="fas fa-user" aria-hidden="true"></i><span class="d-sm-inline">Entrar</span>
</button>
</div>
<div class="header-avatar d-none">
<div class="avatar dropdown"><span class="br-avatar" title="Fulana da Silva"><span class="image"><img src="https://picsum.photos/id/823/400" alt="Avatar"/></span></span>
<button class="br-button circle small" type="button" aria-label="Abrir Menu de usuário" data-toggle="dropdown"><i class="fas fa-angle-down" aria-hidden="true"></i>
</button>
<div class="br-notification show">
<div class="notification-header">
<div class="row">
<div class="col-10"><span class="text-bold">Fulano da Silva</span><br/><small><a>nome.sobrenome@dominio.gov</a></small></div>
</div>
</div>
<div class="notification-body">
<div class="br-tab">
<nav class="tab-nav">
<ul>
<li class="tab-item">
<button type="button" data-panel="notif-item880" aria-label="notif-item880"><span class="name"><span class="icon"><i class="fas fa-image" aria-hidden="true"></i></span><span class="name">Item</span></span></button>
</li>
<li class="tab-item is-active">
<button type="button" data-panel="notif-item881" aria-label="notif-item881"><span class="name"><span class="icon"><i class="fas fa-image" aria-hidden="true"></i></span><span class="name">Item</span></span></button>
</li>
</ul>
</nav>
<div class="tab-content">
<div class="tab-panel" id="notif-item880">
<div class="br-list">
<button class="br-item" type="button"><i class="fas fa-heartbeat" aria-hidden="true"></i>Link de Acesso
</button><span class="br-divider"></span>
<button class="br-item" type="button"><i class="fas fa-heartbeat" aria-hidden="true"></i>Link de Acesso
</button><span class="br-divider"></span>
<button class="br-item" type="button"><i class="fas fa-heartbeat" aria-hidden="true"></i>Link de Acesso
</button>
</div>
</div>
<div class="tab-panel is-active" id="notif-item881">
<div class="br-list">
<button class="br-item" type="button"><span class="br-tag status small warning"></span><span class="text-bold">Título</span><span class="text-medium mb-2">25 de out</span><span>Nostrud consequat culpa ex mollit aute. Ex ex veniam ea labore laboris duis duis elit. Ex aute dolor enim aute Lorem dolor. Duis labore ad anim culpa. Non aliqua excepteur sunt eiusmod ex consectetur ex esse laborum velit ut aute.</span>
</button><span class="br-divider"></span>
<button class="br-item" type="button"><span class="text-bold">Título</span><span class="text-medium mb-2">24 de out</span><span>Labore nulla elit laborum nulla duis. Deserunt ad nulla commodo occaecat nulla proident ea proident aliquip dolore sunt nulla. Do sit eu consectetur quis culpa. Eiusmod minim irure sint nulla incididunt occaecat ipsum mollit in ut. Minim adipisicing veniam adipisicing velit nostrud duis consectetur aute nulla deserunt culpa aliquip.</span>
</button><span class="br-divider"></span>
<button class="br-item" type="button"><span class="br-tag status small warning"></span><span class="text-bold">Título</span><span class="text-medium mb-2">03 de out</span><span>Duis qui dolor dolor qui sint consectetur. Ipsum eu dolore ex anim reprehenderit laborum commodo. Labore do ut nulla eiusmod consectetur.</span>
</button><span class="br-divider"></span>
<button class="br-item" type="button"><span class="text-bold">Título</span><span class="text-medium mb-2">16 de mai</span><span>Sunt velit dolor enim mollit incididunt irure est. Ad ea Lorem culpa quis occaecat sunt in exercitation nisi. Sit laborum laborum dolor culpa ipsum velit. Non nulla nisi dolore et anim consequat officia deserunt amet qui. Incididunt exercitation irure labore ut Lorem culpa. Dolore ea irure pariatur ullamco culpa veniam amet dolor in fugiat pariatur ut. Sit non ut enim et incididunt tempor irure pariatur ex proident labore cillum dolore nisi.</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header-bottom">
<div class="header-menu">
<div class="header-menu-trigger">
<div class="br-menu">
<div class="menu-trigger">
<button class="br-button circle small" type="button" data-toggle="menu" aria-label="Abrir Menu Principal"><i class="fas fa-bars" aria-hidden="true"></i>
</button>
</div>
<div class="menu-container">
<div class="row">
<div class="col-sm-4 col-lg-3">
<div class="menu-panel">
<div class="menu-header">
<div class="menu-close">
<button class="br-button circle" type="button" arial-label="Fechar o menu" data-dismiss="menu"><i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
<div class="menu-title"><img src="https://cdn.dsgovserprodesign.estaleiro.serpro.gov.br/design-system/images/logo-positive.png" alt="Imagem ilustrativa"/></div>
</div>
<nav class="menu-body">
<div class="menu-folder"><a class="menu-item" href="javascript: void(0)"><span class="content">Agrupamento de menu 1</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Item de menu</span></a></li>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Item de menu</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Filho do item de menu 1</span></a></li>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Filho do item de menu 1</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Último nível de menu</span></a></li>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Último nível de menu</span></a></li>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Último nível de menu</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Filho do item de menu 1</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Item de menu</span></a></li>
</ul>
</div>
<div class="menu-folder"><a class="menu-item" href="javascript: void(0)"><span class="content">Agrupamento de menu 2</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Item de menu</span></a></li>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Item de menu</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Filho do item de menu 2</span></a></li>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Filho do item de menu 2</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Último nível de menu</span></a></li>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Último nível de menu</span></a></li>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Último nível de menu</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Filho do item de menu 2</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Item de menu</span></a></li>
</ul>
</div>
<div class="menu-folder"><a class="menu-item" href="javascript: void(0)"><span class="content">Agrupamento de menu 3</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Item de menu</span></a></li>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Item de menu</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Filho do item de menu 3</span></a></li>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Filho do item de menu 3</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Último nível de menu</span></a></li>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Último nível de menu</span></a></li>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Último nível de menu</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Filho do item de menu 3</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="content">Item de menu</span></a></li>
</ul>
</div>
</nav>
<div class="menu-footer">
<div class="menu-logos"><img src="https://cdn.dsgovserprodesign.estaleiro.serpro.gov.br/design-system/images/logo-positive.png" alt="Imagem ilustrativa"/><img src="https://cdn.dsgovserprodesign.estaleiro.serpro.gov.br/design-system/images/logo-positive.png" alt="Imagem ilustrativa"/></div>
<div class="menu-links"><a href="javascript: void(0)">Órgãos do Governo <i class="fas fa-external-link-square-alt" aria-hidden="true"></i></a><a href="javascript: void(0)">Legislação <i class="fas fa-external-link-square-alt" aria-hidden="true"></i></a></div>
<div class="menu-social">
<div class="text-semi-bold mb-1">Título</div>
<div class="sharegroup">
<div class="share"><a class="br-button circle" href="javascript: void(0)" aria-label="Compartilhar por Facebook"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></div>
<div class="share"><a class="br-button circle" href="javascript: void(0)" aria-label="Compartilhar por Twitter"><i class="fab fa-twitter" aria-hidden="true"></i></a></div>
<div class="share"><a class="br-button circle" href="javascript: void(0)" aria-label="Compartilhar por Linkedin"><i class="fab fa-linkedin-in" aria-hidden="true"></i></a></div>
<div class="share"><a class="br-button circle" href="javascript: void(0)" aria-label="Compartilhar por Whatsapp"><i class="fab fa-whatsapp" aria-hidden="true"></i></a></div>
</div>
</div>
<div class="menu-info">
<div class="text-center text-down-01">Todo o conteúdo deste site está publicado sob a licença <strong>Creative Commons Atribuição-SemDerivações 3.0</strong></div>
</div>
</div>
</div>
</div>
</div>
<div class="menu-scrim" data-dismiss="menu" tabindex="0"></div>
</div>
</div>
</div>
<div class="header-info">
<div class="header-title">Título do Header</div>
<div class="header-subtitle">Subtítulo do Header</div>
</div>
</div>
<div class="header-search">
<div class="br-input has-icon">
<label for="searchbox-9042">Texto da pesquisa</label>
<input class="has-icon" id="searchbox-9042" type="text" placeholder="O que você procura?"/>
<button class="br-button circle small" type="button" aria-label="Pesquisar"><i class="fas fa-search" aria-hidden="true"></i>
</button>
</div>
<button class="br-button circle search-close ml-1" type="button" aria-label="Fechar Busca" data-dismiss="search"><i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</header>