Styliser vos cartes.
Donnez à vos cartes un aspect adapté à votre site : un jeu de couleurs depuis le Type de la carte, des coins arrondis et une ombre depuis le panneau Style. À la fin, vous avez une carte répétable sur une ligne pour des fonctions, des membres d’équipe ou des tarifs. Pour d’abord poser une carte sur la page, voir Ajouter une carte.
La vidéo suit les étapes ci-dessous : elle donne à une carte un aspect clair, des coins ronds et une ombre douce.
Styliser une carte
- Survolez la carte, ouvrez More et choisissez Settings.
- Sous Type, choisissez Light.
- Ouvrez le panneau Style.
- Réglez Border radius sur 8.
- Réglez Drop shadow sur 2.
- Cliquez sur Save.
Ce que vous voyez
La carte a un fond clair, des coins arrondis et une ombre douce. Sa barre Header se trouve en haut, son Title ouvre le corps, et les éléments ajoutés dedans suivent en dessous.
Un Type colore toute la carte, pas seulement l’en-tête. Primary, Secondary, Success, Info, Warning, Danger et Dark remplissent la carte de cette couleur du thème et mettent le texte en blanc. Light donne un fond clair avec le texte normal. Default laisse la carte à votre thème.
Paramètres
| Paramètre | Où | Rôle |
|---|---|---|
| Header | General | Texte dans une barre en haut de la carte ; laissez vide pour aucune barre |
| Title | General | Un titre en haut du corps de la carte |
| Type | General | Le jeu de couleurs de toute la carte ; défaut : Default |
| Background, Font color | Style | Vos propres couleurs, quand Type vaut Default |
| Border radius | Style | Coins arrondis, en pixels |
| Drop shadow | Style | Profondeur, de 1 à 5 |
| Border (modèle de boîte), Border style, Border color | Style | Un cadre sur un ou plusieurs côtés |
Motifs de cartes
- Flat card : Border style Solid, une Border color claire, Border radius 4, sans ombre.
- Elevated card : Drop shadow 2, Border style None, Border radius 8.
- Highlighted card : mettez le côté gauche de Border dans le modèle de boîte à 4, Border style Solid et une Border color d’accentuation.
- Card that lifts : Drop shadow 1 dans Style et 4 dans Hover style ; voir Faire réagir les éléments au survol.
Cartes sur une ligne
Pour une grille de cartes de fonctions, de membres d’équipe ou de tarifs :
- Ajoutez une ligne et choisissez une mise en page à trois ou quatre colonnes égales.
- Ajoutez une carte à chaque colonne et donnez à chaque carte les mêmes valeurs Type et Style.
- Ouvrez le menu More de la ligne, choisissez Settings et activez Equal-height columns.
Les colonnes s’alignent, mais chaque carte reste à la hauteur de son contenu. Gardez le texte de chaque carte à peu près de la même longueur, pour que les cartes finissent à la même hauteur. Pour un tableau de tarifs, mettez en avant le plan recommandé avec un autre Type ou une Drop shadow plus profonde.
Si vous ne voyez pas le style
- Background ou Font color dans le panneau Style est sans effet. Un Type autre que Default définit les couleurs de la carte avec des classes du thème qui gagnent sur le panneau Style. Réglez Type sur Default et choisissez vos propres couleurs.
- Du texte blanc sur une carte colorée est dur à lire. Les couleurs Warning et Info de beaucoup de thèmes sont pâles, et ces types mettent toujours le texte en blanc. Choisissez un Type plus sombre, ou Light, qui garde la couleur de texte normale.
- L’ombre ne s’affiche pas. Drop shadow vaut 0, ce qui signifie aucune ombre. Réglez-le sur 1 ou plus.
Et ensuite ?
- Ajouter une carte : ajouter une carte et la remplir d’éléments.
- Faire réagir les éléments au survol : laisser les cartes se soulever quand les visiteurs les pointent.
- Utiliser les couleurs de votre marque : garder les couleurs des cartes alignées sur le reste du site.