Box
Une box permet de mettre en relief des éléments sur une page
Code de base
Aperçu
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
Box cliquable
Remplacez la div par un a dans le code de base pour rendre l'intégralité de la box cliquable.
Box accentuée
Afin d'ajouter une bordure latérale pour accentuer la box, ajoutez la classe .is-highlighted ainsi que la classe souhaitée pour colorer la bordure.
Aperçu
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
Box flat
Vous pouvez appliquer la facette .is-flat afin de supprimer l'effet 3D de la carte (l'ombre disparait alors au profit d'une bordure simple). La couleur de cette bordure est ensuite modifiable par une autre facette .is-flat-xxx où xxx représente une des couleurs de la palette.
Aperçu
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
Ajouter un header
Il est possible d'ajouter un header à votre box en plaçant l'élément .box-header avant le contenu.
Aperçu
Box header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
Ajouter une image de fond
En ajoutant la classe has-background, vous pouvez activer la possibilité d'afficher une image de fond.
Aperçu
Forfait Sensation
Engagement 24 mois.
.has-background ne pouvant pas prévoir le comportement souhaité par votre image de fond, quelques propriétés CSS seront requises avec du style en ligne, en plus de l'URL (ici par exemple, la taille et la position).
Si le fond est en désaccord avec la couleur de texte, pensez à ajouter .is-inverted pour inverser les couleurs de texte.
Remplir toute la largeur
La classe is-unboxed permet d'annuler les marges des éléments à l'intérieur d'une box
Aperçu
Élément positionné normalement
Élément dont on annule les marges grâce à is-unboxed