Les séparateurs

jdb-separator v1.2.0

Ligne horizontale

La classe jdb-hr permet de créer une ligne horizontale basée sur la balise sémantique hr comme celle-ci :

Code :

<hr class="jdb-hr"/>

Les séparateurs des blocs

Les séparateurs peuvent être utilisés pour séparer le contenu verticalement ou horizontalement.

Séparateur horizontal simple

La classe jdb-separator-y permet de créer un séparateur horizontal simple. Le séparateur

Contenu

Code :

<div class="jdb-section">
  <div class="jdb-flex-center jdb-padding jdb-border jdb-light-gray jdb-round-md">
    <p>Contenu</p>
  </div>
  <div class="jdb-separator-y"></div>
  <div class="jdb-flex-center jdb-padding jdb-border jdb-light-gray jdb-round-md">
    <p>Contenu</p>
  </div>
</div>

Séparateur horizontal avec contenu

La classe jdb-separator-y peut aussi être utilisée avec du contenu comme dans ce cas :

Contenu A

Contenu B

Vous pouvez aussi utiliser la classe jdb-separator qui est un alias de jdb-separator-y.

Code :

<div class="jdb-section">
  <div class="jdb-flex-center jdb-padding jdb-border jdb-light-gray jdb-round-md">
    <p>Contenu A</p>
  </div>
  <div class="jdb-separator-y">OU</div>
  <div class="jdb-flex-center jdb-padding jdb-border jdb-light-gray jdb-round-md">
    <p>Contenu B</p>
  </div>
</div>

Séparateur vertical simple

La classe jdb-separator-x permet de créer un séparateur vertical simple comme celui-ci :

Contenu

Code :

<div class="jdb-section jdb-flex jdb-responsive">
  <div class="jdb-flex-center jdb-flex-item-grow jdb-padding jdb-border jdb-light-gray jdb-round-md">
    <p>Contenu</p>
  </div>
  <div class="jdb-separator-x"></div>
  <div class="jdb-flex-center jdb-flex-item-grow jdb-padding jdb-border jdb-light-gray jdb-round-md">
    <p>Contenu</p>
  </div>
</div>

Séparateur vertical avec contenu

La classe jdb-separator-x peut aussi être utilisée avec du contenu comme dans le cas ci-dessous. N'oubliez pas d'adapter les containeurs selon vos besoins.

Contenu A

Contenu B

Code :

<div class="jdb-section jdb-flex jdb-responsive">
  <div class="jdb-flex-center jdb-flex-item-grow jdb-padding jdb-border jdb-light-gray jdb-round-md">
    <p>Contenu A</p>
  </div>
  <div class="jdb-separator-x">ET</div>
  <div class="jdb-flex-center jdb-flex-item-grow jdb-padding jdb-border jdb-light-gray jdb-round-md">
    <p>Contenu B</p>
  </div>
</div>

Vous pouvez séparer plusieurs blocs avec le séparateur vertical (ou horizontal) comme dans le cas ci-après.

Pour le séparateur vertical, il est recommandé de toujours utiliser la classe jdb-responsive pour englober les éléments à séparer afin d'éviter le dépassement de la largeur de l'écran.

Code :

<div class="jdb-section jdb-flex jdb-responsive">
  <div class="jdb-flex-center jdb-flex-item-grow jdb-padding jdb-border jdb-light-gray jdb-round-md">
    <p>CA</p>
  </div>
  <div class="jdb-separator-x">OU</div>
  <div class="jdb-flex-center jdb-flex-item-grow jdb-padding jdb-border jdb-light-gray jdb-round-md">
    <p>CB</p>
  </div>
  <div class="jdb-separator-x">OU</div>
  <div class="jdb-flex-center jdb-flex-item-grow jdb-padding jdb-border jdb-light-gray jdb-round-md">
    <p>CC</p>
  </div>
  <div class="jdb-separator-x">OU</div>
  <div class="jdb-flex-center jdb-flex-item-grow jdb-padding jdb-border jdb-light-gray jdb-round-md">
    <p>CD</p>
  </div>
</div>

Pour avoir un bon alignement du contenu dans le séparateur, il est recommandé de n'y mettre que du texte (pas de balises HTML).