Estilos

Componentes

Formularios

Organismos

Tarjetas

Las tarjetas son componentes accionables que se utilizan en grupo para comunicar información que requiere de cierto tipo de categorización y jerarquización visual. Se visualizan en contenedores flexibles y actúan como punto de entrada a un tema en particular.

Si quieres conocer las buenas prácticas de uso del componente, puedes visitar el siguiente enlace.

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

descripción de imagen

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

Descripción de la tarjeta


descripción de imagen

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

descripción de imagen

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="#" class="card-title-link">Título de la tarjeta</a>
    </h3>
    <p class="card-text">Descripción de la tarjeta</p>
  </div>
</div>

Con imagen

descripción de 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

descripción de imagen
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:

descripción de imagen
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

descripción de imagen

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

descripción de imagen
etiqueta 1etiqueta 2

Título de la tarjeta

Descripción de la tarjeta

Fecha de publicación
descripción de imagen
etiqueta 1etiqueta 2

Título de la tarjeta

Descripción de la tarjeta

Fecha de publicación
descripción de imagen
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>

Navegación de pie de página