Catalys Santé
Guide des styles
Cette page présente les styles et les normes en vigueur pour le site web de Catalys Santé.
Couleurs
Couleurs du site
Action
Action
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Primary
Primary
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Secondary
Secondary
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Accent
Accent
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Base
Base
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Shade
Shade
Ultra Light
Light
Medium
Dark
Ultra Dark
Action
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Primary
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Secondary
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Accent
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Base
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Shade
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Success
Success
Success Light
Success Dark
Success Hover
Danger
Danger
Danger Light
Danger Dark
Danger Hover
Warning
Warning
Warning Light
Warning Dark
Warning Hover
info
Info
Info Light
Info Dark
Info Hover
Boutons
Les boutons pleins et les boutons à contour sont disponibles dans tous les jeux de couleurs, y compris le noir et le blanc.
BOUTONS SUR FOND CLAIR
ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineBaseBase Outline
BOUTONS SUR FOND SOMBRE
ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineWhiteWhite Outline
Échelle des boutons
Button XS
btn--primary / btn--xs
Button S
btn--primary / btn--s
Button M
btn--primary / btn--m
Button L
btn--primary / btn--l
Button XL
btn--primary / btn--xl
Button XXL
btn--primary / btn--xxl
Typographie
Vous trouverez ci-dessous un aperçu des tailles et des graisses de la typographie réactive pour ce site. Ils sont calculés à partir d'une taille de base et d'une échelle mathématique.
Headings
H1 (--xxl)
Heading 1 Regular
Heading 1 Medium
Heading 1 Bold
H2 (--xl)
Heading 2 Regular
Heading 2 Medium
Heading 2 Bold
H3 (--l)
Heading 3 Regular
Heading 3 Medium
Heading 3 Bold
H4 (--m)
Heading 4 Regular
Heading 4 Medium
Heading 4 Bold
H5 (--s)
Heading 5 Regular
Heading 5 Medium
Heading 5 Bold
H6 (--xs)
Heading 6 Regular
Heading 6 Medium
Heading 6 Bold
Body Text
BODY TEXT (--m)
Text m Regular
Text m Medium
Text m Bold
SMALL TEXT (--s)
Text s Regular
Text s Medium
Text s Bold
XTRA SMALL TEXT (--xs)
Text xs Regular
Text xs Medium
Text xs Bold
Examples
Heading 1 (H1)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 2 (H2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 3 (H3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 4 (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 5 (H5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 6 (H6)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Largeurs
Vous pouvez utiliser six valeurs pour contrôler la largeur des éléments. Elles sont automatiquement réactives.
Padding des sections
Le padding des sections est réactif et basé sur un multiplicateur du système d'espacement des noyaux.
Espacement
Il existe six niveaux d'espacement réactifs calculés à partir d'une taille de base et d'une échelle mathématique. Cela permet de garantir que les marges, le rembourrage et les espaces correspondent parfaitement.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl
Padding des éléments
Voici les six niveaux d'espacement visualisés sous la forme d'un padding.
Card
Il s'agit d'une carte avec un padding XS. Son contenu est assez proche des bords.
Card
Il s'agit d'une carte avec un padding S. Son contenu est assez proche des bords.
Card
Il s'agit d'une carte avec un padding M. Son contenu est assez proche des bords.
Card
Il s'agit d'une carte avec un padding L. Son contenu est assez proche des bords.
Card
Il s'agit d'une carte avec un padding XL. Son contenu est assez proche des bords.
Card
Il s'agit d'une carte avec un padding XXL. Son contenu est assez proche des bords.
Ombres
Vous avez le choix entre trois ombres de boîte multicouches.
Box shadow M
Box shadow L
Box shadow XL
Rayon des bordures
Il existe six valeurs de rayon de bordure calculées à partir d'une taille de base et d'une échelle mathématique.
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL