Cards
Componentes
Cards
Las cards son un componente UI, conocido como tarjetas, que sirven como punto de entrada y brindan un contexto del contenido que se muestra en la página interior.
Muestran un tipo de contenido compuesto por diferentes elementos que, cuyo tamaño y acciones, pueden ser muy variados.
Además, incluyen diferentes tipos de información: imagen, título, breve resumen, marca de tiempo, botón principal y secundario, etc.
Las cards son vistas sólidas y pueden contener un conjunto de datos únicos. Se recomienda no sobrecargar con información poco relevante y superflua.
Contenido
Los diseños de una card a nivel, pueden ser muy variados según su objetivo, página de resultado, producto digital, etc.
Los elementos que componen una card, son los siguientes:
- Imagen de miniatura: suele ser una imagen que contextualiza el contenido al que da acceso la propia card.
- Encabezado o título: es el texto que identifica el contenido de la propia card. Por ejemplo, el nombre o el título de un álbum de fotos o el titular de un artículo.
- Descripción: es un texto de apoyo, a modo de breve descripción o resumen.
- Llamados a la acción: básicamente son botones o CTA.
- Subtítulo: suele ser texto, como por ejemplo, la categoría a la que pertenece el artículo, una fecha, etc.
- Íconos: las cards también pueden incluir iconografía para ejecutar acciones.
Buenas prácticas
- Usar imágenes relevantes.
- Utilizar una buena jerarquía visual.
- Usar contenido limitado.
- Evitar enlaces en los textos descriptivos.
- Las acciones deben estar diferenciadas.
- Utilizar esquinas redondeadas para el borde.
- Usar un borde claro o una sombra suave.
- No sobrecargar la card con información.
Card con imagen
uft-card
Card con imagen y botón:
<div class="uft-card" style="max-width: 320px">
<div class="uft-card-header">
<img src="https://dummyimage.com/480x16:9/" alt="">
</div>
<div class="uft-card-body">
<h3 class="h5">Dirección y Gestión de Artes Culinarias junto a Soprole Food Professionals sellan alianza y crean el programa “Desarrollo Pastelero: de emprendedor a maestro”</h3>
<p class="font-thin">Como parte del acuerdo este evento se llevará a cabo el 18 de enero en dependencias de la U. Finis Terrae. Está dirigido a trabajadores, emprendedores y estudiantes de gastronomía vinculados al mundo de la pastelería y repostería.</p>
<p class="mt-auto">
<a href="#" class="uft-btn uft-btn--secondary">
Ver más
<i class="uft-icon uft-icon--rounded">add</i>
</a>
</p>
</div>
</div>
Card descripción
uft-card uft-card--desc
uft-card uft-card--desc uft-card--inverse
Card descriptivo:
<div class="uft-card uft-card--desc mb-5">
<div class="uft-card-header">
<img src="https://dummyimage.com/480x16:9/" alt="">
</div>
<div class="uft-card-body">
<p class="font-thin text-sm">Ea non in eu excepteur culpa sunt aliquip occaecat id veniam. Non eu exercitation elit incididunt pariatur. Fugiat consectetur ad minim id id irure reprehenderit non. Sunt aute ad non ut incididunt eu. Mollit qui non elit nisi commodo officia fugiat sit elit velit. Lorem nisi laborum ea anim irure.</p>
<p class="font-thin text-sm">Officia et excepteur nulla dolore ad anim commodo quis magna. Do proident minim eiusmod nulla dolore occaecat incididunt commodo eiusmod ad qui. Eiusmod tempor nostrud aute eiusmod tempor excepteur nisi nisi dolor anim laborum minim enim ex. Non tempor voluptate ipsum et duis quis reprehenderit laborum non labore labore laboris laboris elit. Deserunt mollit sit excepteur mollit incididunt velit sunt. Ullamco voluptate cillum et et laborum nulla eiusmod aliqua amet consectetur aliqua dolor incididunt.</p>
<p class="font-thin text-sm">Laboris deserunt sunt laboris irure elit sit adipisicing esse tempor veniam. Exercitation consequat labore aliqua consectetur elit ut do nisi quis occaecat incididunt non commodo. Sunt reprehenderit cupidatat consequat ullamco id esse sit. In eiusmod ut in amet minim veniam tempor consequat mollit reprehenderit irure aliquip aliquip eiusmod. Magna nisi elit reprehenderit laborum eiusmod eiusmod velit ullamco. Culpa id non amet dolor aute adipisicing consectetur culpa duis veniam fugiat.</p>
</div>
</div>
<div class="uft-card uft-card--desc uft-card--inverse">
<div class="uft-card-header">
<img src="https://dummyimage.com/480x16:9/" alt="">
</div>
<div class="uft-card-body">
<p class="font-thin text-sm">Ea non in eu excepteur culpa sunt aliquip occaecat id veniam. Non eu exercitation elit incididunt pariatur. Fugiat consectetur ad minim id id irure reprehenderit non. Sunt aute ad non ut incididunt eu. Mollit qui non elit nisi commodo officia fugiat sit elit velit. Lorem nisi laborum ea anim irure.</p>
<p class="font-thin text-sm">Officia et excepteur nulla dolore ad anim commodo quis magna. Do proident minim eiusmod nulla dolore occaecat incididunt commodo eiusmod ad qui. Eiusmod tempor nostrud aute eiusmod tempor excepteur nisi nisi dolor anim laborum minim enim ex. Non tempor voluptate ipsum et duis quis reprehenderit laborum non labore labore laboris laboris elit. Deserunt mollit sit excepteur mollit incididunt velit sunt. Ullamco voluptate cillum et et laborum nulla eiusmod aliqua amet consectetur aliqua dolor incididunt.</p>
<p class="font-thin text-sm">Laboris deserunt sunt laboris irure elit sit adipisicing esse tempor veniam. Exercitation consequat labore aliqua consectetur elit ut do nisi quis occaecat incididunt non commodo. Sunt reprehenderit cupidatat consequat ullamco id esse sit. In eiusmod ut in amet minim veniam tempor consequat mollit reprehenderit irure aliquip aliquip eiusmod. Magna nisi elit reprehenderit laborum eiusmod eiusmod velit ullamco. Culpa id non amet dolor aute adipisicing consectetur culpa duis veniam fugiat.</p>
</div>
</div>
Card descripción con fecha
uft-card uft-card--desc
uft-card uft-card--desc uft-card--inverse
Card descriptivo:
<div class="uft-card uft-card--desc mb-5" data-date="1988">
<div class="uft-card-date">1988</div>
<div class="uft-card-header">
<img src="https://dummyimage.com/480x16:9/" alt="">
</div>
<div class="uft-card-body">
<p class="font-thin text-sm">Ea non in eu excepteur culpa sunt aliquip occaecat id veniam. Non eu exercitation elit incididunt pariatur. Fugiat consectetur ad minim id id irure reprehenderit non. Sunt aute ad non ut incididunt eu. Mollit qui non elit nisi commodo officia fugiat sit elit velit. Lorem nisi laborum ea anim irure.</p>
</div>
</div>
<div class="uft-card uft-card--desc uft-card--inverse mb-5" data-date="1988">
<div class="uft-card-date">1988</div>
<div class="uft-card-header">
<img src="https://dummyimage.com/480x16:9/" alt="">
</div>
<div class="uft-card-body">
<p class="font-thin text-sm">Ea non in eu excepteur culpa sunt aliquip occaecat id veniam. Non eu exercitation elit incididunt pariatur. Fugiat consectetur ad minim id id irure reprehenderit non. Sunt aute ad non ut incididunt eu. Mollit qui non elit nisi commodo officia fugiat sit elit velit. Lorem nisi laborum ea anim irure.</p>
</div>
</div>
Card imagen + descripción
uft-card uft-card--feat
uft-card uft-card--feat uft-card--inverse
Card imagen + descripción:
<div class="uft-card uft-card--feat mb-5">
<div class="uft-card-header">
<img src="https://dummyimage.com/600x4:3/" alt="">
</div>
<div class="uft-card-body">
<p class="font-thin text-sm">Ea non in eu excepteur culpa sunt aliquip occaecat id veniam. Non eu exercitation elit incididunt pariatur. Fugiat consectetur ad minim id id irure reprehenderit non. Sunt aute ad non ut incididunt eu. Mollit qui non elit nisi commodo officia fugiat sit elit velit. Lorem nisi laborum ea anim irure.</p>
<p class="font-thin text-sm">Officia et excepteur nulla dolore ad anim commodo quis magna. Do proident minim eiusmod nulla dolore occaecat incididunt commodo eiusmod ad qui. Eiusmod tempor nostrud aute eiusmod tempor excepteur nisi nisi dolor anim laborum minim enim ex. Non tempor voluptate ipsum et duis quis reprehenderit laborum non labore labore laboris laboris elit. Deserunt mollit sit excepteur mollit incididunt velit sunt. Ullamco voluptate cillum et et laborum nulla eiusmod aliqua amet consectetur aliqua dolor incididunt.</p>
<p class="font-thin text-sm">Laboris deserunt sunt laboris irure elit sit adipisicing esse tempor veniam. Exercitation consequat labore aliqua consectetur elit ut do nisi quis occaecat incididunt non commodo. Sunt reprehenderit cupidatat consequat ullamco id esse sit. In eiusmod ut in amet minim veniam tempor consequat mollit reprehenderit irure aliquip aliquip eiusmod. Magna nisi elit reprehenderit laborum eiusmod eiusmod velit ullamco. Culpa id non amet dolor aute adipisicing consectetur culpa duis veniam fugiat.</p>
</div>
</div>
<div class="uft-card uft-card--feat uft-card--inverse">
<div class="uft-card-header">
<img src="https://dummyimage.com/600x4:3/" alt="">
</div>
<div class="uft-card-body">
<p class="font-thin text-sm">Ea non in eu excepteur culpa sunt aliquip occaecat id veniam. Non eu exercitation elit incididunt pariatur. Fugiat consectetur ad minim id id irure reprehenderit non. Sunt aute ad non ut incididunt eu. Mollit qui non elit nisi commodo officia fugiat sit elit velit. Lorem nisi laborum ea anim irure.</p>
<p class="font-thin text-sm">Officia et excepteur nulla dolore ad anim commodo quis magna. Do proident minim eiusmod nulla dolore occaecat incididunt commodo eiusmod ad qui. Eiusmod tempor nostrud aute eiusmod tempor excepteur nisi nisi dolor anim laborum minim enim ex. Non tempor voluptate ipsum et duis quis reprehenderit laborum non labore labore laboris laboris elit. Deserunt mollit sit excepteur mollit incididunt velit sunt. Ullamco voluptate cillum et et laborum nulla eiusmod aliqua amet consectetur aliqua dolor incididunt.</p>
<p class="font-thin text-sm">Laboris deserunt sunt laboris irure elit sit adipisicing esse tempor veniam. Exercitation consequat labore aliqua consectetur elit ut do nisi quis occaecat incididunt non commodo. Sunt reprehenderit cupidatat consequat ullamco id esse sit. In eiusmod ut in amet minim veniam tempor consequat mollit reprehenderit irure aliquip aliquip eiusmod. Magna nisi elit reprehenderit laborum eiusmod eiusmod velit ullamco. Culpa id non amet dolor aute adipisicing consectetur culpa duis veniam fugiat.</p>
</div>
</div>
Card horizontal
uft-card uft-card--horizontal
Card horizontal:
<div class="uft-card uft-card--horizontal">
<div class="uft-card-header">
<img src="https://dummyimage.com/480x16:9/" alt="">
</div>
<div class="uft-card-body">
<h3 class="h5">Dirección y Gestión de Artes Culinarias junto a Soprole Food Professionals sellan alianza y crean el programa “Desarrollo Pastelero: de emprendedor a maestro”</h3>
<p class="font-thin">Como parte del acuerdo este evento se llevará a cabo el 18 de enero en dependencias de la U. Finis Terrae. Está dirigido a trabajadores, emprendedores y estudiantes de gastronomía vinculados al mundo de la pastelería y repostería.</p>
<p class="mt-auto">
<a href="#" class="uft-btn uft-btn--secondary">
Ver más
<i class="uft-icon uft-icon--rounded">plus</i>
</a>
</p>
</div>
</div>
Card evento
uft-card uft-card--evento
Card evento:
<div class="uft-card uft-card--evento">
<div class="uft-card-header">
<h3 class="day h2">29</h3>
<h4 class="h4 uppercase month">Feb</h4>
<h4 class="h3 year">2024</h4>
</div>
<div class="uft-card-body">
<h3 class="h5">Dirección y Gestión de Artes Culinarias junto a Soprole Food Professionals sellan alianza y crean el programa “Desarrollo Pastelero: de emprendedor a maestro”</h3>
<p class="font-thin">Teatro Universidad FInis Terrae.</p>
<p class="mt-auto mb-0">
<a href="#" class="uft-btn uft-btn--secondary uft-btn--sm">
Ver más
<i class="uft-icon uft-icon--rounded">add</i>
</a>
</p>
</div>
</div>