Padel Galis
Guide de style
Padel Galis Cette page présente les styles et les normes actuels du site web.
Couleurs
Un aperçu des couleurs de la marque de ce site.
Action
Action
Ultra léger
Lumière
Moyen
Sombre
Ultra foncé
Comp
Primaire
Primaire
Ultra léger
Lumière
Moyen
Sombre
Ultra foncé
Comp
Secondaire
Secondaire
Ultra léger
Lumière
Moyen
Sombre
Ultra foncé
Comp
Accent
Accent
Ultra léger
Lumière
Moyen
Sombre
Ultra foncé
Comp
Base
Base
Ultra léger
Lumière
Moyen
Sombre
Ultra foncé
Comp
Ombre
Ombre
Ultra léger
Lumière
Moyen
Sombre
Ultra foncé
Action
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Primaire
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Secondaire
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
Ombre
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Succès
Succès
Success Light
Succès Noir
Succès au survol
Danger
Danger
Feu de détresse
Danger Dark
Danger Hover
Avertissement
Avertissement
Voyant d'avertissement
Avertissement Sombre
Avertissement en survol
info
Info
Info Light
Info Dark
Informations sur le survol
Boutons
Les boutons pleins et les boutons à contour sont disponibles dans toutes les gammes de couleurs, y compris le noir et le blanc.
BOUTONS SUR FOND CLAIR
ActionSchéma d'actionPrimaireSchéma primaireSecondaireSchéma secondaireAccentAccent OutlineBaseSchéma de base
BOUTONS SUR FOND SOMBRE
ActionSchéma d'actionPrimaireSchéma primaireSecondaireSchéma secondaireAccentAccent OutlineBlancBlancs en ligne
Échelle des boutons
Bouton XS
btn--primary / btn--xs
Bouton S
btn--primary / btn--s
Bouton M
btn--primary / btn--m
Bouton L
btn--primary / btn--l
Bouton XL
btn--primary / btn--xl
Bouton 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.
Rubriques
H1 (--xxl)
Rubrique 1 Regular
Rubrique 1 Moyenne
Titre 1 gras
H2 (--xl)
Titre 2 Regular
Rubrique 2 Moyenne
Titre 2 gras
H3 (--l)
Titre 3 Regular
Rubrique 3 Moyenne
Titre 3 gras
H4 (--m)
Rubrique 4 Regular
Rubrique 4 Moyenne
Titre 4 gras
H5 (--s)
Rubrique 5 Regular
Rubrique 5 Moyenne
Titre 5 gras
H6 (--xs)
Rubrique 6 Regular
Rubrique 6 Moyenne
Titre 6 gras
Corps de texte
TEXTE DU CORPS (--m)
Texte m Régulier
Texte m Moyen
Texte m Gras
PETIT TEXTE (--s)
Texte s Régulier
Texte s Moyen
Texte s Gras
TEXTE TRÈS PETIT (--xs)
Texte xs Regular
Texte xs Moyen
Texte xs Bold
Exemples
Rubrique 1 (H1)
Il s'agit d'un texte de grande taille. 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.
Rubrique 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.
Rubrique 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.
Rubrique 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.
Rubrique 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.
Rubrique 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.
Remplissage de la section
Le rembourrage 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 s'assurer que les marges, le rembourrage et les espaces correspondent parfaitement.
--space-xs
--espace-s
--space-m
--space-l
--space-xl
--space-xxl
Rembourrage des éléments
Voici les six niveaux d'espacement visualisés sous la forme d'un rembourrage.
Carte
Il s'agit d'une carte avec un rembourrage XS. Son contenu est assez proche des bords.
Carte
Il s'agit d'une carte avec un rembourrage S. Elle a un rembourrage un peu plus serré.
Carte
Il s'agit d'une carte avec un rembourrage M. Elle dispose d'une marge de manœuvre standard.
Carte
Il s'agit d'une carte avec un rembourrage L. Elle dispose d'une marge de manœuvre supplémentaire.
Carte
Il s'agit d'une carte avec un rembourrage XL. Elle dispose d'une grande marge de manœuvre.
Carte
Il s'agit d'une carte avec un rembourrage XXL. Évitez de l'utiliser dans un espace confiné.
Ombres
Vous avez le choix entre trois ombres de boîte multicouches.
Boîte d'ombre M
Boîte d'ombre L
Boîte d'ombrage XL
Rayon de la bordure
Il existe six valeurs de rayon de bordure calculées à partir d'une taille de base et d'une échelle mathématique.
XS arrondi
Arrondi S
Arrondi M
L arrondi
Arrondi XL
Arrondi XXL