Skip to main content
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.

​
Apuntar al icono de la tarjeta

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:
styling.css
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.

​
Otras partes de la tarjeta

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.

Temas relacionados

IconosTarjetasNavegación