Tarjetas
Ordena texto, imágenes, vídeo... y, crea presentaciones en bloques.
Nota Las tarjetas no tiene definido un ancho en concreto, como tampoco cuentan con margenes; estas se irán ordenando en columnas en el documento; esto quiere decir que para crear un orden horizontal puedes utilizar:
- El sistema grid con puntos de corte.
- Las utilidades flex.
- Las utilidades auto-fill.
-- Estilos mínimos
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius ratione velit aliquid quae voluptatum beatae mollitia sint tenetur asperiores eaque!
Lorem ipsum dolor sit amet.
...
-- Tarjeta básica
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius ratione velit aliquid quae voluptatum beatae mollitia sint tenetur asperiores eaque!
Lorem ipsum dolor sit amet.
...
-- Tarjeta multimedia
Título
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate possimus earum repellat eum dolorem itaque velit nemo laboriosam. Ullam, repellendus.
Title
...
-- Tarjeta Bordes redondeados
Título
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate possimus earum repellat eum dolorem itaque velit nemo laboriosam. Ullam, repellendus.
Title
...
Orden de las tarjetas
- Orden de las tarjetas y su contenido
Las tarjetas no tienen un orden concreto en el momento de agruparlas y estas se irán colocando en columnas. Puedes crear un orden en horizontal con las utilidades que se oferecen en la sección Flex.
El código HTML de las tarjetas contiene la clase .card-body-twins esta clase hará
que las tarjetas de una misma fila contengan el mismo alto de la que mayor contenido tenga, con respecto a
.card-footer.
Si no deseas que esto sea así; cambia .card-body-twins por .card-body y, de esta manera .card-footer
se ajustará en función de su contenido. OBSERVA ESTE EJEMPLO...
Título
Utilizando la clase .card-body-twins
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Título
Utilizando la clase .card-body-twins
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate sint iure illo tempora iusto. Nisi molestias voluptatum odio iure perspiciatis illum vitae animi eius? Laborum molestias repudiandae, minus autem similique blanditiis et dicta, consectetur ex maxime fugit, labore illo iste sed veritatis vero! Eveniet voluptas possimus aliquam ipsum nihil odio.
Título
Utilizando la clase .card-body-twins
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas ea, temporibus rerum non quis dolores.
Título
Utilizando la clase .card-body
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Título
Utilizando la clase .card-body
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate sint iure illo tempora iusto. Nisi molestias voluptatum odio iure perspiciatis illum vitae animi eius? Laborum molestias repudiandae, minus autem similique blanditiis et dicta, consectetur ex maxime fugit, labore illo iste sed veritatis vero! Eveniet voluptas possimus aliquam ipsum nihil odio.
Título
Utilizando la clase .card-body
Lorem ipsum dolor sit amet consectetur adipisicing elit.
-- Utilidad: auto-fill
Esta utilidad puede ser la mejor opción para ordenar horizontalmente las tarjetas, ya que se adaptará automáticamente a los distintos tipos de pantalla, tiene establecido un width de 300px con lo cual, esto quiere decir; que a las tarjetas no hay que establecerle un width.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate possimus earum repellat eum dolorem itaque velit nemo laboriosam. Ullam, repellendus.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate possimus earum repellat eum dolorem itaque velit nemo laboriosam. Ullam, repellendus.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate possimus earum repellat eum dolorem itaque velit nemo laboriosam. Ullam, repellendus.
...
-- Ejemplo de uso con grid y puntos de corte
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate possimus earum repellat eum dolorem itaque velit nemo laboriosam. Ullam, repellendus.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate possimus earum repellat eum dolorem itaque velit nemo laboriosam. Ullam, repellendus.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate possimus earum repellat eum dolorem itaque velit nemo laboriosam. Ullam, repellendus.
...
Ideas de tarjetas
Your name
Jobs
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur asperiores necessitatibus at vel quia, ullam corporis tempore repellat repudiandae suscipit numquam voluptatem consequatur.
Your name
Jobs
...
Your name
Job
Your name
Job