Divider CSS

O que é

É a linha que separa um bloco do outro: o fim de uma seção, a divisão entre "Entrar com e-mail" e "Entrar com Google", o tracinho em pé entre "Perfil | Configurações | Sair". Você coloca sw-div numa tag <hr> e ela ganha a cor e o espaçamento do SW Core. Para mudar o jeito da linha, escreva uma palavra dentro do atributo: sw-div="dsh" (tracejada), sw-div="thk" (grossa), sw-div="v" (em pé) ou sw-div="txt" (com texto no meio).

É só CSS — não precisa de JavaScript. A cor da linha é um cinza calculado para aparecer bem no tema claro e no escuro. A linha já vem com um respiro de 16 px em cima e embaixo (ou dos lados, quando é em pé).

Quando usar

• Separar seções de um texto longo, de um formulário ou de um card: <hr sw-div>.
• Separação mais leve, que não "corta" a página: tracejada — <hr sw-div="dsh">.
• Separação forte, no fim de um bloco importante: grossa — <hr sw-div="thk">.
• Tela de login ("ou continue com"): linha com texto — <div sw-div="txt">ou</div>.
• Itens lado a lado (menu do usuário, dados de contato numa linha): linha em pé — <hr sw-div="v">.

Comece aqui

1. 1

   Coloque o SW Core no <head> da página (uma vez só, vale para todos os componentes). A divisória só precisa do CSS principal.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Escreva um <hr> com sw-div. Pronto: uma linha com respiro em cima e embaixo.

   Sobre a empresa

   ---

   Nossos serviços

   <p>Sobre a empresa</p>
   <hr sw-div>
   <p>Nossos serviços</p>

3. 3

   Quer um texto no meio da linha? Troque o <hr> por uma <div> com sw-div="txt" e escreva o texto dentro.

   ou continue com

   <div sw-div="txt">ou continue com</div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<button sw-btn="pri">Entrar com e-mail</button>
<div sw-div="txt">ou entre com</div>
<button sw-btn="out">Entrar com Google</button>

<h3>Quem somos</h3>
<p>Estúdio de design e sites em Recife, desde 2012.</p>
<hr sw-div>
<h3>O que fazemos</h3>
<p>Sites, lojas virtuais e sistemas de gestão.</p>

<div class="flx j-sb"><span>Camiseta básica</span><span>R$ 59,90</span></div>
<hr sw-div="dsh">
<div class="flx j-sb"><span>Frete</span><span>R$ 15,00</span></div>
<hr sw-div="thk">
<div class="flx j-sb"><strong>Total</strong><strong>R$ 74,90</strong></div>

<div class="flx alc j-en">
  <a href="/avisos"><i class="swi-bell"></i> Avisos</a>
  <hr sw-div="v">
  <a href="/conta"><i class="swi-user"></i> Minha conta</a>
  <hr sw-div="v">
  <a href="/sair"><i class="swi-log-out"></i> Sair</a>
</div>

Precisa de quê

• swcore.min.css — a divisória.
• swcore.compl.min.css — só se usar ícone swi-* junto do texto.

Cuidados — erros comuns

• Texto dentro de <hr> não aparece: <hr> não aceita conteúdo. Para linha com texto use <div sw-div="txt">texto</div>.
• A linha em pé (v) some se o pai não for um bloco lado a lado. Coloque os itens dentro de <div class="flx alc">.
• A linha deitada dentro de um bloco lado a lado (flx) fica sem largura e desaparece. Ela precisa estar num bloco normal, um em cima do outro.
• Para mudar a cor, não escreva style="border-color:…" em cada linha: defina --sw-div-c uma vez no CSS da página.

O que ele não faz

• dsh e thk só valem para a linha deitada. Em v (em pé) e em txt (com texto) a linha continua cheia e fina.
• Não tem cores prontas (pri, err…): a cor muda só pela variável --sw-div-c.