Cards

Las tarjetas se usan para mostrar contenido resumido o destacado del resto. Por ejemplo, una cuadricula con posts recientes o un curso en el catalogo.

Tarjetas estándar

Título de la tarjeta

Subtitulo de la tarjeta

Este el contenido de la tarjeta en caso lo requiera. Algunas tarjetas no requieren contenido pero otras sí.

Título de la tarjeta

Subtitulo de la tarjeta

Este el contenido de la tarjeta en caso lo requiera. Algunas tarjetas no requieren contenido pero otras sí.

Minicards de cursos para App

Título de la tarjeta
Título de la tarjeta
Título de la tarjeta

Minicards de cursos siguientes

Título de la tarjeta

9 de febrero

Título de la tarjeta

9 de febrero

Título de la tarjeta

9 de febrero

Continua estudiando

Su estructura es la siguiente (por comodidad en formato .pug)

.card
 .card__img
   img(src="imagen.jpg")
 .card__content
   .card__title Título de la tarjeta
   .card__subtitle
     p Subtitulo de la tarjeta
   .card__body
     p Este el contenido de la tarjeta en caso lo requiera. Algunas tarjetas (...).
   footer.card__footer
     .card__user
       .card__user-img
         img(src="usuario.jpg")
       .card__user-name
         a(href="#") Alexys Lozada
     .card__button
       a(href="#").button--ghost--tertiary.button--small Etiqueta

Minicards de cursos

Se usan para mostrar información de los cursos en páginas internas sin entorpecer la experiencia de usuario.

Título de la tarjeta

Crea sitios profesionales y escalables con el CMS más poderoso del mercado.

Título de la tarjeta

Crea sitios profesionales y escalables con el CMS más poderoso del mercado.

Su estructura es la siguiente:

.card.card--mini
 .card__img
   img(src="imagen.jpg")
 .card__content
   .card__title Título de la tarjeta
   .card__body
     p Crea sitios profesionales y escalables con el CMS más poderoso del mercado.
   footer.card__footer
     .card__user
       .card__user-img
         img(src="user.jpg")
       .card__user-name
         a(href="#") Alexys Lozada
     .card__button
       a(href="#").button--cta.small Inscríbete

La minicard usa la clase modificadora (BEM) card--mini. Para una minicard horizontal use la clase card--mini-horizontal. No necesita cambiar la estructura HTML.