@govbr-ds/core
Version:
Padrão Digital de Governo
76 lines • 5.47 kB
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>Notification</title>
<!-- Fonte Rawline-->
<link rel="stylesheet" href="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/fonts/rawline/css/rawline.css"/>
<!-- Fonte Raleway-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&display=swap"/>
<!-- Design System de Governo-->
<link rel="stylesheet" href="../../core.css"/>
<!-- Fontawesome-->
<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">
<div class="container-lg">
<p class="h4 mt-5">Notification</p>
<div class="br-notification">
<div class="notification-header">
<div class="row">
<div class="col-10"><span class="text-bold">Fulano da Silva</span><br/><small>nome.sobrenome@dominio.gov</small></div>
<div class="col-2">
<div class="close text-right">
<button class="br-button circle small" type="button" aria-label="Fechar"><i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
<div class="notification-body">
<div class="br-tab">
<nav class="tab-nav">
<ul>
<li class="tab-item notification-tooltip">
<button type="button" aria-label="Alertas" data-panel="notification-panel-1-65122" data-tooltip-text="Alertas"><span class="name"><i class="fas fa-bell" aria-hidden="true"></i></span></button>
</li>
<li class="tab-item notification-tooltip active">
<button type="button" aria-label="Mensagens" data-panel="notification-panel-2-65122" data-tooltip-text="Mensagens"><span class="name"><i class="fas fa-envelope" aria-hidden="true"></i></span></button>
</li>
</ul>
</nav>
<div class="tab-content">
<div class="tab-panel" id="notification-panel-1-65122">
<div class="br-list">
<button class="br-item" type="button"><i class="fas fa-heartbeat mr-2" aria-hidden="true"></i>Link de Acesso
</button>
<button class="br-item" type="button"><i class="fas fa-heartbeat mr-2" aria-hidden="true"></i>Link de Acesso
</button>
<button class="br-item" type="button"><i class="fas fa-heartbeat mr-2" aria-hidden="true"></i>Link de Acesso
</button>
</div>
</div>
<div class="tab-panel active" id="notification-panel-2-65122">
<div class="br-list">
<button class="br-item" type="button" role="contentinfo" aria-label="Especificar aqui a mensagem de alerta a ser informado pelo leitor de tela"><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>
<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>
<button class="br-item" type="button" role="contentinfo" aria-label="Escrever aqui a mensagem de alerta que será informada pelo leitor de tela"><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>
<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>
<script src="../../core-init.js"></script>
</body>
</html>