Fondations
Ce guide de style est une collection d’éléments et de composants avec les couleurs de la marque et la typographie appliquées. Pour changer des couleurs ou des valeurs, utilisez le panneau Variables (V).
Le site est basé sur le framework Flowkit – lisez la documentation pour en savoir plus sur le framework.
Couleur
Foundation colors est un ensemble de variables qui doivent être appliquées aux classes d’éléments. Mettez à jour les couleurs en sélectionnant un élément (panneau de style) ou dans le panneau des variables
Couleur d’arrière-plan
Les classes de section et les classes utilitaires d’arrière-plan utilisent des variables pour ajuster la couleur d’arrière-plan et de police des éléments de texte imbriqués.
Titre
Titre
Titre
Titre
Titre
Titre
Typographie
Les titres, les étiquettes et les classes sont reliés par les variables, ce qui aide à les maintenir cohérents.
La voix d’une marque
Les titres incarnent la voix d’une marque
Les titres incarnent la voix d’une marque
Les titres incarnent la voix d’une marque
Les titres incarnent la voix d’une marque
Les titres incarnent la voix d’une marque
Les titres incarnent la voix d’une marque
Une police bien conçue est plus qu’une simple collection de lettres — c’est l’empreinte d’un grand design, portant en elle l’essence d’une marque, un message et une ambiance.
Une police bien travaillée est plus qu’une simple collection de lettres — c’est l’empreinte digitale d’un grand design, portant en elle l’essence d’une marque, un message et une ambiance.
Une police bien travaillée est plus qu’une simple collection de lettres — c’est l’empreinte digitale d’un grand design, portant en elle l’essence d’une marque, un message et une ambiance.
Une police bien conçue est plus qu’une simple collection de lettres — c’est l’empreinte digitale d’un grand design, portant en elle l’essence d’une marque, un message et une ambiance.
Une police bien conçue est plus qu’une simple collection de lettres — c’est l’empreinte digitale d’un grand design, portant en elle l’essence d’une marque, un message et une ambiance.
Jamais auparavant autant de gens n’avaient eu autant d’accès à un moyen aussi puissant de construire des entreprises; le partage de connaissances, d’idées et de créativité; et la création de communautés.
- Utilisez l’espace blanc pour améliorer la lisibilité du texte.
- Rendez la typographie adaptée à toutes les tailles d’écran.
- Utilisez un bon espacement des lignes pour une lisibilité facile.
- Utilisez l’espace blanc pour améliorer la lisibilité du texte.
- Rendez la typographie adaptée à toutes les tailles d’écran.
- Utilisez un bon espacement des lignes pour une lisibilité facile.
Espacement
Les styles d’espacement tels que les marges, les remplissages et les espaces sont utilisés par un ensemble prédéfini de variables basées sur le REM et appliqués directement aux classes de composants.
Ensemble de variables utilisées pour les plans en grille et flexibles.
Lisez la documentation
Pour garder un espacement cohérent, la plupart des éléments et composants du texte ont un espacement appliqué sous forme de marge ou de remplissage.
Les titres incarnent la voix d’une marque
Composantes
Boutons
Chaque type de boutons a deux propriétés : la couleur et la taille.
Bouton de texte
Lien
Balises
Chaque type d’étiquette a deux propriétés : la couleur et la taille.
Images
Par défaut, la balise image et la classe image ont le rayon appliqué.
La taille de l’avatar peut être ajustée avec des classes de combo.
Icônes
Formes
Cartes
Un titre différent, pour que ça ne paraisse pas répétitif.
Un titre différent, pour que ça ne paraisse pas répétitif.
Un titre différent, pour que ça ne paraisse pas répétitif.
Un titre différent, pour que ça ne paraisse pas répétitif.
Un titre différent, pour que ça ne paraisse pas répétitif.
Un titre différent, pour que ça ne paraisse pas répétitif.
Un titre différent, pour que ça ne paraisse pas répétitif.
Aenean faucibus et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Un titre différent, pour que ça ne paraisse pas répétitif.
Aenean faucibus et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Un titre différent, pour que ça ne paraisse pas répétitif.
Aenean faucibus et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Un titre différent, pour que ça ne paraisse pas répétitif.
Aenean faucibus et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Un titre différent, pour que ça ne paraisse pas répétitif.
Aenean faucibus et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Un titre différent, pour que ça ne paraisse pas répétitif.
Aenean faucibus et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Un titre différent, pour que ça ne paraisse pas répétitif.
Aenean faucibus et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Un titre différent, pour que ça ne paraisse pas répétitif.
Aenean faucibus et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Un titre différent, pour que ça ne paraisse pas répétitif.
Aenean faucibus et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Un titre différent, pour que ça ne paraisse pas répétitif.
Aenean faucibus et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Un titre différent, pour que ça ne paraisse pas répétitif.
Aenean faucibus et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Un titre différent, pour que ça ne paraisse pas répétitif.
Aenean faucibus et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Un titre différent, pour que ça ne paraisse pas répétitif.
Aenean faucibus et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Slider
Accordéon
Menu déroulant
Texte enrichi
Cap 1
Cap 2
Cap 3
Cap 4
Cap 5
Cap 6
L’élément texte enrichi vous permet de créer et de formater des titres, paragraphes, guillemets, images et vidéos au même endroit, sans avoir à les ajouter et formater individuellement. Il suffit de double-cliquer et de créer du contenu facilement.
- L’élément texte enrichi vous permet de créer et de formater des éléments
- Liste Premier Niveau
- Liste de deuxième niveau
- Liste Premier Niveau
- Un élément de texte enrichi peut être utilisé avec du contenu statique ou dynamique.
- L’élément texte enrichi vous permet de créer et de formater des éléments
Un élément de texte enrichi peut être utilisé avec du contenu statique ou dynamique. Pour le contenu statique, il suffit de le déposer dans n’importe quelle page et de commencer à éditer. Pour le contenu dynamique, ajoutez un champ de texte enrichi à n’importe quelle collection, puis connectez un élément de texte enrichi à ce champ dans le panneau des paramètres. Voilà!
Séparateur
Les séparateurs sont de deux types : horizontaux et verticaux
