JdB.CSS BETA

Les panneaux

jdb-panel

Conteneurs Bordures
Partager cette page
Descriptions de classes

Je suis un panneau .jdb-panel. J'ai une marge extérieure et intérieure.

Je suis un conteneur .jdb-container. J'ai une marge intérieure mais pas extérieure.

La classe jdb-panel

La classe jdb-panel ajoute une marge extérieure (margin) de 16px en haut et en bas, et une marge intérieure (padding) de 16px à gauche et à droite de n'importe quel élément.

Code :
 Copier Ouvrir dans JdBEdit
<!-- Un panneau avec arrière-plan bleu -->
<div class="jdb-panel jdb-blue">
  <p>Je suis un panneau...</p>
</div>

Les panneaux pour des notes

La classe jdb-panel est parfaite pour afficher des notes. Les notes sont souvent affichées avec une couleur pâle comme ceci :

Molestiae, in expedita harum deleniti iure, itaque esse quaerat illum eos modi ipsa numquam, impedit quia voluptas reprehenderit alias! Fugiat alias tempore sit illum accusamus quos, labore dolores vitae possimus.

Code :
 Copier Ouvrir dans JdBEdit
<!-- Un panneau avec arrière-plan bleu pâle -->
<div class="jdb-panel jdb-pale-blue">
  <p>Molestiae, in expedita harum deleniti iure, itaque esse quaerat illum
  eos modi ipsa numquam, impedit quia voluptas reprehenderit alias! Fugiat
  alias tempore sit illum accusamus quos, labore dolores vitae possimus.</p>
</div>

Pour en savoir plus sur les notes JdB.CSS, veuillez consulter le chapitre sur les notes.

Les panneaux pour des citations

La classe jdb-panel est aussi parfaite pour afficher des citations.

"Rendez-le aussi simple que possible, mais pas plus simple"

Code :
 Copier Ouvrir dans JdBEdit
<div class="jdb-panel jdb-leftbar jdb-serif jdb-sand jdb-xlarge">
  <p><em>"Rendez-le aussi simple que possible, mais pas plus simple"</em></p>
</div>

Pour en savoir plus sur les citations JdB.CSS, veuillez consulter le chapitre sur les citations.

Les panneaux pour des alertes traditionnelles

La classe jdb-panel est également parfaite pour afficher des alertes.

Les alertes sont souvent affichées avec une couleur forte (non pâle) comme ceci :

Modèle 1

Danger !

Le rouge indique souvent une situation dangereuse ou négative.

Code :
 Copier Ouvrir dans JdBEdit
<div class="jdb-panel jdb-red">
  <h3 class="h3">Danger !</h3>
  <p>Le rouge indique souvent une situation dangereuse ou négative.</p>
</div>

Modèle 2

Tâche terminée !

Le vert indique une réussite ou un message positif..

Code :
 Copier Ouvrir dans JdBEdit
<div class="jdb-panel jdb-leftbar jdb-pale-green jdb-border-green">
  <p class="jdb-bold jdb-text-green">Tâche terminée !</p>
  <p>Le vert indique une réussite ou un message positif..</p>
</div>

Modèle 3

Danger ! Quelque chose de grave s'est produit.
Code :
 Copier Ouvrir dans JdBEdit
<div class="jdb-panel jdb-padding-16 jdb-red">
  <span class="jdb-bold">Danger !</span>
  <span>Quelque chose de grave s'est produit.</span>
</div>

Modèle 4

Danger ! Quelque chose de grave s'est produit.
Code :
 Copier Ouvrir dans JdBEdit
<div class="jdb-panel jdb-padding-16 jdb-round jdb-border jdb-border-red jdb-pale-red">
  <span class="jdb-bold">Danger !</span>
  <span>Quelque chose de grave s'est produit.</span>
</div>

Modèle 5

Danger ! Quelque chose de grave s'est produit. En savoir plus.
Code :
 Copier Ouvrir dans JdBEdit
<div class="jdb-panel jdb-padding-16 jdb-round jdb-border jdb-pale-red jdb-text-red">
  <span class="jdb-bold">Danger !</span>
  <span>Quelque chose de grave s'est produit. <a href="#">En savoir plus.</a></span>
</div>

Modèle 6

Danger !
Quelque chose de grave s'est produit.
Code :
 Copier Ouvrir dans JdBEdit
<div class="jdb-container">
  <div class="jdb-round jdb-border jdb-border-red jdb-pale-red jdb-text-red">
    <div class="jdb-container jdb-padding-4 jdb-red jdb-bold">Danger !</div>
    <div class="jdb-container jdb-padding-4">Quelque chose de grave s'est produit.</div>
  </div>
</div>

Modèle 7

Nouvelle politique de confidentialité
Assurez-vous de savoir comment ces changements vous affectent.
Code :
 Copier Ouvrir dans JdBEdit
<div class="jdb-cell-row jdb-padding-8 jdb-topbar jdb-round jdb-border-green jdb-pale-green">
  <div class="jdb-cell jdb-cell-middle jdb-center" style="width:60px">
    <i class="fa fa-fw fa-2x fa-info-circle jdb-text-green" aria-hidden="true"></i>
  </div>
  <div class="jdb-cell jdb-cell-middle">
    <span class="jdb-large jdb-bold">Nouvelle politique de confidentialité</span><br>
    <span>Assurez-vous de savoir comment ces changements vous affectent.</span>
  </div>
  <div class="jdb-cell jdb-cell-middle jdb-center" style="max-width:47px">
    <button class="jdb-button jdb-margin-right jdb-round jdb-hover-green">
      <span class="jdb-hide-sm">Lire </span><i class="fa fa-fw fa-angle-right" aria-hidden="true"></i>
    </button>
  </div>
</div>

Modèle 8

Message informatif
Un texte supplémentaire pour expliquer ledit message.
Code :
 Copier Ouvrir dans JdBEdit
<div class="jdb-container jdb-padding-12 jdb-border-top jdb-border-bottom jdb-border-blue jdb-pale-blue">
  <span class="jdb-bold">Message informatif</span><br>
  <span>Un texte supplémentaire pour expliquer ledit message.</span>
</div>

Les panneaux sous forme de cartes (avec une ombre portée)

Quos aliquid veniam impedit sit quaerat, natus error minus consequuntur repellendus pariatur.

Code :
 Copier Ouvrir dans JdBEdit
<div class="jdb-panel jdb-brown jdb-card-4">
  <p>Quos aliquid veniam impedit sit quaerat,
  natus error minus consequuntur repellendus pariatur.</p>
</div>

Les panneaux arrondis

Quos aliquid veniam impedit sit quaerat, natus error minus consequuntur repellendus pariatur.

Code :
 Copier Ouvrir dans JdBEdit
<div class="jdb-panel jdb-brown jdb-round-large">
  <p>Quos aliquid veniam impedit sit quaerat,
  natus error minus consequuntur repellendus pariatur.</p>
</div>

Pour en savoir plus sur comment arrondir les bordures JdB.CSS, veuillez consulter le chapitre sur les arrondissements.

Les panneaux avec un bouton de fermeture

Fermer un panneau est très facile. Voici un demonstration :

Cliquez sur le X pour fermer (faire disparaitre) ce panneau.

Code :
 Copier Ouvrir dans JdBEdit
<div class="jdb-panel jdb-brown jdb-display-container">
  <span onclick="this.parentElement.style.display='none'"
    class="jdb-button jdb-display-topright">
    <i class="fa fa-times" aria-hidden="true"></i>
  </span>
  <p>Cliquez sur le X pour fermer (faire disparaitre) ce panneau.</p>
</div>

Si vous n'utilisez pas une icone croix (X) pour les boutons de fermeture, l'entité HTML &times; est l'icône récommandée pour cet effet (plutôt que la lettre "X").

Autres exemples de panneaux avec Font Awesome

Les panneaux JdB.CSS peuvent se combiner avec la librairie d'icons Font Awesome pour faire différents styles de notifications comme ceci (Cette documentation utilise la version ~> 5 de FontAwesome) :

Message simple 1

Message simple 2

Information

Avertissement

Erreur

Succès

Astuce

Code :
 Copier Ouvrir dans JdBEdit
<div class="jdb-panel jdb-pale-green">
  <p>
    <i class="fa fa-fw fa-check jdb-text-green" aria-hidden="true"></i> Succès
  </p>
</div>
Partager cette page
Conteneurs Bordures