Passer au contenu principal
Frutjam logo Frutjam
v2.2.2
Theme

Divider Component

CSS-only Tailwind CSS divider — horizontal and vertical with optional centered label. Color and size variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Divider components create visual separation between content sections. Lightweight and semantic, dividers help structure information hierarchically and improve readability. The Frutjam divider system supports horizontal and vertical orientations with optional text content for labeled separations between sections.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Classe Taper Description
dividerBaseHorizontal rule with optional centered label text
divider-horizontalModificateurHorizontal orientation (default)
divider-verticalModificateurVertical orientation
divider-startModificateurAligns label text to the start
divider-endModificateurAligns label text to the end
divider-solidStyleStyle de ligne solide
divider-dashedStyleStyle de ligne pointillée
divider-dottedStyleStyle de ligne pointillée
divider-primaryCouleurCouleur du thème principal
divider-secondaryCouleurCouleur du thème secondaire
divider-accentCouleurCouleur du thème d'accentuation
divider-neutralCouleurCouleur du thème neutre
divider-infoCouleurCouleur sémantique de l'information
divider-successCouleurCouleur sémantique du succès
divider-warningCouleurCouleur sémantique d’avertissement
divider-errorCouleurCouleur sémantique des erreurs

Utilisation de base

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

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

Instructions pour le diviseur

Diviseur horizontal

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

Diviseur vertical

content 1
content 2
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>

Diviseur avec texte

Horizontal avec texte

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

Vertical avec texte

content 1
OR
content 2
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>

Couleurs des séparateurs

Default
Neutral
Primary
Secondary
Accent
Success
Warning
Info
Error
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>

Positions du contenu du diviseur

Vous pouvez aligner le texte d'un séparateur sur le début, le centre (par défaut) ou la fin de la ligne.

Positions horizontales

Start
Default
End
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>

Positions verticales

Start
Default
End
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>