Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente Divisor

Última atualização:

Divisor CSS Tailwind somente CSS – horizontal e vertical com rótulo centralizado opcional. Variantes de cores e tamanhos. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.

Os componentes divisores criam separação visual entre as seções de conteúdo. Leves e semânticos, os divisores ajudam a estruturar as informações hierarquicamente e melhorar a legibilidade. O sistema divisor Frutjam suporta orientações horizontais e verticais com conteúdo de texto opcional para separações rotuladas entre seções.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

Aula Tipo Descrição
dividerBaseRégua horizontal com texto de etiqueta centralizado opcional
divider-horizontalModificadorOrientação horizontal (padrão)
divider-verticalModificadorOrientação vertical
divider-startModificadorAlinha o texto da etiqueta ao início
divider-endModificadorAlinha o texto da etiqueta até o final
divider-solidEstiloEstilo de linha sólida
divider-dashedEstiloEstilo de linha tracejada
divider-dottedEstiloEstilo de linha pontilhada
divider-primaryCorCor do tema principal
divider-secondaryCorCor do tema secundário
divider-accentCorCor do tema de destaque
divider-neutralCorCor neutra do tema
divider-infoCorCor semântica da informação
divider-successCorCor semântica de sucesso
divider-warningCorCor semântica de aviso
divider-errorCorCor semântica do erro

Uso Básico

<div class="divider"></div>

<div className="divider"></div>

Direções do divisor

Divisor horizontal

html 
<div class="divider divider-horizontal"></div>

Divisor vertical

html 
1
2
3
4
5
6
7
8
9
<div class="flex gap-4 w-full">
    <div class="card card-outline w-full">
       <div class="card-content">content 1</div>
    </div>
    <div class="divider divider-vertical"></div>
    <div class="card card-outline w-full">
        <div class="card-content">content 2</div>
    </div>
</div>

Divisor com Texto

Horizontal com texto

html 
<div class="divider divider-horizontal">OR</div>

Vertical com Texto

html 
1
2
3
4
5
6
7
8
9
<div class="flex gap-4 w-full">
    <div class="card card-outline w-full">
       <div class="card-content">content 1</div>
    </div>
    <div class="divider divider-vertical">OR</div>
    <div class="card card-outline w-full">
        <div class="card-content">content 2</div>
    </div>
</div>

Cores do divisor

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="flex flex-col gap-8 w-full">
  <div class="divider">Default</div>
  <div class="divider divider-neutral">Neutral</div>
  <div class="divider divider-primary">Primary</div>
  <div class="divider divider-secondary">Secondary</div>
  <div class="divider divider-accent">Accent</div>
  <div class="divider divider-success">Success</div>
  <div class="divider divider-warning">Warning</div>
  <div class="divider divider-info">Info</div>
  <div class="divider divider-error">Error</div>
</div>

Posições de conteúdo divisor

Você pode alinhar o texto dentro de uma divisória ao início, ao centro (padrão) ou ao final da linha.

Posições horizontais

html 
1
2
3
4
5
<div class="flex w-full gap-8 flex-col">
  <div class="divider divider-start">Start</div>
  <div class="divider">Default</div>
  <div class="divider divider-end">End</div>
</div>

Posições Verticais

html 
1
2
3
4
5
<div class="flex justify-center w-full h-64 gap-12">
  <div class="divider divider-vertical divider-start">Start</div>
  <div class="divider divider-vertical">Default</div>
  <div class="divider divider-vertical divider-end">End</div>
</div>

Usando Claude Code, Cursor ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Divisor e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP