Tipos de tarjetas
Tarjeta vertical - Predeterminada
Estas tarjetas organizan su contenido de forma vertical. Pueden contar con una imagen o un ícono en caja.
Tarjeta vertical - De noticia
Estas tarjetas se utilizan para modular contenido de noticias en páginas simples y páginas de área. Contienen un máximo de 2 etiquetas, un título, una bajada, y una nota con la fecha de publicación.
Tarjeta vertical - De agenda
Las tarjetas de agenda se utilizan para mostrar información sobre un evento. Incluyen un título, una bajada breve, y un bloque de información con la fecha y hora. De ser necesario, puede incluir una sobrelínea.
Tarjeta horizontal - Predeterminada
Estas tarjetas organizan su contenido de forma horizontal. Pueden contar con una imagen, un ícono en caja o ser solo de texto. Pueden tener un ancho fijo de 6 columnas o de 4 columnas.
Tarjeta horizontal - Temática
Estas tarjetas se utilizan en la página principal de Buenos Aires, y redirigen a trámites y servicios del Gobierno de la Ciudad.
Diseño y estructura (contexto de uso)
Imágenes
La imagen de la tarjeta vertical debe tener una proporción 16:9, con un tamaño recomendado de 340x190px. La imagen de la tarjeta horizontal debe tener una proporción 1:1, con un tamaño recomendado de 64x64px.
Ícono en caja
Los íconos en caja tienen un tamaño de 64x64px. Siempre deben mantener el color predeterminado, y referirse al contenido de la tarjeta.
Modulación
Las tarjetas y sus variantes cuentan con un ancho fijo establecido. Dependiendo del tipo y el dispositivo, se modulan de diferentes maneras. La separación vertical y horizontal entre tarjetas para desktop es de 32px, y la separación vertical para mobile es de 16px.
En desktop, las tarjetas verticales pueden agruparse hasta un máximo de 3 por línea.
En desktop, las tarjetas horizontales de 4 columnas pueden agruparse hasta un máximo de 3 por línea, mientras que las de 6 columnas pueden hasta un máximo de 2 por línea.
En mobile, todas las tarjetas van una debajo de la otra y ocupan el ancho total de la grilla del dispositivo.
En mobile, las tarjetas de noticias forman un carrusel horizontal para facilitar su visualización.
Accesibilidad
Imagen de la tarjeta
La imagen de las tarjetas debe contener un atributo alt que describa brevemente la imagen. Esto será relevante para personas que utilicen lector de pantalla y también dará contexto en caso de que la imagen no pudiera cargarse. Si la imagen es decorativa, el atributo alt deberá permanecer vacío (sin texto alguno o espacios). Ejemplo: alt=“”
Encabezados
Para una correcta organización jerárquica de encabezados, se recomienda que en el caso que el grupo de tarjetas no contenga un título con etiqueta <h2> que las preceda, se agregue el mismo con la clase "sr-only".
Código HTML
<h2 class="sr-only">Encabezado de grupo de tarjetas</h2>
<div class="container">
<div class="card-deck max-cards-3 card-column">
<div class="card card-horizontal">
...
</div>
<div class="card card-horizontal">
...
</div>
</div>
</div>