Utilize o componente Listagens para apresentar itens relacionados de forma organizada e estruturada, facilitando a leitura e a navegação. Este componente é essencial para mostrar conjuntos de dados ou itens de maneira clara e acessível, permitindo aos utilizadores encontrar e interagir com as informações de forma eficiente.
Apresenta itens em uma lista vertical ou horizontal, mantendo a interface limpa e fácil de navegar.
Pode incluir textos, imagens, links, ícones e outras informações relevantes para cada item da lista.
Pode suportar ações diretas, como cliques para mais detalhes, edição, exclusão ou outras interações específicas.
Incorpore o componente Listagens sempre que precisar apresentar grupos de itens relacionados de forma organizada e intuitiva, melhorando a clareza e a usabilidade da interface para os utilizadores.
Lorem ipsum dolor sit consectetur. Ut fringilla arcu fames nibh facilisis vulputate. Eget vel sed lacus est laoreet sed id. Sed turpis velip feugiat.
Lorem ipsum dolor sit consectetur. Ut fringilla arcu fames nibh facilisis vulputate. Eget vel sed lacus est laoreet sed id. Sed turpis velip feugiat. Lorem ipsum dolor sit consectetur. Ut fringilla arcu fames nibh facilisis vulputate. Eget vel sed lacus est laoreet sed id. Sed turpis velip feugiat. Lorem ipsum dolor sit consectetur. Ut fringilla arcu fames nibh facilisis vulputate. Eget vel sed lacus est laoreet sed id. Sed turpis velip feugiat. Lorem ipsum dolor sit consectetur. Ut fringilla arcu fames nibh facilisis vulputate. Eget vel sed lacus est laoreet sed id. Sed turpis velip feugiat.Lorem ipsum dolor sit consectetur. Ut fringilla arcu fames nibh facilisis vulputate. Eget vel sed lacus est laoreet sed id. Sed turpis velip feugiat.Lorem ipsum dolor sit consectetur. Ut fringilla arcu fames nibh facilisis vulputate. Eget vel sed lacus est laoreet sed id. Sed turpis velip feugiat.
<div class="gra-list gra-margin-bottom-l">
<div class="headerList">
<div class="title">Lorem ipsum sit dolor amet 1</div>
<div class="status">
<div class="gra-status secondary dangerIcon">
<span class="icon"></span>
<span>Perigo</span>
</div>
<div class="gra-status secondary infoIcon">
<span class="icon"></span>
<span>Informação</span>
</div>
</div>
</div>
<div class="bodyList">
<p>Lorem ipsum dolor sit consectetur. Ut fringilla arcu fames nibh facilisis vulputate. Eget vel sed lacus est laoreet sed id. Sed turpis velip feugiat.</p>
</div>
</div>
<div class="gra-list gra-margin-bottom-l">
<div class="headerList">
<div class="title">Lorem ipsum sit dolor amet 2</div>
<div class="status">
<div class="gra-status secondary dangerIcon">
<span class="icon"></span>
<span>Perigo</span>
</div>
<div class="gra-status secondary infoIcon">
<span class="icon"></span>
<span>Informação</span>
</div>
</div>
</div>
<div class="bodyList">
<p>Lorem ipsum dolor sit consectetur. Ut fringilla arcu fames nibh facilisis vulputate. Eget vel sed lacus est laoreet sed id. Sed turpis velip feugiat.
Lorem ipsum dolor sit consectetur. Ut fringilla arcu fames nibh facilisis vulputate. Eget vel sed lacus est laoreet sed id. Sed turpis velip feugiat.
Lorem ipsum dolor sit consectetur. Ut fringilla arcu fames nibh facilisis vulputate. Eget vel sed lacus est laoreet sed id. Sed turpis velip feugiat.
Lorem ipsum dolor sit consectetur. Ut fringilla arcu fames nibh facilisis vulputate. Eget vel sed lacus est laoreet sed id. Sed turpis velip feugiat.Lorem ipsum dolor sit consectetur. Ut fringilla arcu fames nibh facilisis vulputate. Eget vel sed lacus est laoreet sed id. Sed turpis velip feugiat.Lorem ipsum dolor sit consectetur. Ut fringilla arcu fames nibh facilisis vulputate. Eget vel sed lacus est laoreet sed id. Sed turpis velip feugiat.</p>
</div>
</div>