Utilize o componente Notificações para exibir alertas, mensagens e atualizações importantes de forma organizada e acessível. Este componente é ideal para manter os utilizadores informados sobre eventos ou mudanças relevantes sem interromper sua experiência de navegação.
Permite que os utilizadores visualizem notificações importantes sem sair da página atual.
Agrupa notificações em uma área dedicada, facilitando a visualização e o gerenciamento de mensagens.
Pode incluir ações rápidas, como marcar como lida, eliminar ou detalhes adicionais da notificação.
Incorpore o componente Barra Lateral de Notificações sempre que precisar fornecer atualizações em tempo real ou mensagens importantes aos utilizadores, melhorando a comunicação e a experiência de navegação na sua interface.
<div class="gra-notification gra-margin-bottom-l">
<div class="titleNotif">Lorem ipsum</div>
<div class="description">
Lorem ipsum dolor sit amet consectetur. Adipiscing leo sit magna consectetur. Accumsan enim mi vitae orci purus risus...
</div>
<div class="dateTime">
<div class="date">dd/mm/aaaa</div>
<div class="time">hh:mm</div>
</div>
</div>
<div class="gra-notification new gra-margin-bottom-xs">
<div class="titleNotif">
<div class="gra-status secondary dangerIcon">
<span class="icon"></span>
</div>
Lorem ipsum
</div>
<div class="description">
Lorem ipsum dolor sit amet consectetur. Adipiscing leo sit magna consectetur. Accumsan enim mi vitae orci purus risus...
</div>
<div class="dateTime">
<div class="date">dd/mm/aaaa</div>
<div class="time">hh:mm</div>
</div>
</div>
Clique aqui para verificar uma simulação de como as notificações funcionam.
<div class="gra-notifications-box">
<div class="maskNotif"></div>
<div class="gra-notification-container">
<div class="header">
<div class="title">Notificações</div>
<div class="optionsClose">
<div class="moreOptions gra-link" title="Ver mais opções">
<i class="icon-more"></i>
<div class="moreOptionsBox">
<div class="option markRead"><i class="icon-message"></i>Marcar todas como lidas</div>
<div class="option deleteAll"><i class="icon-trash"></i>Eliminar todas</div>
</div>
</div>
<div class="close gra-link" title="Fechar"><i class="icon-times"></i></div>
</div>
</div>
<div class="gra-notification new">
<div class="titleNotif">
<div class="gra-status secondary dangerIcon">
<span class="icon"></span>
</div>
Lorem ipsum
</div>
<div class="description">
Lorem ipsum dolor sit amet consectetur. Adipiscing leo sit magna consectetur. Accumsan enim mi vitae orci purus risus...
</div>
<div class="dateTime">
<div class="date">dd/mm/aaaa</div>
<div class="time">hh:mm</div>
</div>
</div>
<div class="gra-notification">
<div class="titleNotif">Lorem ipsum</div>
<div class="description">
Lorem ipsum dolor sit amet consectetur. Adipiscing leo sit magna consectetur. Accumsan enim mi vitae orci purus risus...
</div>
<div class="dateTime">
<div class="date">dd/mm/aaaa</div>
<div class="time">hh:mm</div>
</div>
</div>
<div class="gra-notification new">
<div class="titleNotif">
<div class="gra-status secondary dangerIcon">
<span class="icon"></span>
</div>
Lorem ipsum
</div>
<div class="description">
Lorem ipsum dolor sit amet consectetur. Adipiscing leo sit magna consectetur. Accumsan enim mi vitae orci purus risus...
</div>
<div class="dateTime">
<div class="date">dd/mm/aaaa</div>
<div class="time">hh:mm</div>
</div>
</div>
<div class="gra-notification">
<div class="titleNotif">Lorem ipsum</div>
<div class="description">
Lorem ipsum dolor sit amet consectetur. Adipiscing leo sit magna consectetur. Accumsan enim mi vitae orci purus risus...
</div>
<div class="dateTime">
<div class="date">dd/mm/aaaa</div>
<div class="time">hh:mm</div>
</div>
</div>
</div>
</div>
<div class="gra-notifications-box readOne">
<div class="header">
<div class="title">
<span class="gra-link" title="Voltar às notificações">
<i class="goBack icon-arrow-left"></i>
</span>
Detalhe da notificação
</div>
<div class="optionsClose">
<div class="close gra-link" title="Fechar"><i class="icon-close"></i></div>
</div>
</div>
<div class="gra-notification">
<div class="titleNotif">Lorem ipsum</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="dateTime">
<div class="date">dd/mm/aaaa</div>
<div class="time">hh:mm</div>
</div>
</div>
</div>