Diseño Normalizado de Trámites Electrónicos
Inicio
Primeros pasos
Primeros pasos
¿Qué es DINTEL?
Diseñadores
Desarrolladores
Recursos
Preguntas frecuentes
Fundamentos
Fundamentos
Color
Tipografía
Elevaciones
Espaciado
Retícula
Borde
Radio
Iconografía
Ilustraciones
Animación
Accesibilidad
Tokens de diseño
Contenidos digitales
Visualización de datos
Elementos de interfaz
Elementos de interfaz
Módulos
Plantillas
Componentes
Actualizaciones
Contacto
Elementos de interfaz
Componentes
Tarjeta
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.
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
Interactivas
Informativas
Contenidos
Ilustración
Imagen
Solo texto
Orientación
Vertical
Horizontal
Versión
Desktop
Mobile
Responsive
Tablet
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.
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
