Spacing

v-0.0.0

Small

À utiliser pour les éléments de l’interface petits et compacts. En général, plus un conteneur est petit, plus son padding est petit.

Name	Value
1	0.8 rem
2	1.6 rem

Use case

• Espace entre une petite icône et un texte
• Padding du conteneur de petits éléments comme des cellules de tableau, les icônes dans un bouton…
• Espace entre des éléments répétitifs (groupe de boutons)
• Padding dans le conteneur du champs input
• Espace vertical entre les éléments d’une vignette (titre, description, actions…)
• Espace entre un trigger et l’élément supérieur (menu, un bouton déroulant…)

Medium

À utiliser pour les éléments de l’interface qui sont plus grands et moins denses.

Name	Value
3	2.4 rem
4	3.2 rem
5	4 rem

Use cases

• Container padding de composants plus grand (comme des boutons)
• Espace entre une grande icône et un contenu
• Espace entre les éléments des composants moins denses ou plus grands

Large

À utiliser pour les éléments de mise en page et pour les plus grands éléments de l’interface.

Name	Value
6	4.8 rem
7	5.6 rem
8	6.4 rem
9	7.2 rem
10	8 rem

Use cases

• L’espace entre les contenus d’une page (haut de la page et header) => à pd space 7
• Alignement au sein de morceaux de contenu plus important

Examples

Margin

.m--10

.m--9 {
    margin: 8rem;
}

Padding

.p--5

.p--5 {
    padding: 4rem;
}