Tarjetas

Las tarjetas son componentes accionables que se agrupan para comunicar información relacionada, y actúan como punto de entrada vinculado a los detalles del contenido.

Uso

Cuándo usar

Para organizar y agrupar información relacionada, como artículos, noticias o secciones de un sitio web.
Con fines de navegación, para que la persona usuaria disponga de distintos puntos de entrada sobre el contenido relacionado y acceda a más detalles del mismo.

Cuándo no usar

Para desencadenar una acción o evento, considerá utilizar el componente Botón.
Para navegar a otro sitio web, o abrir contenido en una nueva pestaña, considerá utilizar el componente de Enlace.
Para estructurar contenido estático que no es accionable, ni redirige a ningún lado, considerá utilizar el componente Lista informativa.

Disposición

En Obelisco existen 2 disposiciones posibles: vertical y horizontal. La disposición del componente sirve para generar diferentes niveles de jerarquía según el tipo de tarjeta.

Tipos de tarjeta vertical

Predeterminada

Se utiliza para mostrar información de mayor peso visual en la página, y lleva una imagen descriptiva del contenido.

Noticias

Se utiliza para modular contenido de noticias en páginas simples y páginas de área.

Agenda

Se utiliza para mostrar información sobre un evento.

Tipos de tarjeta horizontal

Predeterminada

Contiene información que no precisa de imágenes descriptivas. Dentro del entorno de Buenos Aires se utiliza, por ejemplo, para agrupar programas o servicios de un área.

Temática

Se utiliza en la página de inicio de Buenos Aires para redirigir a los principales trámites y servicios.

Agrupación

Las tarjetas se utilizan en grupo para organizar la navegación y redirección a contenidos relacionados de un mismo sitio web.

check

Utilizar tarjetas con la misma disposición y del mismo tipo dentro de un mismo grupo.

No combinar la disposición y/o los tipos de tarjetas dentro de un mismo grupo.

Modulación

Las tarjetas y sus variantes cuentan con un ancho fijo establecido. Dependiendo del tipo y el dispositivo, se modulan de diferentes maneras. 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.

Ejemplos de uso

check

Respetar la modulación según la disposición y el tipo de tarjeta, independientemente del espacio disponible en la página.

No estirar o cambiar la modulación de las tarjetas únicamente por rellenar el espacio en blanco. Cambiar la composición del componente genera rupturas en el contenido, que afectan la legibilidad y la escaneabilidad de la información.

Contenido en esta página

Uso
Disposición
Tipos de tarjeta vertical
Tipos de tarjeta horizontal
Agrupación
Modulación
Ejemplos de uso

Horizontal

Con icono

Título de la tarjeta

Descripción de la tarjeta

Título de la tarjeta

Descripción de la tarjeta


<div class="card card-horizontal">
  <i class="bx bxs-info-circle card-icon"></i>
  <div class="card-body">
    <h3 class="card-title">
      <a href="#" class="card-title-link">Título de la tarjeta</a>
    </h3>
    <p class="card-text">Descripción de la tarjeta</p>
  </div>
</div>

<div class="card card-horizontal unbordered">
  <i class="bx bxs-info-circle card-icon"></i>
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Título de la tarjeta</a>
    </h3>
    <p class="card-text">Descripción de la tarjeta</p>
  </div>
</div>

Con imagen

Título de la tarjeta con más de una línea

Descripción de la tarjeta

Título de la tarjeta con más de una línea

Descripción de la tarjeta


<div class="card card-horizontal">
  <img src="/card-img-left.jpg" class="card-img" alt="descripción de imagen" />
  <div class="card-body">
    <h3 class="card-title">
      <a href="#" class="card-title-link">Título de la tarjeta</a>
    </h3>
    <p class="card-text">Descripción de la tarjeta</p>
  </div>
</div>

<div class="card card-horizontal unbordered">
  <img src="/card-img-left.jpg" class="card-img" alt="descripción de imagen" />
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Título de la tarjeta</a>
    </h3>
    <p class="card-text">Descripción de la tarjeta</p>
  </div>
</div>

Solo texto

Título de la tarjeta

Descripción de la tarjeta

Título de la tarjeta

Descripción de la tarjeta


<div class="card card-horizontal">
  <div class="card-body">
    <h3 class="card-title">
      <a href="#" class="card-title-link">Título de la tarjeta</a>
    </h3>
    <p class="card-text">Descripción de la tarjeta</p>
  </div>
</div>

<div class="card card-horizontal unbordered">
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Título de la tarjeta</a>
    </h3>
    <p class="card-text">Descripción de la tarjeta</p>
  </div>
</div>

Temática

Título de la tarjeta

Descripción de la tarjeta


<div class="card thematic">
  <img class="card-img" src="/card-illustration.svg" alt="descripción de imagen" />
  <div class="card-body">
    <h3 class="card-title">
      <a href="#" class="card-title-link">Título de la tarjeta</a>
    </h3>
    <p class="card-text">Descripción de la tarjeta</p>
  </div>
</div>

Vertical

Con icono

Título de la tarjeta

Descripción de la tarjeta

Título de la tarjeta

Descripción de la tarjeta


<div class="card">
  <i class="bx bxs-info-circle card-icon"></i>
  <div class="card-body">
    <h3 class="card-title">
      <a href="#" class="card-title-link">Título de la tarjeta</a>
    </h3>
    <p class="card-text">Descripción de la tarjeta</p>
  </div>
</div>

<div class="card unbordered">
  <i class="bx bxs-info-circle card-icon"></i>
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Título de la tarjeta</a>
    </h3>
    <p class="card-text">Descripción de la tarjeta</p>
  </div>
</div>

Con imagen

Título de la tarjeta

Descripción de la tarjeta


<div class="card">
  <img class="card-img" src="/card-img-top.jpg" alt="descripción de imagen" />
  <div class="card-body">
    <h3 class="card-title">
      <a href="#" class="card-title-link">Título de la tarjeta</a>
    </h3>
    <p class="card-text">Descripción de la tarjeta</p>
  </div>
</div>

Noticia

etiqueta 1etiqueta 2

Título de la tarjeta

Descripción de la tarjeta

Fecha de publicación


<div class="card">
  <img class="card-img" src="/card-img-top.jpg" alt="descripción de imagen" />
  <div class="card-body">
    <div class="card-badges">
        <span class="badge badge-default">etiqueta 1</span>
        <span class="badge badge-default">etiqueta 2</span>
    </div>
    <h3 class="card-title">
      <a href="#" class="card-title-link">Título de la tarjeta</a>
    </h3>
    <p class="card-text">Descripción de la tarjeta</p>
    <div class="card-info">
      <div>
        <small>
          <span>Fecha de publicación</span>
        </small>
      </div>
    </div>
  </div>
</div>

A continuación, se muestra variante Noticias con el título truncado:

etiqueta 1etiqueta 2

Título de la tarjeta Noticias truncado con texto extendido que supera las tres líneas de longitud.

Descripción de la tarjeta

Fecha de publicación


<div class="card">
  <img class="card-img" src="/card-img-top.jpg" alt="descripción de imagen" />
  <div class="card-body">
    <div class="card-badges">
        <span class="badge badge-default">etiqueta 1</span>
        <span class="badge badge-default">etiqueta 2</span>
    </div>
    <h3 class="card-title">
      <a href="#" class="card-title-link ellipsis-3">
        Título de la tarjeta Noticias truncado con texto extendido que supera las tres líneas de longitud.
      </a>
    </h3>
    <p class="card-text">Descripción de la tarjeta</p>
    <div class="card-info">
      <div>
        <small>
          <span>Fecha de publicación</span>
        </small>
      </div>
    </div>
  </div>
</div>

Agenda

sobrelinea

Título de la tarjeta

Descripción de la tarjeta

calendar_todayLun 01/1schedule17 | 18 | 19 hs


<div class="card">
  <img class="card-img" src="/card-img-top.jpg" alt="descripcion de imagen" />
  <div class="card-body">
    <p class="card-headline">sobrelinea</p>
    <h3 class="card-title">
      <a href="#" class="card-title-link">Título de la tarjeta</a>
    </h3>
    <p class="card-text">Descripción de la tarjeta</p>
    <div class="card-info">
      <div class="pt-2">
        <small>
          <span class="material-symbols-rounded o-icon">calendar_today</span>
          Lun 01/1
        </small>
        <small>
          <span class="material-symbols-rounded o-icon">schedule</span>
          17 | 18 | 19 hs
        </small>
      </div>
    </div>
  </div>
</div>

Disposición

Tres columnas

Título de la tarjeta

Descripción de la tarjeta

Título de la tarjeta

Descripción de la tarjeta

Título de la tarjeta

Descripción de la tarjeta

Título de la tarjeta

Descripción de la tarjeta

Título de la tarjeta

Descripción de la tarjeta


<div class="card-items-3">
  <div class="col">
    <div class="card">
      <i class="bx bxs-info-circle card-icon"></i>
      <div class="card-body">
        <h3 class="card-title">
          <a href="#" class="card-title-link">Título de la tarjeta</a>
        </h3>
        <p class="card-text">Descripción de la tarjeta</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <i class="bx bxs-info-circle card-icon"></i>
      <div class="card-body">
        <h3 class="card-title">
          <a href="#" class="card-title-link">Título de la tarjeta</a>
        </h3>
        <p class="card-text">Descripción de la tarjeta</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <i class="bx bxs-info-circle card-icon"></i>
      <div class="card-body">
        <h3 class="card-title">
          <a href="#" class="card-title-link">Título de la tarjeta</a>
        </h3>
        <p class="card-text">Descripción de la tarjeta</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <i class="bx bxs-info-circle card-icon"></i>
      <div class="card-body">
        <h3 class="card-title">
          <a href="#" class="card-title-link">Título de la tarjeta</a>
        </h3>
        <p class="card-text">Descripción de la tarjeta</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <i class="bx bxs-info-circle card-icon"></i>
      <div class="card-body">
        <h3 class="card-title">
          <a href="#" class="card-title-link">Título de la tarjeta</a>
        </h3>
        <p class="card-text">Descripción de la tarjeta</p>
      </div>
    </div>
  </div>
</div>

Dos columnas

Título de la tarjeta

Descripción de la tarjeta

Título de la tarjeta

Descripción de la tarjeta

Título de la tarjeta

Descripción de la tarjeta

Título de la tarjeta

Descripción de la tarjeta

Título de la tarjeta

Descripción de la tarjeta


<div class="card-items-2">
  <div class="col">
    <div class="card card-horizontal">
      <i class="bx bxs-info-circle card-icon"></i>
      <div class="card-body">
        <h3 class="card-title">
          <a href="#" class="card-title-link">Título de la tarjeta</a>
        </h3>
        <p class="card-text">Descripción de la tarjeta</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card card-horizontal">
      <i class="bx bxs-info-circle card-icon"></i>
      <div class="card-body">
        <h3 class="card-title">
          <a href="#" class="card-title-link">Título de la tarjeta</a>
        </h3>
        <p class="card-text">Descripción de la tarjeta</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card card-horizontal">
      <i class="bx bxs-info-circle card-icon"></i>
      <div class="card-body">
        <h3 class="card-title">
          <a href="#" class="card-title-link">Título de la tarjeta</a>
        </h3>
        <p class="card-text">Descripción de la tarjeta</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card card-horizontal">
      <i class="bx bxs-info-circle card-icon"></i>
      <div class="card-body">
        <h3 class="card-title">
          <a href="#" class="card-title-link">Título de la tarjeta</a>
        </h3>
        <p class="card-text">Descripción de la tarjeta</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card card-horizontal">
      <i class="bx bxs-info-circle card-icon"></i>
      <div class="card-body">
        <h3 class="card-title">
          <a href="#" class="card-title-link">Título de la tarjeta</a>
        </h3>
        <p class="card-text">Descripción de la tarjeta</p>
      </div>
    </div>
  </div>
</div>

Desplazable

etiqueta 1etiqueta 2

Título de la tarjeta

Descripción de la tarjeta

Fecha de publicación

etiqueta 1etiqueta 2

Título de la tarjeta

Descripción de la tarjeta

Fecha de publicación

etiqueta 1etiqueta 2

Título de la tarjeta

Descripción de la tarjeta

Fecha de publicación


<div class="responsive-scroll vertical-cards-container" tabindex="0">
  <div class="card">
    <img class="card-img" src="/card-img-top.jpg" alt="descripción de imagen" />
    <div class="card-body">
      <div class="card-badges">
        <span class="badge badge-default">etiqueta 1</span>
        <span class="badge badge-default">etiqueta 2</span>
      </div>
      <h3 class="card-title">
        <a href="#" class="card-title-link">Título de la tarjeta</a>
      </h3>
      <p class="card-text">Descripción de la tarjeta</p>
      <div class="card-info">
        <div>
        <small>
          <span>Fecha de publicación</span>
        </small>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src="/card-img-top.jpg" alt="descripción de imagen" />
    <div class="card-body">
      <div class="card-badges">
        <span class="badge badge-default">etiqueta 1</span>
        <span class="badge badge-default">etiqueta 2</span>
      </div>
      <h3 class="card-title">
        <a href="#" class="card-title-link">Título de la tarjeta</a>
      </h3>
      <p class="card-text">Descripción de la tarjeta</p>
      <div class="card-info">
        <div>
        <small>
          <span>Fecha de publicación</span>
        </small>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src="/card-img-top.jpg" alt="descripción de imagen" />
    <div class="card-body">
      <div class="card-badges">
        <span class="badge badge-default">etiqueta 1</span>
        <span class="badge badge-default">etiqueta 2</span>
      </div>
      <h3 class="card-title">
        <a href="#" class="card-title-link">Título de la tarjeta</a>
      </h3>
      <p class="card-text">Descripción de la tarjeta</p>
      <div class="card-info">
        <div>
        <small>
          <span>Fecha de publicación</span>
        </small>
        </div>
      </div>
    </div>
  </div>
</div>

Variantes

Horizontal
Con icono
Con imagen
Solo texto
Temática
Vertical
Con icono
Con imagen
Noticia
Agenda
Disposición
Tres columnas
Dos columnas
Desplazable

Anatomía

Las tarjetas tienen una composición diferente dependiendo de la variante.

Elemento	Carácter
1. Imagen	Opcional, puede contener una imagen, un ícono o ninguna.
2. Etiquetas	Opcional, solo está disponible en tarjetas de noticias.
3. Sobrelínea	Opcional, solo está disponible en tarjetas de eventos.
4. Título	Obligatorio, todas las tarjetas deben tener título.
5. Descripción	Obligatorio, todas las tarjetas deben tener descripción.
6. Fecha de publicación	Opcional, solo está disponible en tarjetas de noticias.
7. Fecha en el calendario	Opcional, solo está disponible en tarjetas de eventos.
8. Horario	Opcional, solo está disponible en tarjetas de eventos.

Variantes

Con imágenes

La imagen de la tarjeta vertical debe tener una proporción 16:9, con un tamaño recomendado de 340x190 px. La imagen de la tarjeta horizontal debe tener una proporción 1:1, con un tamaño recomendado de 64x64 px.

Con ícono en caja

Los íconos en caja tienen un tamaño de 64x64 px. Deben mantener el color predeterminado y estar relacionados al contenido de la tarjeta.

Sin borde

En este caso, la parte accionable de la tarjeta es el título. Si bien no cuenta con el contenedor que delimita el componente, al modular la tarjeta dentro de un grupo respeta el mismo espacio individual.

Tarjeta horizontal sin media

Entre los tipos de tarjetas, las únicas tarjetas que pueden prescindir del contenido media son las tarjetas horizontales.

Estados

Predeterminada (default)

Estado predeterminado de las tarjetas en una interfaz.

Sobre (hover)

Estado que adopta la tarjeta cuando un cursor pasa sobre el elemento, cambiando su apariencia para indicar su interactividad a la persona usuaria.

En foco (focus)

Es un principio de accesibilidad que asegura que cualquier elemento interactivo en una interfaz sea claramente visible cuando recibe la atención del usuario, especialmente al ser navegado con el teclado. En Obelisco se utiliza un borde o anillo (focus ring) por fuera del componente en un color distintivo.

Espaciado

El espaciado recomendado para las tarjetas en dispositivos desktop es de 32 px. en sentido horizontal, y 32 px. en sentido vertical.

En dispositivos móviles, todas las tarjetas van una debajo de la otra, ocupando el ancho total de la grilla del dispositivo. En dispositivos tablet tienen una separación de 24 px., y en dispositivos mobile tienen una separación de 16 px.

Contenido en esta página

Anatomía
Variantes
Con imágenes
Con ícono en caja
Sin borde
Tarjeta horizontal sin media
Estados
Predeterminada (default)
Sobre (hover)
En foco (focus)
Espaciado

Navegación por teclado

El componente de tarjetas pueden recorrerse utilizando la navegación por teclado u otras herramientas de asistencia como lectores por voz.

TABENTER

Utilizando el tab la persona usuaria puede navegar a través de elementos de la interfaz. Además, con el enter, puede accionar los elementos sobre los que esté posicionada como botones, enlaces, entre otros.

Etiquetado descriptivo

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".


<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 class="card card-horizontal">
    ...
    </div>
  </div>
</div>

Texto alternativo para imágenes o íconos

Siempre y cuando la imagen o el ícono de la tarjeta sirva de refuerzo al contenido, debe contener un texto descriptivo utilizando el atributo alt. En caso de que la imagen o el ícono sea decorativo, el atributo alt debe estar vacío.


<div class="card">
  <img class="card-img" src="/card-img-top.jpg" alt="Este es el texto descriptivo de la imagen." />
  <div class="card-body">
    <h3 class="card-title">
      <a href="#" class="card-title-link">Título de la tarjeta</a>
    </h3>
    <p class="card-text">Descripción de la tarjeta</p>
  </div>
</div>

Criterios WCAG aplicados

Success Criterion 1.4.11 Non-Text Contrast (Level AA)

La presentación visual de elementos de la interfaz de usuario y objetos gráficos tiene por lo menos una relación de contraste de 3:1 con respecto a los colores adyacentes.

Success Criterion 1.4.3 Contrast (Minimum) (Level AA)

La presentación visual de texto y de imágenes de texto tiene una relación de contraste de por lo menos 4.5:1, excepto textos grandes e imágenes de texto grande que tienen un contraste de por lo menos 3:1, textos o imágenes que son parte de un componente inactivo de interfaz de usuario o son pura decoración, o logotipos.

Success Criterion 2.4.7 Focus Visible (Level AA)

Cualquier interfaz de usuario operable por teclado tiene un modo de operación donde el indicador de enfoque del teclado es visible.

Success Criterion 2.4.3 Focus Order (Level A)

Si una página web puede navegarse de forma secuencial y las secuencias de navegación afectan el significado o la operación, los componentes enfocables reciben el foco en un orden que preserve el significado y la operabilidad.

Success Criterion 2.1.1 Keyboard (Level A)

Todas las funcionalidades del contenido se puede operar a través de una interfaz de teclado.

Success Criterion 2.1.2 No Keyboard Trap (Level A)

Si el foco del teclado puede moverse a un componente de la página utilizando una interfaz de teclado, también debe ser posible mover el foco fuera de ese componente usando únicamente la misma interfaz de teclado. Si se requiere algo más que las teclas de flecha, tabulador u otros métodos estándar para salir, se debe informar al usuario sobre el método necesario para mover el foco.

Contenido en esta página

Navegación por teclado
Etiquetado descriptivo
Texto alternativo para imágenes o íconos
Criterios WCAG aplicados

Tarjetas

Uso

Disposición

Tipos de tarjeta vertical

Tipos de tarjeta horizontal

Agrupación

Modulación

Ejemplos de uso

Horizontal

Con icono

Con imagen

Solo texto

Temática

Vertical

Con icono

Con imagen

Noticia

Agenda

Disposición

Tres columnas

Dos columnas

Desplazable

Anatomía

Variantes

Con imágenes

Con ícono en caja

Sin borde

Tarjeta horizontal sin media

Estados

Predeterminada (default)

Sobre (hover)

En foco (focus)

Espaciado

Navegación por teclado

Etiquetado descriptivo

Texto alternativo para imágenes o íconos

Criterios WCAG aplicados

Navegación de pie de página