---
title: "Divider"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Divider with horizontal and vertical orientation. Text labels, icons, and color variants for clean section separation in layouts and forms."
url: https://frutjam.com/fr/components/divider
---

# Divider Component

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                                       |
| ------------------ | ------------ | ------------------------------------------------- |
| divider            | Base         | Horizontal rule with optional centered label text |
| divider-horizontal | Modificateur | Horizontal orientation (default)                  |
| divider-vertical   | Modificateur | Vertical orientation                              |
| divider-start      | Modificateur | Aligns label text to the start                    |
| divider-end        | Modificateur | Aligns label text to the end                      |
| divider-solid      | Style        | Style de ligne solide                             |
| divider-dashed     | Style        | Style de ligne pointillée                         |
| divider-dotted     | Style        | Style de ligne pointillée                         |
| divider-primary    | Couleur      | Couleur du thème principal                        |
| divider-secondary  | Couleur      | Couleur du thème secondaire                       |
| divider-accent     | Couleur      | Couleur du thème d'accentuation                   |
| divider-neutral    | Couleur      | Couleur du thème neutre                           |
| divider-info       | Couleur      | Couleur sémantique de l'information               |
| divider-success    | Couleur      | Couleur sémantique du succès                      |
| divider-warning    | Couleur      | Couleur sémantique d’avertissement                |
| divider-error      | Couleur      | Couleur sémantique des erreurs                    |

## Utilisation de base

## Instructions pour le diviseur

### Diviseur horizontal

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

### Diviseur vertical

```html
<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

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

### Vertical avec texte

```html
<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

```html
<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

```html
<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

```html
<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>
```