Styliser l'icône à l'intérieur d'un composant Card

Le composant Card n’a pas de props pour styliser son icône, comme l’ajout d’une couleur de fond, de coins arrondis ou de padding. Pour personnaliser les icônes de carte tout en continuant à utiliser le composant Card, ciblez l’icône avec du CSS personnalisé.

Cibler l’icône de la carte

Les icônes de carte sont rendues avec l’attribut data-component-part="card-icon". Le sélecteur d’élément général icon ne correspond pas aux icônes à l’intérieur des cartes, donc une règle comme card icon { } n’a aucun effet. Utilisez plutôt le sélecteur d’attribut de données :

styling.css

[data-component-part="card-icon"] {
  background-color: var(--gray-100);
  border-radius: 0.5rem;
  padding: 0.5rem;
}

Limitez la règle aux cartes avec .card [data-component-part="card-icon"] si le sélecteur entre en conflit avec d’autres styles. Enregistrez la règle dans n’importe quel fichier .css de votre répertoire de contenu, c’est-à-dire le dossier de votre dépôt qui contient votre fichier docs.json. Mintlify charge le fichier automatiquement sur chaque page. Consultez Scripts personnalisés pour comprendre le chargement du CSS personnalisé et la liste complète des sélecteurs disponibles.

Autres parties de la carte

Les cartes exposent des attributs data-component-part supplémentaires que vous pouvez styliser de la même manière, notamment card-title, card-content, card-image et card-cta. Consultez Scripts personnalisés pour la liste complète.

Sujets connexes

Icônes Navigation Playground

⌘I

​Cibler l’icône de la carte

​Autres parties de la carte

Cibler l’icône de la carte

Autres parties de la carte