Saltar al contenido principal

wiki-Card

Ver en Git


Card

El componente Card es utilizado para crear una tarjeta con soporte para contenido personalizado, borde, sombra, título y otros estilos opcionales. Es ideal para mostrar contenido en forma de tarjeta que puede incluir texto, imágenes o cualquier otro tipo de contenido.

Referencia de la API

PropiedadTipoDescripción
shadowedboolean(Opcional) Aplica una sombra al contorno de la tarjeta para darle un efecto tridimensional.
borderboolean(Opcional) Si es true, agrega un borde alrededor de la tarjeta.
classNamestring(Opcional) Clase CSS adicional para personalizar aún más el estilo de la tarjeta.
styled'bordered'(Opcional) Aplica un estilo predefinido de tarjeta con borde.
titleElementReactElement(Opcional) Un elemento React personalizado que se usará como título en lugar de un título de texto.
childrenReactNodeEl contenido de la tarjeta.
aura-teststring(Opcional) Atributo usado para pruebas (aura).
styleCSSProperties(Opcional) Estilo CSS adicional que se aplicará a la tarjeta.

Ejemplo de uso

import { Card } from '@auravant/ui-kit';

<Card shadowed border title="Card Title">
<p>This is the content of the card.</p>
</Card>