UITarjetas
Un contenedor que agrupa contenido relacionado sobre una cosa: una imagen, un título, texto y una acción.
Una tarjeta es un bloque autónomo sobre un tema, como un curso, una persona o un resumen. Las tarjetas se colocan en una rejilla y dejan que el ojo salte de una a otra.
Cuándo usarlo
Úsalo
- Un tema y una acción principal por tarjeta.
- La misma estructura en todas las tarjetas de un grupo, para poder compararlas.
- Un encabezado o un pie solo para metadatos (estado, fecha), no para el título.
No
- Poner una tarjeta dentro de otra.
- Usar una tarjeta para un texto largo o un formulario; usa la página.
- Hacer que toda la tarjeta sea un enlace y poner además enlaces dentro.
Anatomía
Una caja (card) con imagen opcional (card-img-top), encabezado, cuerpo (card-body: card-title, card-text, acciones), lista y pie.
Variantes y estados
Quiz: linear equations
Closes on Friday at 18:00. You have two attempts.
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Con iconos
Una baldosa de icono (dd-tile) arriba da identidad a una tarjeta. Úsala para funciones, secciones y puntos de entrada.
Courses
Create, copy and archive the courses of a category.
Participants
Enrol people, assign roles and review their activity.
Reports
Completion, grades and logs, ready to export.
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Cifras
Una cifra, su etiqueta y su tendencia, junto a una baldosa. Para paneles y resúmenes.
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Tarjetas que son enlaces
Una tarjeta que lleva a algún sitio (card-hover) se eleva un poco bajo el puntero y dibuja el anillo de foco alrededor de toda la tarjeta.
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Mezclando las partes
Badges, una barra de progreso, iconos y un pie con acciones en la misma tarjeta: una tarjeta de curso y una tarjeta con una lista.
Physics II
Waves, optics and thermodynamics with weekly labs.
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Estructura con una lista
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Horizontal
Physics II
Waves, optics and thermodynamics with weekly labs.
Updated 3 minutes ago
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Combinaciones
| Combinación | Para qué usarla |
|---|---|
| Imagen × cuerpo × acción | La tarjeta clásica: imagen arriba, título, dos líneas de texto y una acción principal. |
| Baldosa de icono × título × texto | Una función o un punto de entrada; no hace falta imagen. |
| Cifra × tendencia | Un número, lo que cuenta y cómo se mueve; la tendencia en color de éxito o peligro. |
| Tarjeta + badges + progreso | Un curso o una tarea: el estado como badges suaves, el progreso como una barra, las acciones en el pie. |
| Tarjeta × enlace | Toda la tarjeta es un enlace (card-hover), sin otros enlaces dentro. |
| Tarjeta + lista | Una tarjeta con un grupo de lista sin bordes para un resumen o una lista corta. |
Qué cambia Didactika y por qué
| Qué cambiamos | Por qué ayuda |
|---|---|
| Un borde finísimo y una sombra muy suave | La tarjeta se separa de la página sin el contorno pesado que hace que una página de tarjetas parezca un formulario. |
| Un radio mayor y más relleno | Se lee como una superficie sobre la que poner cosas; el contenido nunca toca el borde. |
| El encabezado y el pie no tienen relleno | Son metadatos, así que no compiten con el título del cuerpo. |
| Las tarjetas que son enlaces se elevan y muestran un anillo alrededor de toda la tarjeta | El usuario sabe que toda la tarjeta es el objetivo y ve dónde está el teclado. |
| Los iconos van en una baldosa | La misma pieza se usa en alertas, avisos, diálogos y tarjetas, así que un icono significa siempre el mismo tipo de cosa. |
Clases
| Clase | Qué hace |
|---|---|
card |
La caja |
card-body, card-title, card-text |
Contenido |
card-header, card-footer |
Metadatos arriba y abajo |
card-img-top |
Imagen arriba |
card-link |
Enlaces en fila |
row g-0, col-md-* |
Disposición horizontal |
card-hover |
Una tarjeta que es un enlace: se eleva al pasar el ratón y muestra el anillo de foco (Didactika) |
card-flat |
Una tarjeta sin sombra (Didactika) |
dd-tile, dd-tile-lg, dd-tile-round |
La baldosa de icono, en otros tamaños y formas (Didactika) |
dd-stat, dd-stat-value, dd-stat-label, dd-stat-trend |
Una cifra con su etiqueta y tendencia (Didactika) |
En esta versión
Bootstrap 5.3 guarda sus colores en variables CSS (--bs-*), así que un tema recolorea el componente con una sola variable. El margen entre columnas de la tarjeta horizontal es g-0.
Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos. El margen entre columnas de la tarjeta horizontal es no-gutters.
Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos. El margen entre columnas de la tarjeta horizontal es no-gutters.
Accesibilidad
- El título es un encabezado real del nivel correcto.
- Si toda la tarjeta es clicable, hay un enlace que la cubre, no enlaces anidados.
- Las imágenes llevan texto alternativo o se marcan como decorativas.