Card

import {Card} from '@gravity-ui/uikit';

§Descripción

Card es un componente reutilizable de React que básicamente es un contenedor similar a una tarjeta con estilos y características personalizables. Se utiliza para mostrar información o contenido de una manera visualmente atractiva y bien organizada.

§Apariencia

Card se puede mostrar con múltiples combinaciones de estilos:

• theme: normal, info, success, warning, danger, o utility.
• type: selection, action, o container.
• view:outlined o clear, o outlined filled, o raised (según el type parámetro).

§Tema

Este parámetro se usa para especificar el estilo del tema de la tarjeta. Determina la combinación de colores y el aspecto de la carta.

Al especificar diferentes valores de tema, puede personalizar la apariencia Card visual para que coincida con su propósito y el estilo que necesita.

• normal: Tema normal/predeterminado de la tarjeta.
• info: Tema para mostrar información neutra.
• success: Tema para mostrar contenido positivo o afirmativo.
• warning: Tema para mostrar advertencias.
• danger: Tema para mostrar el contenido relacionado con problemas o errores críticos.
• utility: Tema para mostrar consejos útiles.

const style = {
    width: '120px';
    height: '120px';
    display: 'flex';
    alignItems: 'center';
    justifyContent: 'center';
}

<Card style={style} theme="normal" size="l">Normal</Card>
<Card style={style} theme="info" size="l">Info</Card>
<Card style={style} theme="success" size="l">Success</Card>
<Card style={style} theme="warning" size="l">Warning</Card>
<Card style={style} theme="danger" size="l">Danger</Card>
<Card style={style} theme="utility" size="l">Utility</Card>

§Tipo

Este parámetro se usa para definir el tipo del Card componente. Permite personalizar la apariencia y el comportamiento de la tarjeta.

• container: Tarjeta que actúa como contenedor de otros elementos. Proporciona un diseño estructurado para el contenido.
• action: Tarjeta con un elemento interactivo, como un botón, que desencadena una acción al hacer clic en ella.
• selection: Tarjeta en la que se puede seleccionar o hacer clic para realizar una acción específica.

const style = {
    width: '120px';
    height: '120px';
    display: 'flex';
    alignItems: 'center';
    justifyContent: 'center';
}

    <Card style={style} view="outlined" type="container" size="l">Container</Card>
    <Card style={style} view="outlined" type="action" size="l">action with onClick</Card>
    <Card style={style} view="outlined" type="selection" size="l">Selection</Card>

§Ver

Este parámetro se usa para especificar la Card vista o el estilo de diseño. Permite personalizar la apariencia y la disposición del contenido de la tarjeta.

• clear: Sin estilo.
• outlined: Aplica un borde fino para resaltar el contenido de la tarjeta.
• filled: Rellena el contenido de la tarjeta.
• raised: Aplica una sombra para levantar ligeramente el contenedor.

const style = {
    width: '120px';
    height: '120px';
    display: 'flex';
    alignItems: 'center';
    justifyContent: 'center';
}

    <Card style={style} view="clear" type="container" size="l">Clear</Card>
    <Card style={style} view="outlined" type="container" size="l">Outlined</Card>
    <Card style={style} view="filled" type="container" size="l">Filled</Card>
    <Card style={style} view="raised" type="container" size="l">Raised</Card>

§Propiedades

§API CSS