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.
jdb-panelLa 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.
<!-- Un panneau avec arrière-plan bleu --> <div class="jdb-panel jdb-blue"> <p>Je suis un panneau...</p> </div>
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.
<!-- 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.
La classe jdb-panel est aussi parfaite pour afficher des citations.
<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.
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 :
Le rouge indique souvent une situation dangereuse ou négative.
<div class="jdb-panel jdb-red"> <h3 class="h3">Danger !</h3> <p>Le rouge indique souvent une situation dangereuse ou négative.</p> </div>
<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>
<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>
<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>
<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>
<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><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><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>
Quos aliquid veniam impedit sit quaerat, natus error minus consequuntur repellendus pariatur.
<div class="jdb-panel jdb-brown jdb-card-4"> <p>Quos aliquid veniam impedit sit quaerat, natus error minus consequuntur repellendus pariatur.</p> </div>
Quos aliquid veniam impedit sit quaerat, natus error minus consequuntur repellendus pariatur.
<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.
Fermer un panneau est très facile. Voici un demonstration :
Cliquez sur le X pour fermer (faire disparaitre) ce panneau.
<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 × est l'icône récommandée pour cet effet (plutôt que la lettre "X").
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
<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>