Dans ce document j'indiquerai le style css à utiliser dans le code html sous la forme de badge css

Couleurs

Couleurs spécifiques à QDM.

#fcc900

-yellowou-primary

#337c9c

-blueou-secondary

#56add4

-blue-sky

#12b3b3

-cyan

#bed941

-green

#ff7d27

-orange

#b6256c

-pink

#37363b

-text-color

Autres couleurs.

#000

-black

#fff

-white

#f8f9fa

-gray-100

#e9ecef

-gray-200

#dee2e6

-gray-300

#ced4da

-gray-400

#adb5bd

-gray-500

#6c757d

-gray-600

#495057

-gray-700

#343a40

-gray-800

#212529

-gray-900

Pour appliquer ces styles, on utilise un suffixe.
Par exemple, text-pink pour colorer le texte en bleu.
Pour le background, ce sera bg-yellow.
C'est le même principe pour les boutons :

Typos

Deux familles de police : "Oswald" et "Myriad Pro" qui possédent chacune deux déclinaisons, "regular" et "bold".
La police par défaut est "Myriad Pro Regular".

Oswald regular
oswald

Oswald Bold
oswald-bold

Myriad Pro regular
myriad

Myriad Pro Bold
myriad-bold

Si un paragraphe est en "Myriad Pro Regular", et qu'une partie du texte est en strong ou b, cette partie de texte sera en "Myriad Pro bold".

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid at, atque, consequatur consequuntur eaque eligendi esse eveniet exercitationem illo impedit ipsum nam officiis porro qui, quos sapiente vero voluptate.

Si un paragraphe est en "Oswald Regular", et qu'une partie du texte est en strong ou b, cette partie de texte sera en "Myriad Pro bold".

Taille de texte

La taille par défaut est 16px.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-10

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-11

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-12

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-13

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-14

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-15

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-16

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-17

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-18

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-19

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-20

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-21

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-22

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-23

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-24

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-25

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-26

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-27

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-28

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-29

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-30

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-31

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-32

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-33

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-34

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-35

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-36

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-37

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-38

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-39

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae
font-size-40

Hauteur des lignes

La hauteur par défaut est 1.5 (Taille de texte x 1.5)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A doloremque neque nulla optio qui quia sed suscipit. Consectetur dignissimos distinctio exercitationem, illum laudantium, nisi nulla pariatur sapiente voluptas voluptates voluptatibus.
line-height-1-5

Alignement

Par défaut le texte est aligné à gauche.
Le texte peut être aligné à gauche, à droite ou centré.
Le texte peut être aussi justifié.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, dolorum ipsa ipsam laudantium quae saepe sit tempora tenetur voluptates. Quibusdam
text-left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, dolorum ipsa ipsam laudantium quae saepe sit tempora tenetur voluptates. Quibusdam
text-center

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, dolorum ipsa ipsam laudantium quae saepe sit tempora tenetur voluptates. Quibusdam
text-right

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum distinctio ducimus esse odit porro quasi quod ullam! Ad aliquam, animi ducimus error ex labore quia reprehenderit saepe tenetur ut voluptas voluptatibus? A dignissimos explicabo illo laboriosam magni molestias nisi placeat, quisquam repellat tenetur. Ab aliquam atque deserunt itaque tempore.
text-justify

Blocs

Bloc bg-gray-200

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci, asperiores eum exercitationem hic itaque molestias natus obcaecati saepe sint?
bg-gray-200

Bloc bg-gray-300

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci, asperiores eum exercitationem hic itaque molestias natus obcaecati saepe sint?
bg-gray-300