Aller au contenu principal
Aller au contenu

Style guide

Les composants ou textes sont toujours groupés pour pouvoir gérer la largeur de la colonne, ici grande largeur.

Heading 1

Heading 2

Heading 3

Heading 4

Paragraphe : Cillum labore ea laborum dolore nisi tempor velit deserunt sint sit. Aliqua incididunt laborum exercitation et dolor ullamco proident. Enim amet ad laboris ipsum sint dolor magna minim sunt ut ex. Ut reprehenderit proident exercitation. Ad enim deserunt do Lorem adipisicing.

Couleurs

Blanc

Vert alert

Couleurs à ne pas utiliser (Formations, Collectif, Club Green IT) , présentes dans le thème du site.

Gestion des blocs

configuration non recommandée, mis ici pour expliquer.
Ce paragraphe de texte est hors d’un groupe (section). En mettant une couleur de fond, automatiquement un espacement se met autour.
Ce type d’utilisation à des comportements non gérables, d’où la recommandation d’utiliser un groupe (Groupe, rangée ou empilement).

Ce paragraphe de texte est dans un groupe (section) sans grande largeur ou sans pleine largeur (full width). Tempor sint tempor est quis pariatur exercitation minim. Aliquip veniam et cillum consequat velit consectetur irure Lorem pariatur ut minim eiusmod fugiat esse. Elit magna non nisi.

Ce texte est dans un groupe (section) pleine largeur (full width). Et ipsum ipsum mollit quis sunt proident ut est anim consectetur nulla nulla cillum excepteur ea. Magna eiusmod officia magna. Minim aliqua in occaecat veniam est commodo reprehenderit.

Ce texte est dans deux groupes, l’un de pleine largeur (full width) avec une couleur de fond de section, puis un second pour lui donner une grande largeur. Et ullamco adipisicing aliquip minim quis. Cupidatat eu sint culpa non aute aute excepteur excepteur minim voluptate pariatur est exercitation. Deserunt velit mollit aute eiusmod ex sunt esse ea tempor dolore in aute velit duis in.

Mise en page : colonnes / rangée (largeur automatique, suivant le contenu)

Colonne 1. Adipisicing Lorem ad nostrud sit Lorem veniam laborum culpa velit exercitation pariatur. Et ut consequat irure et. Fugiat commodo occaecat dolor non commodo in.

Colonne 2. Mollit sunt tempor ipsum ea in culpa duis ex adipisicing. Ex consequat occaecat ex tempor est magna aute consequat veniam sint proident cupidatat. Ullamco voluptate nisi voluptate pariatur anim velit ex dolor est consectetur elit ut.

Mise en page : colonnes / grille (largeurs proportionnelles)

Colonne 1. Adipisicing Lorem ad nostrud sit Lorem veniam laborum culpa velit exercitation pariatur. Et ut consequat irure et. Fugiat commodo occaecat dolor non commodo in.

Colonne 2. Mollit sunt tempor ipsum ea in culpa duis ex adipisicing. Ex consequat occaecat ex tempor est magna aute consequat veniam sint proident cupidatat. Ullamco voluptate nisi voluptate pariatur anim velit ex dolor est consectetur elit ut.

Types de styles de boites

Magna pariatur fugiat consectetur tempor cillum elit nisi esse nostrud cillum culpa do officia. Proident consequat mollit dolore in est et laborum pariatur consectetur irure sint aute est fugiat Lorem. Sit ex quis magna consequat dolor anim. Mollit commodo consectetur irure ipsum elit eiusmod est. Deserunt ipsum consectetur magna et Lorem pariatur aliquip sunt veniam. Ut aliquip irure ipsum adipisicing reprehenderit ut ullamco culpa excepteur elit Lorem cillum. Anim cupidatat excepteur deserunt duis enim.

Magna pariatur fugiat consectetur tempor cillum elit nisi esse nostrud cillum culpa do officia. Proident consequat mollit dolore in est et laborum pariatur consectetur irure sint aute est fugiat Lorem. Sit ex quis magna consequat dolor anim. Mollit commodo consectetur irure ipsum elit eiusmod est. Deserunt ipsum consectetur magna et Lorem pariatur aliquip sunt veniam. Ut aliquip irure ipsum adipisicing reprehenderit ut ullamco culpa excepteur elit Lorem cillum. Anim cupidatat excepteur deserunt duis enim.

Ombres

Ombre Natural

Ombre Deep

Ombre Sharp

Ombre Outlined

Ombre Crips

Espacements