Aplicar estilo al icono dentro de un componente Card

El componente Card no tiene props para dar estilo a su icono, como añadir un color de fondo, esquinas redondeadas o padding. Para personalizar los iconos de las tarjetas sin dejar de usar el componente Card, apunta al icono con CSS personalizado.

Los iconos de las tarjetas se renderizan con el atributo data-component-part="card-icon". El selector de elemento general icon no coincide con los iconos dentro de las tarjetas, por lo que una regla como card icon { } no tiene efecto. Usa el selector de atributo de datos en su lugar:

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

Limita la regla a las tarjetas con .card [data-component-part="card-icon"] si el selector entra en conflicto con otros estilos.

Guarda la regla en cualquier archivo .css de tu directorio de contenido, que es la carpeta de tu repositorio que contiene tu archivo docs.json. Mintlify carga el archivo automáticamente en todas las páginas. Consulta Scripts personalizados para saber cómo funciona la carga de CSS personalizado y ver la lista completa de selectores disponibles.

Las tarjetas exponen atributos data-component-part adicionales a los que puedes dar estilo de la misma manera, incluidos card-title, card-content, card-image y card-cta. Consulta Scripts personalizados para ver la lista completa.