Modo escuro

Divider

Utilize o Divider para segmentar visualmente diferentes seções ou elementos dentro de uma interface, promovendo uma organização clara e uma leitura mais fácil do conteúdo. Este componente é fundamental para manter a interface limpa e estruturada, ajudando os utilizadores a navegar e processar informações de forma eficiente.

Características Principais

Clareza Visual

Separa claramente diferentes grupos de conteúdo ou opções, evitando a confusão visual.

Organização do Layout

Ajuda na organização do espaço e na hierarquização da informação, facilitando o fluxo de leitura.

Flexibilidade de Design

Pode ser implementado de várias formas, como linhas horizontais, verticais ou até espaços sutis, dependendo das necessidades do design.

Exemplo de Utilização
  • Menus e listas para diferenciar itens ou categorias.
  • Formulários para separar diferentes seções de entrada de dados.
  • Layouts de página para delinear áreas de conteúdo distintas.

Incorpore Dividers sempre que precisar de uma solução visual simples e eficaz para organizar conteúdo e melhorar a legibilidade da interface.

Horizontal

Dark XL
Dark L
Dark M
Dark S 
                                            
<div class="gra-hr-horizontal-dark-xl"></div>

<div class="gra-hr-horizontal-dark-l"></div>

<div class="gra-hr-horizontal-dark-m"></div>

<div class="gra-hr-horizontal-dark-s"></div>
Light XL
Light L
Light M
Light S 
                                            
<div class="gra-hr-horizontal-light-xl"></div>

<div class="gra-hr-horizontal-light-l"></div>

<div class="gra-hr-horizontal-light-m"></div>

<div class="gra-hr-horizontal-light-s"></div>

Vertical

Dark XL
Dark L
Dark M
Dark S 
                                            
<div class="gra-hr-vertical-dark-xl" style="height: 200px;"></div>

<div class="gra-hr-vertical-dark-l" style="height: 200px;"></div>

<div class="gra-hr-vertical-dark-m" style="height: 200px;"></div>

<div class="gra-hr-vertical-dark-s" style="height: 200px;"></div>
Light XL
Light L
Light M
Light S 
                                            
<div class="gra-hr-vertical-light-xl" style="height: 200px;"></div>

<div class="gra-hr-vertical-light-l" style="height: 200px;"></div>

<div class="gra-hr-vertical-light-m" style="height: 200px;"></div>

<div class="gra-hr-vertical-light-s" style="height: 200px;"></div>