DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Card

Información visual

Se trata de un bloque de información que presenta de una manera visual y ordenada su contenido. Es posible componer mosaicos con varias de ellas para organizar la información y secciones de la página.

Card

Por defecto

Título card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-1/3",
  "containerClasses": "p-base border border-neutral-base rounded-sm"
}) %}
<h3 class="c-h3"><a href="#" class="c-link">Título card</a></h3>
    <div class="prose max-w-none">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
    </div>
{% endcall  %}

Todo el card clicable

Usa la clase .c-link--full en un único enlace dentro del card, junto con las clases relative y hover:bg-neutral-light en el parámetro containerClasses para hacer que el enlace ocupe todo el card y sea perceptible en el estado hover. Recuerda que sólo debe haber un enlace en este tipo de cards clicables.

Título card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.

Mostrar códigodel ejemplo: Todo el card clicable

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-1/3",
  "containerClasses": "p-base border border-neutral-base rounded-sm relative hover:bg-neutral-light"
}) %}
<h3 class="c-h3"><a href="#" class="c-link c-link--full">Título card</a></h3>
    <div class="prose max-w-none">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
    </div>
{% endcall  %}

Con icono

Título card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.

Más
Mostrar códigodel ejemplo: Con icono

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-1/3",
  "containerClasses": "p-base border border-neutral-base rounded-sm"
}) %}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>
    <h3 id="titulo-card-1" class="c-h3">Título card</h3>
    <div class="prose max-w-none mb-base">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
    </div>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
      Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
    </a>
    <!-- /button -->
{% endcall  %}

Sin bordes ni padding y con todo el card clicable

Título card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.

Mostrar códigodel ejemplo: Sin bordes ni padding y con todo el card clicable

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-1/3",
  "containerClasses": "relative"
}) %}
<h3 class="c-h3"><a href="#" class="c-link c-link--full">Título card</a></h3>
    <div class="prose max-w-none">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
    </div>
{% endcall  %}

Barra lateral simple

Título card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.

Más
Mostrar códigodel ejemplo: Barra lateral simple

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-1/3",
  "containerClasses": "flex flex-col p-base bg-neutral-lighter border-t-8 border-neutral-dark"
}) %}
<h3 id="titulo-card-2" class="c-h3">Título card</h3>
    <div class="prose max-w-none mb-base">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
    </div>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-2" aria-labelledby="boton-card-2 titulo-card-2">
      Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
    </a>
    <!-- /button -->
{% endcall  %}

Con super

Título card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.

Más
Mostrar códigodel ejemplo: Con super

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-1/3",
  "containerClasses": "flex flex-col p-base bg-neutral-lighter border-t-8 border-neutral-dark",
  "super": {
    "backgroundFullColor": "transparent",
    "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
    "classes": "order-first h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
    "attributes": {
      "role": "img",
      "aria-label": "Alt de la imagen"
    }
  }
}) %}
<h3 id="titulo-card-3" class="c-h3">Título card</h3>
    <div class="prose max-w-none mb-base">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
    </div>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-3" aria-labelledby="boton-card-3 titulo-card-3">
      Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
    </a>
    <!-- /button -->
{% endcall  %}

Con sub

Título card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.

Más
Mostrar códigodel ejemplo: Con sub

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-1/3",
  "containerClasses": "flex flex-col p-base bg-neutral-lighter border-t-8 border-neutral-dark",
  "sub": {
    "backgroundFullColor": "transparent",
    "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
    "classes": "h-60 -m-base mt-base bg-cover bg-center bg-no-repeat overflow-hidden",
    "attributes": {
      "role": "img",
      "aria-label": "Alt de la imagen"
    }
  }
}) %}
<h3 id="titulo-card-4" class="c-h3">Título card</h3>
    <div class="prose max-w-none mb-base">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
    </div>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-4" aria-labelledby="boton-card-4 titulo-card-4">
      Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
    </a>
    <!-- /button -->
{% endcall  %}

Con imagen a la izquierda en escritorio

En móvil la imagen aparece en el área super.

Título card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.

Más
Mostrar códigodel ejemplo: Con imagen a la izquierda en escritorio

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-2/3",
  "containerClasses": "flex flex-col p-base bg-neutral-lighter border-t-8 border-neutral-dark",
  "super": {
    "backgroundFullColor": "transparent",
    "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
    "classes": "lg:hidden order-first h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
    "attributes": {
      "role": "img",
      "aria-label": "Alt de la imagen"
    }
  },
  "left": {
    "backgroundFullColor": "transparent",
    "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
    "classes": "hidden order-first lg:block w-1/2 -m-base mr-base bg-cover bg-center bg-no-repeat overflow-hidden",
    "attributes": {
      "role": "img",
      "aria-label": "Alt de la imagen"
    }
  }
}) %}
<h3 id="titulo-card-5" class="c-h3">Título card</h3>
    <div class="prose max-w-none mb-base">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
    </div>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-5" aria-labelledby="boton-card-5 titulo-card-5">
      Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
    </a>
    <!-- /button -->
{% endcall  %}

Con imagen a la derecha en escritorio

En móvil la imagen aparece en el área super.

Título card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.

Más
Mostrar códigodel ejemplo: Con imagen a la derecha en escritorio

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-2/3",
  "containerClasses": "flex flex-col p-base bg-neutral-lighter border-t-8 border-neutral-dark",
  "super": {
    "backgroundFullColor": "transparent",
    "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
    "classes": "lg:hidden order-first h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
    "attributes": {
      "role": "img",
      "aria-label": "Alt de la imagen"
    }
  },
  "right": {
    "backgroundFullColor": "transparent",
    "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
    "classes": "hidden lg:block w-1/2 -m-base ml-base bg-cover bg-center bg-no-repeat overflow-hidden",
    "attributes": {
      "role": "img",
      "aria-label": "Alt de la imagen"
    }
  }
}) %}
<h3 id="titulo-card-6" class="c-h3">Título card</h3>
    <div class="prose max-w-none mb-base">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
    </div>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-6" aria-labelledby="boton-card-6 titulo-card-6">
      Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
    </a>
    <!-- /button -->
{% endcall  %}

Bloque de página de inicio sin padding

Mostrar códigodel ejemplo: Bloque de página de inicio sin padding

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-1/2",
  "containerClasses": "py-lg border-t-8 border-neutral-dark"
}) %}
<h2 class="c-h1">Tus datos médicos e información personal</h2>
    <ul class="text-lg">
      <li class="mb-base"><a href="#" class="c-link">Cambiar tus datos de contacto</a></li>
      <li class="mb-base"><a href="#" class="c-link">Dónde y cómo solicitar tu PIN Salud</a></li>
      <li class="mb-base"><a href="#" class="c-link">Cómo solicitar un cambio de centro de salud</a></li>
      <li class="mb-base"><a href="#" class="c-link">Historia Clínica e informes médicos</a></li>
      <li class="mb-base"><a href="#" class="c-link">Derechos de protección de datos</a></li>
    </ul>
{% endcall  %}

Bloque de página de inicio con botones

Tu área personal

En tu área personal puedes pedir cita con tu médico/a, consultar tu historia clínica y encontrar una selección de contenidos y servicios de salud para ti. Accede de forma segura desde cualquier lugar y en cualquier momento, desde tu móvil u ordenador.

Mostrar códigodel ejemplo: Bloque de página de inicio con botones

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "containerClasses": "flex flex-col p-lg bg-neutral-lighter border-t-8 border-neutral-dark",
  "super": {
    "backgroundFullColor": "transparent",
    "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.png&text=Imagen",
    "classes": "lg:hidden order-first h-72 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
    "attributes": {
      "role": "img",
      "aria-label": "Alt de la imagen"
    }
  },
  "right": {
    "backgroundFullColor": "transparent",
    "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
    "classes": "hidden lg:block w-1/2 h-96 -m-lg ml-xl bg-cover bg-center bg-no-repeat overflow-hidden",
    "attributes": {
      "role": "img",
      "aria-label": "Alt de la imagen"
    }
  }
}) %}
<h2 class="c-h1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="inline-block align-middle lg:w-9 lg:h-9 mr-base" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>Tu área personal</h2>
    <p class="c-paragraph-base mb-lg">En tu área personal puedes pedir cita con tu médico/a, consultar tu historia clínica y encontrar una selección de contenidos y servicios de salud para ti. Accede de forma segura desde cualquier lugar y en cualquier momento, desde tu móvil u ordenador.</p>
    <ul class="flex flex-wrap gap-base">
      <li>
        
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--primary" >
      Acceder a Tu área personal
    </a>
    <!-- /button -->
      </li>
      <li>
        
    
    <!-- button -->
    <button class="c-button" >
      Descargar la app
    </button>
    <!-- /button -->
      </li>
    </ul>
{% endcall  %}

Items en lista

Image with fixed dimensions in desktop, text flexible.

Título de noticia

18 octubre 2022

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.

Ver detalle
Mostrar códigodel ejemplo: Items en lista

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-3/4",
  "containerClasses": "flex flex-col p-lg bg-neutral-lighter",
  "super": {
    "backgroundFullColor": "transparent",
    "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
    "classes": "lg:hidden order-first h-56 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
    "attributes": {
      "role": "img",
      "aria-label": "Alt de la imagen"
    }
  },
  "left": {
    "backgroundFullColor": "transparent",
    "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
    "classes": "hidden order-first lg:block w-72 -m-lg mr-lg bg-cover bg-center bg-no-repeat overflow-hidden",
    "attributes": {
      "role": "img",
      "aria-label": "Alt de la imagen"
    }
  }
}) %}
<div class="flex flex-col">
      <h3 id="titulo-card-7" class="c-h3">Título de noticia</h3>
      <p class="order-first c-paragraph-sm mb-base">
        <svg viewBox="0 0 16 16" height="1em" width="1em" class="inline-block align-middle w-6 h-6 mr-xs" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Fecha de publicación: "><path fill-rule="evenodd" clip-rule="evenodd" d="M11.4286 0C11.9019 0 12.2857 0.383755 12.2857 0.857143V1.71429H14C15.1046 1.71429 16 2.60971 16 3.71429V6.71526V8.14383V14C16 15.1046 15.1046 16 14 16H2C0.89543 16 0 15.1046 0 14V8.14383V6.71526V3.71429C0 2.60971 0.895431 1.71429 2 1.71429H3.71429V0.857143C3.71429 0.383755 4.09805 0 4.57143 0C5.04481 0 5.42857 0.383755 5.42857 0.857143V1.71429H10.5714V0.857143C10.5714 0.383755 10.9552 0 11.4286 0ZM3.71429 3.42857V4.28571C3.71429 4.7591 4.09805 5.14286 4.57143 5.14286C5.04481 5.14286 5.42857 4.7591 5.42857 4.28571V3.42857H10.5714V4.28571C10.5714 4.7591 10.9552 5.14286 11.4286 5.14286C11.9019 5.14286 12.2857 4.7591 12.2857 4.28571V3.42857H14C14.1578 3.42857 14.2857 3.55649 14.2857 3.71429V6.32171C14.1944 6.29822 14.0986 6.28571 14 6.28571H2C1.90134 6.28571 1.8056 6.29822 1.71429 6.32171V3.71429C1.71429 3.55649 1.84221 3.42857 2 3.42857H3.71429Z" fill="#1F2331"></path></svg>
        <strong>18 octubre 2022</strong>
      </p>
      <div class="prose max-w-none mb-base">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
      </div>
    </div>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-7" aria-labelledby="boton-card-7 titulo-card-7">
      Ver detalle <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
    </a>
    <!-- /button -->
{% endcall  %}

Bloque mini de página de inicio con icono

Título card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.

Más
Mostrar códigodel ejemplo: Bloque mini de página de inicio con icono

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-1/4",
  "containerClasses": "p-base bg-neutral-lighter"
}) %}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>
    <h3 id="titulo-card-8" class="c-h3">Título card</h3>
    <div class="prose max-w-none mb-base">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
    </div>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-8" aria-labelledby="boton-card-8 titulo-card-8">
      Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
    </a>
    <!-- /button -->
{% endcall  %}