Un kit d'interface utilisateur flexible

Guide de Style

Couleurs

Primaires et Gris
Primary 1
Primary 2
Primary 3
Primary 4
Primary 5
Primary 6
Gray 1
Gray 2
Gray 3
Gray 4
White
Remarque : les numéros Primaire 1, Primaire 2, etc. font référence aux couleurs trouvées dans l'échantillon de couleur global . Vous pouvez définir la couleur de fond d'un élément en utilisant les classes : "BG Primary 1", "BG Primary 2" etc.

Dégradés

Dégradés basés sur les couleurs primaires
Gradient 1
Gradient 2
Gradient 3
Gradient 4
Gradient 5
Gradient 6
Gradient 7
Gradient 8
Gradient 9
Remarque : les chiffres Gray 1, Gray 2 etc. se réfèrent aux couleurs trouvées dans l'échantillon de couleur global . Vous pouvez définir la couleur de fond d'un élément en utilisant les classes : "BG Gray 1", "BG Gray 2" etc.

Typographie

Titres, corps et autres éléments de texte courants.

Display 1

Display 2

Display 3

Display 4

Heading one

Heading two

Heading three

Heading four

Heading five
Heading Six
Lead Text
Lead Link
Body Text
Text Link
Small Text
Small Link

Icônes - Interface

Iconographie de l'interface commune

Icônes - Réseaux sociaux

Icônes communes des réseaux sociaux

Icônes - Général

Illustrations utilisées tout au long du modèle
Remarque : Utilisez la classe « Circle Large » en conjonction avec les classes Color pour obtenir le résultat ci-dessus.

Boutons

Variations de composant, de style de texte et de taille

Saisies de texte

Variations de taille et d'état pour les entrées de texte
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
* texte d'indication
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Sélectionnables

Cases à cocher, radios et listes déroulantes de sélection
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Menus déroulants
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Avatars

Représenter les utilisateurs tout au long de l'interface

Insignes

Combinez avec d'autres composants pour afficher des métadonnées et des icônes
Éonnante
Fantastique
Nouveau
Wow
Blam
Remarque : Utilisez la classe « Badge » en conjonction avec les classes de couleur pour obtenir le résultat ci-dessus.

Panneaux

Composant structurel pour l'affichage du contenu en boîte

Titre du panneau

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Texte du bouton

Panneau avec image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.