DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Listados

Cómo mostramos información

Colecciones de items con enlaces

Casos de uso

Vertical

  • 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>

Cuándo lo utilizamos

Horizontal con 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-base">
  <li>
    {% call componentCard({
      "classes": "h-full",
      "containerClasses": "h-full p-base border border-neutral-base rounded relative hover:bg-neutral-light"
    }) %}
      <h3 id="titulo-card-misma-altura-1" class="c-h3"><a href="#" class="c-link c-link--full">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 relative hover:bg-neutral-light"
    }) %}
      <h3 id="titulo-card-misma-altura-2" class="c-h3"><a href="#" class="c-link c-link--full">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 relative hover:bg-neutral-light"
    }) %}
      <h3 id="titulo-card-misma-altura-3" class="c-h3"><a href="#" class="c-link c-link--full">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 relative hover:bg-neutral-light"
    }) %}
      <h3 id="titulo-card-misma-altura-4" class="c-h3"><a href="#" class="c-link c-link--full">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>

Cuándo lo utilizamos

Qué debes tener en cuenta

  • Utilizamos un grid de cuatro columnas en escritorio y dos en anchuras pequeñas
  • Utilizamos la clase .content-stretch para que los items tengan la misma altura que item más alto.

Horizontal con botón en el pie

  • 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>

Cuándo lo utilizamos

Qué debes tener en cuenta

  • Utilizamos un grid de tres columnas en escritorio y dos en anchuras pequeñas
  • Utilizamos la clase .content-stretch en el listado y .justify-between en los contenedores para que los items tengan el botón a la misma altura.

Carrusel

  • 18 octubre 2022

    Título de evento

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum

  1. Ir a sección 1
  2. Ir a sección 2
  3. Ir a sección 3
  4. Ir a sección 4
Mostrar código del ejemplo: includes/_pattern.listados-carrusel.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.listados-carrusel.njk

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

<div  role="region" aria-label="Carrusel">
  <div class="flex items-center gap-lg">
    <div>
      {{ componentButton({
        "html": '<svg aria-label="Ir a sección anterior" version="1.1" id="Arrow-Left-1--Streamline-Ultimate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="-0.5 -0.5 16 16" xml:space="preserve" enable-background="new 0 0 24 24" height="16" width="16"><desc>Arrow Left 1 Streamline Icon: https://streamlinehq.com</desc><path d="M2.8125 7.5c0 -0.4375 0.1875 -0.8125 0.5 -1.0625L10.3125 0.3125c0.5 -0.4375 1.1875 -0.375 1.625 0.125 0.375 0.5 0.375 1.1875 -0.125 1.5625l-6.125 5.375c-0.0625 0.0625 -0.0625 0.125 0 0.1875l6.125 5.375c0.5 0.4375 0.5625 1.125 0.125 1.625s-1.125 0.5625 -1.625 0.125l-0.0625 -0.0625 -6.9375 -6.0625c-0.3125 -0.25 -0.5 -0.6875 -0.5 -1.0625z" fill="currentColor" stroke-width="1"></path></svg>',
        "classes": "c-button align-bottom"
      }) }}
    </div>
    <ul class="grid grid-cols-1 content-stretch gap-lg w-full">
      <li>
        {% call componentCard({
          "containerClasses": "relative"
        }) %}
        <div class="flex gap-sm lg:flex-row flex-col lg:items-center mb-base">
          <svg aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block w-6 h-6 mr-xs"><g><path d="M7.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M21.5,3H18.75a.25.25,0,0,1-.25-.25V1a1,1,0,0,0-2,0V5.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,6,1V5.75a.75.75,0,0,1-1.5,0V3.5A.5.5,0,0,0,4,3H2.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h19a2,2,0,0,0,2-2V5A2,2,0,0,0,21.5,3Zm0,18.5a.5.5,0,0,1-.5.5H3a.5.5,0,0,1-.5-.5V9.5A.5.5,0,0,1,3,9H21a.5.5,0,0,1,.5.5Z" fill="currentColor"></path></g></svg>
          <p class="text-sm"><strong>18 octubre 2022</strong></p>
        </div>
        <h3 id="titulo-card-2" class="c-h3"><a href="#" class="c-link c-link--full">Título de evento</a></h3>
        <div class="prose max-w-none mb-base">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum</p>
        </div>
        {% endcall  %}
      </li>
    </ul>
    <div>
      {{ componentButton({
        "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="self-center" aria-label="Ir a sección siguiente" focusable="false" width="1em" height="1em"><g><path fill="currentColor" fill-rule="evenodd" d="M3.4685 0.427C3.8512 0.0443 4.4717 0.0443 4.8545 0.427L10.388 5.9606C10.962 6.5346 10.962 7.4654 10.388 8.0395L4.8545 13.573C4.4717 13.9557 3.8512 13.9557 3.4685 13.573C3.0858 13.1903 3.0858 12.5698 3.4685 12.1871L8.6556 7L3.4685 1.813C3.0858 1.4303 3.0858 0.8098 3.4685 0.427Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
        "classes": "c-button align-bottom"
      }) }}
    </div>
  </div>
  
  <ol class="pt-base flex gap-sm place-content-center scale-75">
    <li>
      <a class="aspect-square rounded-full c-button c-button--sm " href="#"><span class="sr-only">Ir a sección 1</span></a>
    </li>
    <li>
      <a class="aspect-square rounded-full c-button c-button--sm" href="#"><span class="sr-only">Ir a sección 2</span></a>
    </li>
    <li>
      <a class="aspect-square rounded-full c-button c-button--primary c-button--sm" href="#" aria-current="true"><span class="sr-only">Ir a sección 3</span></a>
    </li>
    <li>
      <a class="aspect-square rounded-full c-button c-button--sm" href="#"><span class="sr-only">Ir a sección 4</span></a>
    </li>
  </ol>
</div>

Cuándo lo utilizamos

  • En el incio de un portal, incluido en el hero o bajo la cabecera. Sirve para visualizar noticias o eventos.

Qué debes tener en cuenta

  • Incluido en un contenedor con role="region" y un aria-label que lo describe.
  • Los items incluidos dentro del carrusel se encuentran maquetados como un lsitado <ul>, aunque sólo se muestra uno en pantalla.
  • Necesitas botones de avanzar y retroceder correctamente etiquetados para navegar entre los items.
  • El paginador en la parte baja está maquetado como una lista de botones <ol>. Cada uno contiene una etiqueta con .sr-only que indica la sección que permite mostrar.
  • No utilices animaciones automáticas.
  • Basado en el patrón Carousel de W3C