Titre de premier niveau
Titre de second niveau
Titre de troisième niveau
Titre de quatrième niveau
Titre de cinquiè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

Bouton .btn-primary Bouton .btn-secondary Bouton .btn-danger Bouton [disabled] Bouton avec icône
Bouton .btn-primary-outlined
Bouton .btn-big
Bouton .btn-small

Pill

.pill .pill.pill-green .pill.pill-red .pill.pill-yellow .pill.pill-grey .pill.pill-darkgrey
.pill.small .pill.small.pill-green .pill.small.pill-red .pill.small.pill-yellow .pill.small.pill-grey .pill.small.pill-darkgrey

Navigations

.nav-card>a
.nav-pills>a
.tabs-toggle>button
ul.pagination>li>a
ul.tabs-bar>a
.list-group>a
Element #1 1 Element #2 1 Element #3 1
.list-cursus>*
Element #1 Element #2 Element #3

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?
Un footer
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 formulaires 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