C21 · Componentes

Separator

Linha fina (hairline) que divide seções ou itens. 1px na cor --border. Sempre estrutural — separador decorativo é ruído.

Variantes

Tipo	Aplicação
Horizontal	Entre seções de página, itens de lista.
Vertical	Entre colunas em listas inline (breadcrumb, footer).
Espesso	`--n-mist` 1px para separação principal entre capítulos.

Implementação

/* Horizontal */
.divider { height: 1px; background: var(--border); margin: var(--sp-7) 0; }

/* Vertical inline */
.list-inline li + li::before { content: '·'; color: var(--n-stone); margin: 0 var(--sp-2); }

Acessibilidade

Use <hr> para separações semânticas (entre tópicos). Para separadores puramente visuais (entre tags de uma lista inline), use <span aria-hidden='true'>.

<hr> aceita role='separator' implícito.
Em listas inline, separadores decorativos com aria-hidden='true'.
Espessura 1px sempre — 'mais grosso' não comunica mais.