Tarjeta

El componente Card se usa para dividir el contenido en bloques semánticos. En esencia, es un contenedor para agrupar contenido, con la opción de colapsarlo.

§Uso

El componente viene en cuatro tipos.

§Con temas

Las tarjetas con temas pueden cambiar el color del fondo o del trazo. A menudo se usa para describir el error/éxito de un bloqueo o una advertencia de usuario. Esta tarjeta se usa más comúnmente para combinar contenido en su color predeterminado (normal). El parámetro theme especifica el tema de la tarjeta, mientras que el parámetro View determina si la carta está acariciada o rellena.

Tienes las siguientes opciones para las tarjetas de este tipo (contenedor):

Ver: Delineado y rellenado

Tema: Normal, información, éxito, advertencia, peligro (color)

• Normal: el estado básico de la carta con un trazo, que se usa en la mayoría de los casos.
• Información: se utiliza para proporcionar información al usuario
• Éxito: se usa para indicar eventos con resultados positivos.
• Advertencia: se usa para mostrar una advertencia
• Danger es un contenedor diseñado para atraer la mayor atención del usuario; puede activarse por la pérdida de datos, la interrupción del servicio, etc.

§Tarjeta seleccionable

Las tarjetas de esta categoría requieren que elijas una de las opciones disponibles. La carta tiene tres estados: normal, seleccionada y suspendida.

Tienes las siguientes opciones para cartas de este tipo (tipo = selección):

seleccionado: verdadero /falso

deshabilitado: verdadero /falso

§Levantado

Se usa para agrupar contenido, de forma similar a Normal en el grupo Con temas. La principal diferencia es que este tipo de carta tiene una sombra. Recomendamos usarla en situaciones en las que sea necesario resaltar la tarjeta. Por ejemplo, con los widgets:

Recuerda dejar suficiente espacio entre estas cartas para que la sombra no caiga sobre la carta contigua.

En el tamaño L, la tarjeta tiene una «sombra más aireada», por lo que al usar este tamaño, se recomienda elegir un espacio ligeramente mayor entre las tarjetas en comparación con el tamaño M.

tipo: contenedor;

vista: elevada

§Criado con acción

Similar a la tarjeta anterior, pero requiere hacer clic en la tarjeta. A diferencia de la carta levantada, hay un estado de desplazamiento, pero no un estado de «opción seleccionada», como en la carta seleccionable. Recomendamos usarlo cuando necesite proporcionar al usuario una opción de selección que contenga descripciones detalladas.

Ten en cuenta que al hacer clic en él se redirigirá al usuario a una página anidada. Por lo tanto, los usuarios deben esperar este comportamiento de la tarjeta. (debe quedar claro en el diseño de la tarjeta)

Tienes las siguientes opciones para cartas de este tipo (tipo = acción):

deshabilitado: verdadero /falso

§Tamaño

Tallas M y L, usando el ejemplo de las cartas con una sombra (en relieve)

Disponible en dos tamaños: M y L. El radio de las esquinas depende del tamaño: Radio L (8px) y radio 2XL (16px). La elección del tamaño depende de la ubicación, el relleno y el tamaño de los controles de página. Por ejemplo, si la página usa el tamaño L para las entradas, los botones y otros elementos, la tarjeta también debe tener el tamaño L.

La anchura y la altura del componente vienen determinadas por su contenido. El tamaño mínimo se puede seleccionar con un ligero relleno del contenido. El tamaño máximo puede ser igual al 100% del ancho de la página.

§Casos de uso

Ejemplo de uso de la tarjeta:

1 - temas con relleno para informar al usuario,

2: tarjeta con un esquema para agrupar el contenido