Hairline

Quando usar

Separar itens em listagem, linhas de tabela, seções de uma mesma página, topo de bloco relacionado. Hairline existe quando o conteúdo precisa respirar sem que o limite seja visível como elemento.

Quando não usar

• Para criar hierarquia forte — use espaçamento (--space-*), não espessura. Mais separação = mais padding, nunca linha mais grossa.
• Para contornar card — use --shadow-raised + --border-raised-*, não hairline.

Anatomia

Uma linha de 1 px na cor --color-surface-divider. Fim. O componente mais simples do sistema — declarado em uma linha de CSS.

Variantes

Não há. Uma espessura. Uma cor. O componente tem dois contextos de uso — como border-bottom em listagem, ou como <hr> separador de seção — mas em ambos a regra é idêntica.

• Condomínio maioVencimento 10/mai
  R$ 480,00
• InternetVencimento 15/mai
  R$ 99,90
• AcademiaDébito automático 5/mai
  R$ 120,00
• NetflixCartão de crédito
  R$ 55,90

Estados

default. Não há outros. A hairline não é interativa e não muda de aparência com hover, focus ou qualquer estado de sistema.

Tokens aplicáveis

Conteúdo

Não aplicável. A hairline não tem conteúdo de texto.

Acessibilidade

• role="separator" quando separa grupos semânticos (ex.: duas seções de conteúdo). O elemento <hr> já carrega esse role por padrão.
• aria-hidden="true" quando a separação é puramente visual ao lado de elementos com hierarquia própria (ex.: border-bottom entre items de lista já descritos por role="listitem").

Do / Don't

Componentes relacionados

• Card Grid — hairline separa linhas em listagens dentro de grid.
• Card — hairline divide seções dentro do body de um card.
• Tabelas e listagens de lançamentos — uso canônico como border-bottom entre items.

Markup de referência

HTML copiável — semente da story de componente. CSS aplicável: componente-hairline.css.

<!-- Como separador de seção: <hr> --> <hr className="peppe-hairline" role="separator" aria-label="Separador entre saldo e previsão"> <!-- Como border-bottom em listagem --> <ul className="peppe-hairline-list-demo" role="list"> <li className="peppe-hairline-list-demo__item"> <div> <span className="peppe-hairline-list-demo__label">Condomínio maio</span> <span className="peppe-hairline-list-demo__sub">Vencimento 10/mai</span> </div> <span className="peppe-hairline-list-demo__value">R$ 480,00</span> </li> <!-- Hairline aplicada como border-bottom no item --> <!-- exceto no :last-child (sem border-bottom) --> <li className="peppe-hairline-list-demo__item"> <div> <span className="peppe-hairline-list-demo__label">Internet</span> <span className="peppe-hairline-list-demo__sub">Vencimento 15/mai</span> </div> <span className="peppe-hairline-list-demo__value">R$ 99,90</span> </li> </ul> /* ── CSS relevante (componente-hairline.css) ─────────── */ /* O componente em si: 1 px, cor divider, margin 0 */ .peppe-hairline {border: none; border-bottom: 1px solid var(--color-surface-divider); margin: 0;}/* Como <hr> separador de seção: margin vertical 24 */ hr.peppe-hairline {margin: var(--space-24) 0;}/* Item de listagem com hairline */ .peppe-hairline-list-demo__item {display: flex; align-items: center; justify-content: space-between; padding: var(--space-16) var(--space-24); border-bottom: 1px solid var(--color-surface-divider);}.peppe-hairline-list-demo__item:last-child {border-bottom: none;}