.png)
Fundex est un étonnant modèle de flux Web pour les entreprises de conseil ou d'investissement. Conçu pour les entreprises de conseil, ce template est parfait pour les propriétaires d'entreprises et les concepteurs qui veulent créer un site web moderne et attrayant qui présente leurs services d'investissement et de conseil.
Il a été conçu et développé par l'équipe d'experts créatifs d'EGO Creative Innovations.
Sur cette page, vous trouverez des instructions détaillées sur la façon d'utiliser les styles préconstruits pour que votre site final soit magnifique !
TheSprkl utilise les échelles Neutre, Primaire, Accent et Sémantique (Succès, Avertissement, Erreur et Info). Il n'est pas nécessaire d'utiliser ou de personnaliser toutes les couleurs. Vous pouvez commencer par ajouter des composants à votre mise en page et modifier les nuanciers pour ces composants spécifiques.
Pour styliser les éléments, vous pouvez utiliser une classe liée à une couleur spécifique. Toutes les classes de couleurs d'arrière-plan ressemblent à BGC Primary-900, où BGC=BackgroundColor Primary=ColorGroup et 900=ColorLevel. Vous trouverez ci-dessous toutes les classes de couleurs de texte disponibles dans le système.
Les couleurs primaires apparaissent le plus souvent dans le site web et ses composants. Elles sont utilisées pour les actions importantes, les composants, les blocs, etc. Vous pouvez créer des combinaisons de couleurs plus complexes en ajoutant des couleurs d'accentuation.
Les couleurs neutres sont principalement utilisées pour les éléments d'interface tels que les textes, les séparateurs, les bordures et les arrière-plans neutres.
Couleurs sémantiques utilisées pour fournir un retour visuel sur les données saisies par les utilisateurs, telles que les erreurs, les avertissements, les messages d'information, les messages de réussite, etc. Il est important de noter que vous pouvez utiliser ces couleurs dans tous les autres cas.
Les gammes de couleurs noir et blanc ont été déplacées dans un groupe distinct, mais peuvent également être utilisées pour des éléments d'interface tels que des textes, des séparateurs, des bordures et des arrière-plans neutres.
Pour styliser des éléments de texte, vous pouvez utiliser une classe liée à une couleur spécifique. Toutes les classes de couleurs de texte ressemblent à TC Primary-900, où TC=TextColor Primary=ColorGroup et 900=ColorLevel. Vous trouverez ci-dessous toutes les classes de couleurs de texte disponibles dans le système.
La hiérarchie typographique vise à créer un contraste entre les éléments les plus importants et les moins importants du texte. Le contraste est créé en ajustant les éléments typographiques, notamment les polices de caractères, leur taille, leur style et leur couleur, ainsi que leur alignement.
Corps L
Corps M
Corps S
"Vous savez que vous êtes amoureux quand vous ne pouvez pas vous endormir parce que la réalité est finalement meilleure que vos rêves.
L'élément de texte enrichi vous permet de créer et de mettre en forme des titres, des paragraphes, des guillemets, des images et des vidéos en un seul endroit, au lieu d'avoir à les ajouter et à les mettre en forme individuellement. Il suffit de double-cliquer pour créer facilement du contenu.
"Vous savez que vous êtes amoureux quand vous ne pouvez pas vous endormir parce que la réalité est finalement meilleure que vos rêves.
Un élément de texte enrichi peut être utilisé avec un contenu statique ou dynamique. Pour le contenu statique, il suffit de le déposer dans n'importe quelle page et de commencer à l'éditer. Pour un 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 de configuration. Et voilà !
Edition de contenu statique et dynamique
Edition de contenu statique et dynamique
Vous pouvez définir l'alignement des éléments textuels en ajoutant un nom de classe ci-dessous.
Texte aligné à droite
Texte aligné à gauche
Alignement du texte au centre
Alignement du texte justifié
Les classes d'espacement vous fournissent un ensemble de classes qui vous aideront à construire et à maintenir un espacement cohérent entre les composants, les blocs, les sections, etc.
Utiliser l'échelle d'espacement pour les composants ou les sections. Cette échelle est appliquée et utilisée dans tous les composants et sections. Espacement disponible dans le système :
2px
4px
8px
12px
16px
24px
32px
48px
64px
120px
Les classes d'espacement sont représentées par les classes Stack, Inline, Indent, Inset, Section et les classes de groupe G Stack, G Inline. Utilisez-les pour assurer un espacement approprié entre les composants, les blocs et les sections.
Stack est une classe globale qui ajoute une marge inférieure. Vous trouverez ci-dessous un tableau des échelles existantes.
Inline est une classe globale qui ajoute une marge droite. Vous trouverez ci-dessous un tableau des échelles inline existantes.
Indent est une classe globale qui ajoute une marge gauche. Vous trouverez ci-dessous un tableau des échelles d'indentation existantes.
Inset est une classe globale qui ajoute une marge égale autour de l'élément. Vous trouverez ci-dessous un tableau des échelles d'insertion existantes.
Les groupes d'espacement tels que G Stack et G Inline sont des classes globales utilisées pour ajouter un espacement à l'intérieur des groupes d'éléments.
Utilise la boîte à outils (direction verticale) pour créer de l'espace entre les groupes d'éléments.
Utilise la boîte à outils (direction horizontale) pour créer de l'espace entre les groupes d'éléments.
Les classes de section permettent de définir des marges supérieures et inférieures pour une section entière.
Sprkl propose un large éventail d'options pour arrondir les angles. Vous pouvez définir des angles autour du conteneur ou sur un côté particulier.
Vous pouvez définir des angles autour du conteneur, avec les classes ci-dessous.
Vous pouvez placer des coins en haut du conteneur, avec des classes en dessous.
Les boutons sont l'un des éléments les plus importants, car ils permettent aux utilisateurs de communiquer avec le système et d'obtenir le retour d'information et les résultats escomptés.
TheSprkl prend en charge une grande variété de styles de boutons et peut servir à de nombreuses fins. Chaque groupe de boutons prend en charge différentes tailles et différents types de boutons (boutons icônes, fab). Tous les groupes de boutons sont classés par ordre d'importance (boutons primaires, secondaires, de contour, fantômes, tertiaires).
Les styles généraux appliqués à la classe Bouton et à tous les boutons définissent une largeur minimale, de sorte que l'aspect des boutons soit cohérent, même si le texte est court. Pour obtenir des boutons de taille différente, ajoutez la classe combo " Taille" après la classe " Bouton ", par exemple " Taille du bouton L".
Les liens sont des outils utiles qui rendent l'information plus structurée et plus large. Vous pouvez marquer le lien de différentes manières : souligné, encadré, par défaut. Cette démo vous permet d'avoir un aperçu du composant lien, de ses variations et de ses options de configuration.
Pour styliser les liens, utilisez la classe globale Link et ajoutez l'une des classes combinées Dark, Pale ou Light. Les mêmes classes peuvent être appliquées aux blocs de liens et affecteront non seulement le texte, mais aussi les icônes. Notez que chaque style a ses propres états et que, pour l'instant, les états des styles n'affectent pas les icônes.
Les avatars, également connus sous le nom de photo de profil ou userpic, sont une représentation graphique d'un utilisateur, de son personnage ou de sa persona. Les avatars sont utilisés pour afficher une représentation miniature d'une personne ou d'une entreprise dans l'interface. Les avatars sont très répandus dans la conception matérielle et sont utilisés presque partout, des tables aux menus de dialogue.
Vous pouvez choisir l'option qui vous convient le mieux :
Six tailles: XXS, XS, S, M, L, XL ;
Troistypes: icône, image, lettre ;
Deuxvariantes: circulaire et carré arrondi.
Vous pouvez rapidement personnaliser chaque taille d'un avatar grâce au paramètre "taille".
Fournir des messages de retour d'information contextuels pour les actions typiques de l'utilisateur grâce à la multitude de messages d'alerte disponibles et flexibles.
Les alertes sont des notifications qui conduisent à des informations importantes liées à l'état des applications ou des appareils, et qui déclenchent souvent une demande de communication. Elle peut contenir un titre, un message facultatif et une ou plusieurs parties. L'alerte offre 4 niveaux de gravité avec une couleur et une icône uniques.
Informez votre utilisateur que son action a eu un résultat ou affichez un autre texte informatif.
Permet à l'utilisateur de savoir que son action a atteint l'objectif fixé.
Montrer l'échec après l'action.
Tout contenu important.
Un formulaire est un ensemble d'éléments connexes tels que des entrées, des champs de texte, etc. disposés dans un ordre donné.
Les champs de sélection ne sont préparés que pour les formulaires Webflow. Dans Figma, les champs de sélection sont remplacés par des listes déroulantes.
Les menus déroulants sont de petites fenêtres qui s'ouvrent à la demande. Ils permettent aux utilisateurs d'accéder à du contenu et à des actions supplémentaires sans encombrer la page. Ils sont généralement utilisés pour la navigation ou les formulaires.
Styles généraux appliqués au lien déroulant. Pour obtenir une taille de liste déroulante différente, veuillez ajouter la classe combo de taille après la classe de lien de liste déroulante, par exemple Lien de liste déroulante Taille L.
.png)