Divider CSS

Linha divisória — sólida, tracejada ou com um texto no meio ("ou continue com").

O que é

Separa visualmente seções de conteúdo. A variante txt centraliza um texto (ex.: "OU") com uma linha de cada lado, comum em telas de login.

Como funciona

100% CSS. A cor é uma mistura de --sw-bor com --sw-txt-mut (só pra essa linha) porque a borda padrão sozinha é sutil demais pra função de divisória, principalmente no tema claro.

Exemplos

Horizontais — padrão, tracejada, grossa Ao vivo

<hr sw-div>
<hr sw-div="dsh">
<hr sw-div="thk">

Com texto no meio (é <div>, não <hr>) Ao vivo

ou continue com

<p>Continuar com e-mail</p>
<div sw-div="txt">ou</div>
<p>Continuar com Google</p>

Vertical, entre itens de um flex Ao vivo

Perfil

Config

Sair

<div class="flx alc gap-6">
  <span>Perfil</span><hr sw-div="v"><span>Config</span><hr sw-div="v"><span>Sair</span>
</div>

Atributos

Nenhum.

Variantes

sw-div (sem valor)

linha sólida horizontal — em

dsh

tracejada

thk

2px, mais grossa

v

vertical, entre itens de um flex row — também em

txt

linha dos 2 lados + texto no meio — vai num

, não

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

Nenhuma.

← AnteriorCard Próximo →Timeline