Titre de premier niveau
Titre de second niveau
Titre de troisième niveau
Titre de quatrième niveau

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam consequatur dolor est ex, excepturi explicabo iusto libero minus nostrum obcaecati omnis perferendis provident reprehenderit sapiente, soluta unde veniam voluptates?

Titre .hero-title

.hero-text ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque dolorem eligendi esse et porro repellendus? Autem consectetur deserunt dolor laborum, tenetur unde! Facilis hic ipsa, iste itaque quam quidem.

Titre de section .section-title
Texte d'alerte .text-danger Texte d'alerte .text-muted
Couleurs
color-dark
color
color-light
color-inversed
contrast
contrast25
red
green
yellow
color-transparent
border
border-light
background
background-light
shadow
play
card-footer

Boutons

Pill

Navigations

.nav-pills>a
.tabs-toggle>button
ul.pagination>li>a
ul.tabs-bar>a
.list-group>a
.list-cursus>*

Carte

.card
.card-big
.card>(.card__body>.card__title+.card__description)+.card__footer
Titre de la carte
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi enim fugit illum iure nemo pariatur sint vitae. Architecto cupiditate delectus eos est non quis reiciendis suscipit totam veritatis voluptas. Vero?
Ajouter un a.card__link à l'intérieur d'une carte la rend entièrement clicable
Titre de la carte
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi enim fugit illum iure nemo pariatur sint vitae. Architecto cupiditate delectus eos est non quis reiciendis suscipit totam veritatis voluptas. Vero?
.is-completed
Titre de la carte
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi enim fugit illum iure nemo pariatur sint vitae. Architecto cupiditate delectus eos est non quis reiciendis suscipit totam veritatis voluptas. Vero?

Layout

Les espacements peuvent être pilotés au moyen de la variable --gap qui est multiplié par l'espace (8px)
Chaque élément réinitialise la valeur de gap, la valeur ne "cascade" pas.

.stack
.stack-separated
.hstack
.flex
.flex.flex-start
.flex.flex-end
.layout-sidebar
.grid (utilisé pour les formulaire en général)
.full
.grid2
Formulaires

Alerts

Ceci est un exemple alert-message[type=info]

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias assumenda blanditiis delectus.

Ceci est un exemple alert-message[type=success]

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias assumenda blanditiis delectus.

Ceci est un exemple alert-message[type=danger]

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias assumenda blanditiis delectus.

Skeleton

Icons