Aller au contenu
Mistral Studio

Modules : mettre en avant services, méthode et réalisations

Les modules qui montrent ce que vous faites et comment : grille de services, mises en avant, cartes de valeurs, étapes, tableau de méthode, études de cas.

Mis à jour le 23 août 2026 · 6 min de lecture · S'applique à partir de la version 1.0.0

Douze modules présentent votre offre, votre méthode et vos réalisations. Tous suivent les conventions communes : un groupe Display en premier, un titre bicolore, un jeu de couleurs et un rembourrage de section dans l'onglet Style.

Services et offres

Services grid with hover highlight and tags

Vos expertises en trois dispositions : des cellules à filets fins qui se remplissent de la couleur d'accent au survol (avec un balayage lumineux optionnel), des cartes détaillées avec jusqu'à quatre puces et une ligne de preuve, ou des pilules compactes. Chaque service reçoit une icône (18 au choix), un nom, une courte description, jusqu'à trois étiquettes, des puces, une ligne de preuve et son propre lien. Deux ou trois colonnes ; Card link : seul le lien est cliquable, ou toute la carte.

Feature teaser with image card and key figures

Un argumentaire court à côté d'une grande carte image : surtitre, titre bicolore, description, une rangée optionnelle de chiffres clés (valeur + libellé) et un bouton. La carte image porte une étiquette d'angle et peut pointer vers une page. Carte à droite ou à gauche. Le template d'étude de cas l'utilise comme bloc « projet suivant ».

Expandable feature rows with two-tone titles

Des rangées à filets fins, chacune avec un badge, un titre bicolore, une courte description et un bouton « plus » accentué qui déplie une réponse plus longue en texte enrichi. Behavior : ouvrir une rangée à la fois, ouvrir la première au chargement. Désactivez Allow rows to unfold pour en faire une liste statique de fonctionnalités.

Checklist in two columns

Ce qui est inclus dans une offre ou une mission : une liste d'éléments sur une ou deux colonnes de rangées à filets fins, chacune ouvrant sur un disque coché (icône : coche, plus, étoile, flèche, cible, étincelles). Titre au-dessus de la liste ou dans une colonne latérale, avec un bouton optionnel.

Numbered value cards

Un en-tête de section suivi de cartes numérotées à filets fins — principes, engagements ou étapes. Les numéros sont générés automatiquement (01, 02, 03…) ou écrits à la main sur chaque carte. Deux à quatre colonnes ; bordure des cartes (contour fin, filet supérieur seul, aucune) et rayon.

Méthode et processus

Process steps with large numerals

Trois ou quatre étapes côte à côte sous un filet (accent, filet neutre, aucun), chacune ouvrant sur un grand numéro ou un libellé libre comme une plage de dates (Step numbering : automatique ou écrit dans chaque étape). Fonctionne sur fond clair ou sombre — la section « Method steps with frequently asked questions » utilise le panneau sombre.

Method board with animated kanban columns

Votre méthode de livraison présentée comme un tableau kanban : des colonnes en escalier qui s'allument l'une après l'autre, chacune avec sa durée, ses cartes de tâches (statut : terminé, en cours, à venir) et le livrable en bas. Le tableau avance seul (Seconds per column, 4,6 par défaut) et s'immobilise quand un visiteur le pointe. Les libellés de statut sont modifiables, donc traduisibles.

Réalisations et écosystème

Case studies grid with tag filters

Une liste d'études de cas sur trois colonnes avec une barre de filtres optionnelle construite à partir des étiquettes d'expertise saisies sur chaque élément. Chaque étude de cas a une image, une étiquette d'expertise, un nom, un secteur, une année, un chiffre clé, une récompense et un lien. Trois dispositions : Grid (secteur et année), Proof (trois cartes légendées de leur chiffre clé — utilisée dans la section « Case study proof with customer quote ») ou Awards (affiche la récompense obtenue). Les filtres s'appliquent dans le navigateur, sans rechargement, et le nombre de résultats est annoncé aux lecteurs d'écran.

Trois études de cas phares dans un panneau accentué pleine largeur : image plus carte blanche, la colonne du milieu inversée (ou toutes les cartes sous leur image). La mise en valeur passe d'une colonne à la suivante toute seule (3,2 secondes par défaut) et se met en pause au survol ou au focus. Dans le groupe de style Background, Color behind the top corners et Color behind the bottom corners définissent la couleur visible autour des coins arrondis du panneau : accordez-les aux sections du dessus et du dessous.

Technology ecosystem with orbiting logos

Une section sombre qui associe des points forts (titre + description) à deux anneaux de badges d'outils en orbite autour de votre marque. Chaque badge est un monogramme teinté de la couleur de marque de l'outil ; réglez un nœud sur Large pour le mettre en avant, ou téléversez une image de logo pour remplacer le monogramme. Anneau intérieur jusqu'à 6 outils, anneau extérieur jusqu'à 8 ; rayon et vitesse de rotation réglables. Sous 1160 px, les anneaux deviennent une grille statique. Le halo radial peut suivre le pointeur.

Liens et boutons

Un bandeau compact de liens associés sous forme de pilules : un libellé en capitales, puis une pilule par destination avec une icône optionnelle et une flèche. Pratique en bas d'une page de service ou d'étude de cas (« Expertise suivante », « Voir aussi »). Libellé à côté ou au-dessus des pilules ; pilules contourées, en lavis accentué ou de la couleur de la page ; filet fin optionnel au-dessus du bandeau.

Call to action button with arrow icon

Un bouton seul utilisant les styles de boutons du theme : libellé, lien, icône optionnelle (plus de vingt au choix) avant ou après le libellé, style (primary, secondary, outline, ghost, inverted), taille (petit, moyen, grand), pleine largeur, alignement. Déposez-le dans une colonne, sous un module de texte, ou partout où un module n'a pas de bouton propre.

Voir aussi