DESY

Sistema de Diseño del Gobierno de Aragón.

Volver

Índice de páginas

Listados

Patrones de componente

Los patrones de listados suelen ser colecciones de enlaces o items de información que pueden aparecer en las zonas centrales de contenido para enlazar a otras secciones.

Índice de apartados de esta página

Cards a secciones principales

Se puede usar como el listado de la página de inicio de una aplicación que enlaza a las secciones principales.

  • Mis notificaciones y comunicaciones

    Acepta y consulta las notificaciones telemáticas.

    • Tienes 4 notificaciones sin leer.
    • Actualmente no tienes comunicaciones sin leer.

  • Mis trámites

    Consulta tus trámites con el Gobierno de Aragón.

    No tienes trámites activos.

  • Mis citas previas

    Solicita, consulta y gestiona tus citas previas.

    Tienes 3 citas previas próximas.

Mostrar código del ejemplo: includes/_pattern.cards-a-secciones-principales.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.cards-a-secciones-principales.njk

{% from "components/button/_macro.button.njk" import componentButton %}
{% from "components/card/_macro.card.njk" import componentCard %}

<ul>
  <li>
    {% call componentCard({
      "classes": "mb-base",
      "containerClasses": "p-base border border-neutral-base rounded relative hover:bg-neutral-light"
    }) %}
      <div class="flex flex-wrap gap-base">
        <div>
          <svg role="presentation" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="2.2em" height="2.2em" focusable="false" class="w-6 h-6 lg:w-9 lg:h-9 mb-xs"><path d="M22 1.5H5.5a2 2 0 0 0-2 2V17a2 2 0 0 0 2 2H22a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2Zm-.5 2a.5.5 0 0 1 .5.5v.19a.5.5 0 0 1-.22.42l-7.52 5a.52.52 0 0 1-.55 0l-8-5a.5.5 0 0 1-.23-.42V4A.5.5 0 0 1 6 3.5ZM6 17a.5.5 0 0 1-.5-.5V7.72a.51.51 0 0 1 .26-.44.49.49 0 0 1 .51 0l7.2 4.54A.92.92 0 0 0 14 12a1 1 0 0 0 .55-.17l6.67-4.45a.5.5 0 0 1 .78.42v8.7a.51.51 0 0 1-.5.5Z" fill="currentColor" transform="scale(2)"></path><path d="M19.5 20.5h-17A.5.5 0 0 1 2 20V6a1 1 0 0 0-2 0v14.5a2 2 0 0 0 2 2h17.5a1 1 0 0 0 0-2Z" fill="currentColor" transform="scale(2)"></path></svg>
        </div>
        <div class="flex-1">
          <h2 id="titulo-card-1" class="c-h3"><a href="#" class="c-link c-link--full">Mis notificaciones y comunicaciones</a></h2>
          <p class="c-paragraph-base mb-sm">Acepta y consulta las notificaciones telemáticas.</p>
          <ul class="text-sm text-neutral-dark">
            <li>Tienes <strong>4 notificaciones</strong> sin leer.</li>
            <li>Actualmente no tienes comunicaciones sin leer.</li>
          </ul>
        </div>
      </div>
    {% endcall  %}
  </li>
  <li>
    {% call componentCard({
      "classes": "mb-base",
      "containerClasses": "p-base border border-neutral-base rounded relative hover:bg-neutral-light"
    }) %}
      <div class="flex flex-wrap gap-base">
        <div>
          <svg role="presentation" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="2.2em" height="2.2em" focusable="false" class="w-6 h-6 lg:w-9 lg:h-9 mb-xs"><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>
        </div>
        <div class="flex-1">
          <h2 id="titulo-card-2" class="c-h3"><a href="#" class="c-link c-link--full">Mis trámites</a></h2>
          <p class="c-paragraph-base mb-sm">Consulta tus trámites con el Gobierno de Aragón.</p>
          <p class="text-sm text-neutral-dark">
            No tienes trámites activos.
          </p>
        </div>
      </div>
    {% endcall  %}
  </li>
  <li>
    {% call componentCard({
      "containerClasses": "p-base border border-neutral-base rounded relative hover:bg-neutral-light"
    }) %}
    <div class="flex flex-wrap gap-base">
      <div>
        <svg role="presentation" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="2.2em" height="2.2em" focusable="false" class="w-6 h-6 lg:w-9 lg:h-9 mb-xs"><path d="M7.5 10.5h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2ZM12.5 10.5h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2ZM17.5 10.5h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2ZM7.5 14.5h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2ZM12.5 14.5h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2ZM17.5 14.5h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2ZM7.5 18.5h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2ZM12.5 18.5h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2ZM17.5 18.5h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2Z" fill="currentColor" transform="scale(2)"></path><path d="M21.5 3h-2.75a.25.25 0 0 1-.25-.25V1a1 1 0 0 0-2 0v4.75a.75.75 0 0 1-1.5 0V3.5a.5.5 0 0 0-.5-.5H8.25A.25.25 0 0 1 8 2.75V1a1 1 0 0 0-2 0v4.75a.75.75 0 0 1-1.5 0V3.5A.5.5 0 0 0 4 3H2.5a2 2 0 0 0-2 2v17a2 2 0 0 0 2 2h19a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Zm0 18.5a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5v-12A.5.5 0 0 1 3 9h18a.5.5 0 0 1 .5.5Z" fill="currentColor" transform="scale(2)"></path></svg>
      </div>
      <div class="flex-1">
        <h2 id="titulo-card-3" class="c-h3"><a href="#" class="c-link c-link--full">Mis citas previas</a></h2>
        <p class="c-paragraph-base mb-sm">Solicita, consulta y gestiona tus citas previas.</p>
        <p class="text-sm text-neutral-dark">
          Tienes <strong>3 citas previas</strong> próximas.
        </p>
      </div>
    </div>
    {% endcall  %}
  </li>
</ul>

Cards misma altura

Retícula de cards que muestran todos la misma altura que corresponde al card más alto.

  • Servicios sociales

    Información de discapacidad, dependencia y hogares.

  • Oposiciones

    Consulta las próximas oposiciones a las que puedes participar, los resultados de tus exámenes y tu posición en las listas.

  • Educación y formación

    Consulta tus datos y documentos de educación.

  • Deudas y pagos

    Consulta tus declaraciones de hacienda, deudas y pagos.

Mostrar código del ejemplo: includes/_pattern.cards-misma-altura.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.cards-misma-altura.njk

{% from "components/button/_macro.button.njk" import componentButton %}
{% from "components/card/_macro.card.njk" import componentCard %}

<ul class="grid grid-cols-2 lg:grid-cols-4 content-stretch gap-lg">
  <li>
    {% call componentCard({
      "classes": "h-full",
      "containerClasses": "h-full p-base border border-neutral-base rounded"
    }) %}
      <h3 id="titulo-card-misma-altura-1" class="c-h3"><a href="#" class="c-link">Servicios sociales</a></h3>
      <div class="prose max-w-none mb-base">
        <p>Información de discapacidad, dependencia y hogares.</p>
      </div>
    {% endcall  %}
  </li>
  <li>
    {% call componentCard({
      "classes": "h-full",
      "containerClasses": "h-full p-base border border-neutral-base rounded"
    }) %}
      <h3 id="titulo-card-misma-altura-2" class="c-h3"><a href="#" class="c-link">Oposiciones</a></h3>
      <div class="prose max-w-none mb-base">
        <p>Consulta las próximas oposiciones a las que puedes participar, los resultados de tus exámenes y tu posición en las listas.</p>
      </div>
    {% endcall  %}
  </li>
  <li>
    {% call componentCard({
      "classes": "h-full",
      "containerClasses": "h-full p-base border border-neutral-base rounded"
    }) %}
      <h3 id="titulo-card-misma-altura-3" class="c-h3"><a href="#" class="c-link">Educación y formación</a></h3>
      <div class="prose max-w-none mb-base">
        <p>Consulta tus datos y documentos de educación.</p>
      </div>
    {% endcall  %}
  </li>
  <li>
    {% call componentCard({
      "classes": "h-full",
      "containerClasses": "h-full p-base border border-neutral-base rounded"
    }) %}
      <h3 id="titulo-card-misma-altura-4" class="c-h3"><a href="#" class="c-link">Deudas y pagos</a></h3>
      <div class="prose max-w-none mb-base">
        <p>Consulta tus declaraciones de hacienda, deudas y pagos.</p>
      </div>
    {% endcall  %}
  </li>
</ul>

Cards misma altura y botón abajo

Retícula de cards que muestran todos la misma altura que corresponde al card más alto y cada uno con un botón situado en el pie del card.

  • Título item 1

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dolorum obcaecati voluptates, ab cupiditate.

    Ver más

  • Título item 2

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Et eligendi, animi consequuntur provident iure totam velit, qui laborum, repellendus non quis praesentium.

    Ver más

  • Título item 3

    Et eligendi, animi consequuntur provident iure totam velit, qui laborum.

    Ver más
Mostrar código del ejemplo: includes/_pattern.cards-misma-altura-y-boton-abajo.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.cards-misma-altura-y-boton-abajo.njk

{% from "components/button/_macro.button.njk" import componentButton %}
{% from "components/card/_macro.card.njk" import componentCard %}

<ul class="grid grid-cols-2 lg:grid-cols-3 content-stretch gap-lg">
  <li>
    {% set verMasContent1 %}
      {{ componentButton({
        "html": "Ver 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>",
        "classes": "c-button--transparent",
        "href": "#",
        "attributes": {
          "aria-describedby": "titulo-card-boton-1"
        }
      }) }}
    {% endset %}
    {% call componentCard({
      "classes": "h-full",
      "containerClasses": "flex flex-col justify-between h-full p-base border border-neutral-base rounded",
      "sub": {
        "html": verMasContent1 | safe,
        "backgroundFullColor": "transparent",
        "classes": "block"
      }
    }) %}
      <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-boton-1" class="c-h3"><a href="#" class="c-link">Título item 1</a></h3>
      <div class="prose max-w-none mb-base">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dolorum obcaecati voluptates, ab cupiditate.</p>
      </div>
    {% endcall  %}
  </li>
  <li>
    {% set verMasContent2 %}
      {{ componentButton({
        "html": "Ver 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>",
        "classes": "c-button--transparent",
        "href": "#",
        "attributes": {
          "aria-describedby": "titulo-card-boton-2"
        }
      }) }}
    {% endset %}
    {% call componentCard({
      "classes": "h-full",
      "containerClasses": "flex flex-col justify-between h-full p-base border border-neutral-base rounded",
      "sub": {
        "html": verMasContent2 | safe,
        "backgroundFullColor": "transparent",
        "classes": "block"
      }
    }) %}
      <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-boton-2" class="c-h3"><a href="#" class="c-link">Título item 2</a></h3>
      <div class="prose max-w-none mb-base">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et eligendi, animi consequuntur provident iure totam velit, qui laborum, repellendus non quis praesentium.</p>
      </div>
    {% endcall  %}
  </li>
  <li>
    {% set verMasContent3 %}
      {{ componentButton({
        "html": "Ver 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>",
        "classes": "c-button--transparent",
        "href": "#",
        "attributes": {
          "aria-describedby": "titulo-card-boton-3"
        }
      }) }}
    {% endset %}
    {% call componentCard({
      "classes": "h-full",
      "containerClasses": "flex flex-col justify-between h-full p-base border border-neutral-base rounded",
      "sub": {
        "html": verMasContent3 | safe,
        "backgroundFullColor": "transparent",
        "classes": "block"
      }
    }) %}
      <div class="flex flex-col">
        <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-boton-3" class="c-h3"><a href="#" class="c-link">Título item 3</a></h3>
        <div class="prose max-w-none mb-base">
          <p>Et eligendi, animi consequuntur provident iure totam velit, qui laborum.</p>
        </div>
      </div>
    {% endcall  %}
  </li>
</ul>