Tarjetas

Un componente card o tarjeta es un elemento de interfaz de usuario que se utiliza para presentar información de manera atractiva y organizada en un formato de bloque rectangular.

Vista Previa

Figma

Usos

Todas las cards pueden contener ilustraciones del sistema o una imagen que el diseñador podrá incluir o excluir de la información de la cards, además esta imagen puede ir a sangre o con un margen interno dentro de la tarjeta.

Cuándo usar

Para presentar información de manera atractiva y organizada: Las tarjetas son una excelente forma de presentar información de manera atractiva y concisa.

Para crear una galería de contenidos: Las tarjetas se pueden utilizar para crear una galería de contenidos, como noticias, servicios o eventos.

Para proporcionar acceso a más contenido: Las tarjetas a menudo tienen interacciones, como hover o click, que permiten al usuario acceder a más información o contenido.

Cuándo no usar

Cuando la información no es lo suficientemente importante o atractiva: Las tarjetas deben utilizarse para presentar información importante o atractiva de manera concisa. Si la información no cumple con estos criterios, es posible que no sea adecuado utilizar una tarjeta.

Cuando se requiere un formato de presentación más detallado. Las tarjetas suelen ser breves y concisas, por lo que pueden no ser adecuadas para presentar información detallada o compleja.

Cuando no hay suficiente espacio: Las tarjetas ocupan un espacio limitado en la pantalla, por lo que pueden no ser adecuadas si no hay suficiente espacio disponible.

Comportamiento

Tamaños

Tanto en las cards interactivas como en las informativas, nos encontramos con cuatro tamaños:

100%, ocupando el ancho máximo del contenedor donde se coloque.

1/2, 1/3 y 1/4, estas medidas ocupan la mitad, un tercio o un cuarto de la anchura de la pantalla del escritorio.

Recordar que las cards así como todos los componentes del sistema, tienen su versión responsive, tanto en mobile como en tablet.

Tipologías

Imagen de componente tarjeta interactiva

Interactivas

Imagen de componente tarjeta informativa

Informativas

Contenidos

Ilustración

Imagen

Solo texto

Orientación

Vertical

Horizontal

Versión

Desktop

Visualización del componente tarjeta horizontal para móvil

Mobile

Responsive

Tablet

Visualización del componente tarjeta para móvil

Mobile

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

Para dar a la card el encabezado se usa slot="title" en la etiqueta con el encabezado de nivel correspondiente.

Si se desea añadir contenido a la card se usa slot="content" en la etiqueta correspondiente. Para una correcta accesibilidad de las tecnologías de asistencia, si este contenido es texto, la etiqueta debe ser siempre de párrafo.