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>

Qué componentes 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>

Qué componentes utilizamos

  • Cards en listados de items para la sección de un portal
    • 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.

    Leer 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.

    Leer 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": "Leer 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-labelledby": "boton-1 titulo-1",
          "id": "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-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": "Leer 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-labelledby": "boton-2 titulo-2",
          "id": "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-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-labelledby": "boton-3 titulo-3",
          "id": "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-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>

Qué componentes utilizamos

  • Cards en listados de items para el incio de un portal
    • 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.

Accesibilidad

  • Cada botón tiene que tener un atributo aria-labelledby que apunte al id de sí mismo y al id del título.

Carrusel

Contenido

Mostrar evento 1

Título de evento 1

18 octubre 2022

Lorem ipsum dolor sit amet consectetur adipiscing elit fames, est risus nulla ante commodo quam cum a, sollicitudin ullamcorper porta libero arcu natoque tempus. Magnis nulla conubia vulputate ornare habitant nunc parturient mollis aliquet felis bibendum, velit magna at volutpat cursus varius suscipit ligula lacus.

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 %}
{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{% set item1 %}
  <div class="flex gap-base lg:gap-lg items-center">
    <button class="c-button" id="tab-1-prev" onclick="getElementById('tab-pagination-4').click();getElementById('titulo-carrusel-4').focus();" >
      <svg role="presentation" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" id="Tailless-Line-Arrow-Left-1--Streamline-Core" height="16" width="16"><desc>Tailless Line Arrow Left 1 Streamline Icon: https://streamlinehq.com</desc><g id="tailless-line-arrow-left-1--arrow-keyboard-left"><path id="Vector 4370 (Stroke)" fill="currentColor" fill-rule="evenodd" d="M12.236685714285715 0.33473485714285717c-0.4462857142857143 -0.4463132571428571 -1.1699199999999998 -0.4463132571428571 -1.61624 0L4.167371428571428 6.787817142857142c-0.6694742857142857 0.6694742857142857 -0.6694742857142857 1.7548914285714285 0 2.424365714285714l6.453074285714285 6.453074285714285c0.44631999999999994 0.4462857142857143 1.1699542857142855 0.4462857142857143 1.61624 0 0.4462857142857143 -0.4462857142857143 0.4462857142857143 -1.1699428571428572 0 -1.6162285714285711L6.187668571428571 8l6.049017142857142 -6.049017142857142c0.4462857142857143 -0.44631999999999994 0.4462857142857143 -1.169934857142857 0 -1.616248Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
      <span class="sr-only">Ir al anterior evento</span>
    </button>
    <div>
      {% call componentCard({
          "containerClasses": "relative min-h-44"
        }) %}
        <div class="flex flex-col-reverse">
          <h3 class="c-h3"><a href="#" class="c-link c-link--full" id="titulo-carrusel-1">Título de evento 1</a></h3>
          <div class="flex gap-sm flex-row items-center pb-base">
            <svg role="img" aria-label="Fecha: " 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 text-neutral-dark">18 octubre 2022</p>
          </div>
        </div>
        <div class="prose max-w-none">
          <p>Lorem ipsum dolor sit amet consectetur adipiscing elit fames, est risus nulla ante commodo quam cum a, sollicitudin ullamcorper porta libero arcu natoque tempus. Magnis nulla conubia vulputate ornare habitant nunc parturient mollis aliquet felis bibendum, velit magna at volutpat cursus varius suscipit ligula lacus.</p>
        </div>
      {% endcall  %}
    </div>
    <button class="c-button" id="tab-1-next" onclick="getElementById('tab-pagination-2').click();getElementById('titulo-carrusel-2').focus();">
      <svg role="presentation" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" id="Tailless-Line-Arrow-Right-1--Streamline-Core" height="16" width="16"><desc>Tailless Line Arrow Right 1 Streamline Icon: https://streamlinehq.com</desc><g id="tailless-line-arrow-right-1--arrow-right-keyboard"><path id="Vector 4370 (Stroke)" fill="currentColor" fill-rule="evenodd" d="M4.334731428571428 0.33473485714285717c0.44631999999999994 -0.4463132571428571 1.1699314285714284 -0.4463132571428571 1.6162514285714285 0L12.404114285714286 6.787817142857142c0.6693714285714285 0.6694742857142857 0.6693714285714285 1.7548914285714285 0 2.424365714285714L5.950982857142857 15.665257142857143c-0.44631999999999994 0.4462857142857143 -1.1699314285714284 0.4462857142857143 -1.6162514285714285 0 -0.4463085714285714 -0.4462857142857143 -0.4463085714285714 -1.1699428571428572 0 -1.6162285714285711L10.383759999999999 8l-6.049028571428572 -6.049017142857142c-0.4463085714285714 -0.44631999999999994 -0.4463085714285714 -1.169934857142857 0 -1.616248Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
      <span class="sr-only">Ir al siguiente evento</span>

    </button>
  </div>
{% endset %}
{% set item2 %}
  <div class="flex gap-base lg:gap-lg items-center">
    <button class="c-button" id="tab-2-prev" onclick="getElementById('tab-pagination-1').click();getElementById('titulo-carrusel-1').focus();">
      <svg role="presentation" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" id="Tailless-Line-Arrow-Left-1--Streamline-Core" height="16" width="16"><desc>Tailless Line Arrow Left 1 Streamline Icon: https://streamlinehq.com</desc><g id="tailless-line-arrow-left-1--arrow-keyboard-left"><path id="Vector 4370 (Stroke)" fill="currentColor" fill-rule="evenodd" d="M12.236685714285715 0.33473485714285717c-0.4462857142857143 -0.4463132571428571 -1.1699199999999998 -0.4463132571428571 -1.61624 0L4.167371428571428 6.787817142857142c-0.6694742857142857 0.6694742857142857 -0.6694742857142857 1.7548914285714285 0 2.424365714285714l6.453074285714285 6.453074285714285c0.44631999999999994 0.4462857142857143 1.1699542857142855 0.4462857142857143 1.61624 0 0.4462857142857143 -0.4462857142857143 0.4462857142857143 -1.1699428571428572 0 -1.6162285714285711L6.187668571428571 8l6.049017142857142 -6.049017142857142c0.4462857142857143 -0.44631999999999994 0.4462857142857143 -1.169934857142857 0 -1.616248Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
      <span class="sr-only">Ir al anterior evento</span>
    </button>
    <div>
      {% call componentCard({
          "containerClasses": "relative min-h-44"
        }) %}
        <div class="flex flex-col-reverse">
          <h3 class="c-h3"><a href="#" class="c-link c-link--full" id="titulo-carrusel-2">Título de evento 2</a></h3>
          <div class="flex gap-sm flex-row items-center pb-base">
            <svg role="img" aria-label="Fecha: " 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 text-neutral-dark">18 octubre 2022</p>
          </div>
        </div>
        <div class="prose max-w-none">
          <p>Justo dictumst odio luctus dictum ultrices mauris volutpat, convallis auctor nec ornare facilisi vestibulum eleifend, semper quisque nullam duis bibendum aenean.</p>
        </div>
      {% endcall  %}
    </div>
    <button class="c-button" id="tab-2-next" onclick="getElementById('tab-pagination-3').click();getElementById('titulo-carrusel-3').focus();">
      <svg role="presentation" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" id="Tailless-Line-Arrow-Right-1--Streamline-Core" height="16" width="16"><desc>Tailless Line Arrow Right 1 Streamline Icon: https://streamlinehq.com</desc><g id="tailless-line-arrow-right-1--arrow-right-keyboard"><path id="Vector 4370 (Stroke)" fill="currentColor" fill-rule="evenodd" d="M4.334731428571428 0.33473485714285717c0.44631999999999994 -0.4463132571428571 1.1699314285714284 -0.4463132571428571 1.6162514285714285 0L12.404114285714286 6.787817142857142c0.6693714285714285 0.6694742857142857 0.6693714285714285 1.7548914285714285 0 2.424365714285714L5.950982857142857 15.665257142857143c-0.44631999999999994 0.4462857142857143 -1.1699314285714284 0.4462857142857143 -1.6162514285714285 0 -0.4463085714285714 -0.4462857142857143 -0.4463085714285714 -1.1699428571428572 0 -1.6162285714285711L10.383759999999999 8l-6.049028571428572 -6.049017142857142c-0.4463085714285714 -0.44631999999999994 -0.4463085714285714 -1.169934857142857 0 -1.616248Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
      <span class="sr-only">Ir al siguiente evento</span>
    </button>
  </div>
{% endset %}
{% set item3 %}
  <div class="flex gap-base lg:gap-lg items-center">
    <button class="c-button" id="tab-3-prev" onclick="getElementById('tab-pagination-2').click();getElementById('titulo-carrusel-2').focus();">
      <svg role="presentation" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" id="Tailless-Line-Arrow-Left-1--Streamline-Core" height="16" width="16"><desc>Tailless Line Arrow Left 1 Streamline Icon: https://streamlinehq.com</desc><g id="tailless-line-arrow-left-1--arrow-keyboard-left"><path id="Vector 4370 (Stroke)" fill="currentColor" fill-rule="evenodd" d="M12.236685714285715 0.33473485714285717c-0.4462857142857143 -0.4463132571428571 -1.1699199999999998 -0.4463132571428571 -1.61624 0L4.167371428571428 6.787817142857142c-0.6694742857142857 0.6694742857142857 -0.6694742857142857 1.7548914285714285 0 2.424365714285714l6.453074285714285 6.453074285714285c0.44631999999999994 0.4462857142857143 1.1699542857142855 0.4462857142857143 1.61624 0 0.4462857142857143 -0.4462857142857143 0.4462857142857143 -1.1699428571428572 0 -1.6162285714285711L6.187668571428571 8l6.049017142857142 -6.049017142857142c0.4462857142857143 -0.44631999999999994 0.4462857142857143 -1.169934857142857 0 -1.616248Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
      <span class="sr-only">Ir al anterior evento</span>
    </button>
    <div>
      {% call componentCard({
          "containerClasses": "relative min-h-44"
        }) %}
        <div class="flex flex-col-reverse">
          <h3 class="c-h3"><a href="#" class="c-link c-link--full" id="titulo-carrusel-3">Título de evento 3</a></h3>
          <div class="flex gap-sm flex-row items-center pb-base">
            <svg role="img" aria-label="Fecha: " 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 text-neutral-dark">18 octubre 2022</p>
          </div>
        </div>
        <div class="prose max-w-none">
          <p>Dis sollicitudin a imperdiet ligula vehicula id taciti nulla, natoque sodales ullamcorper facilisi senectus at tortor torquent, turpis dictum ad mus morbi posuere nam</p>
        </div>
      {% endcall  %}
    </div>
    <button class="c-button" id="tab-3-next" onclick="getElementById('tab-pagination-4').click();getElementById('titulo-carrusel-4').focus();">
      <svg role="presentation" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" id="Tailless-Line-Arrow-Right-1--Streamline-Core" height="16" width="16"><desc>Tailless Line Arrow Right 1 Streamline Icon: https://streamlinehq.com</desc><g id="tailless-line-arrow-right-1--arrow-right-keyboard"><path id="Vector 4370 (Stroke)" fill="currentColor" fill-rule="evenodd" d="M4.334731428571428 0.33473485714285717c0.44631999999999994 -0.4463132571428571 1.1699314285714284 -0.4463132571428571 1.6162514285714285 0L12.404114285714286 6.787817142857142c0.6693714285714285 0.6694742857142857 0.6693714285714285 1.7548914285714285 0 2.424365714285714L5.950982857142857 15.665257142857143c-0.44631999999999994 0.4462857142857143 -1.1699314285714284 0.4462857142857143 -1.6162514285714285 0 -0.4463085714285714 -0.4462857142857143 -0.4463085714285714 -1.1699428571428572 0 -1.6162285714285711L10.383759999999999 8l-6.049028571428572 -6.049017142857142c-0.4463085714285714 -0.44631999999999994 -0.4463085714285714 -1.169934857142857 0 -1.616248Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
      <span class="sr-only">Ir al siguiente evento</span>
    </button>
  </div>
{% endset %}
{% set item4 %}
  <div class="flex gap-base lg:gap-lg items-center">
    <button class="c-button" id="tab-4-prev" onclick="getElementById('tab-pagination-3').click();getElementById('titulo-carrusel-3').focus();">
      <svg role="presentation" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" id="Tailless-Line-Arrow-Left-1--Streamline-Core" height="16" width="16"><desc>Tailless Line Arrow Left 1 Streamline Icon: https://streamlinehq.com</desc><g id="tailless-line-arrow-left-1--arrow-keyboard-left"><path id="Vector 4370 (Stroke)" fill="currentColor" fill-rule="evenodd" d="M12.236685714285715 0.33473485714285717c-0.4462857142857143 -0.4463132571428571 -1.1699199999999998 -0.4463132571428571 -1.61624 0L4.167371428571428 6.787817142857142c-0.6694742857142857 0.6694742857142857 -0.6694742857142857 1.7548914285714285 0 2.424365714285714l6.453074285714285 6.453074285714285c0.44631999999999994 0.4462857142857143 1.1699542857142855 0.4462857142857143 1.61624 0 0.4462857142857143 -0.4462857142857143 0.4462857142857143 -1.1699428571428572 0 -1.6162285714285711L6.187668571428571 8l6.049017142857142 -6.049017142857142c0.4462857142857143 -0.44631999999999994 0.4462857142857143 -1.169934857142857 0 -1.616248Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
      <span class="sr-only">Ir al anterior evento</span>
    </button>
    <div>
      {% call componentCard({
          "containerClasses": "relative min-h-44"
        }) %}
        <div class="flex flex-col-reverse">
          <h3 class="c-h3"><a href="#" class="c-link c-link--full" id="titulo-carrusel-4">Título de evento 4</a></h3>
          <div class="flex gap-sm flex-row items-center pb-base">
            <svg role="img" aria-label="Fecha: " 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 text-neutral-dark">18 octubre 2022</p>
          </div>
        </div>
        <div class="prose max-w-none">
          <p>Rutrum quam eleifend augue ultrices mollis interdum nulla vitae, aenean est justo leo taciti et laoreet ligula, hac accumsan sagittis aliquam fringilla per dapibus.</p>
        </div>
      {% endcall  %}
    </div>
    <button class="c-button" id="tab-4-next" onclick="getElementById('tab-pagination-1').click();getElementById('titulo-carrusel-1').focus();">
      <svg role="presentation" disabled="disabled" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" id="Tailless-Line-Arrow-Right-1--Streamline-Core" height="16" width="16"><desc>Tailless Line Arrow Right 1 Streamline Icon: https://streamlinehq.com</desc><g id="tailless-line-arrow-right-1--arrow-right-keyboard"><path id="Vector 4370 (Stroke)" fill="currentColor" fill-rule="evenodd" d="M4.334731428571428 0.33473485714285717c0.44631999999999994 -0.4463132571428571 1.1699314285714284 -0.4463132571428571 1.6162514285714285 0L12.404114285714286 6.787817142857142c0.6693714285714285 0.6694742857142857 0.6693714285714285 1.7548914285714285 0 2.424365714285714L5.950982857142857 15.665257142857143c-0.44631999999999994 0.4462857142857143 -1.1699314285714284 0.4462857142857143 -1.6162514285714285 0 -0.4463085714285714 -0.4462857142857143 -0.4463085714285714 -1.1699428571428572 0 -1.6162285714285711L10.383759999999999 8l-6.049028571428572 -6.049017142857142c-0.4463085714285714 -0.44631999999999994 -0.4463085714285714 -1.169934857142857 0 -1.616248Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
      <span class="sr-only">Ir al siguiente evento</span>
    </button>
  </div>
{% endset %}


<section aria-roledescription="carrusel" aria-label="Carrusel de eventos" id="patron-carrusel">
  <div>
    {{ componentTabs({
      "tablistClasses": "flex justify-center gap-base w-full c-tabs--scroll",
      "tablistAriaLabel": "Acceso a las secciones",
      "idPrefix": "tab-pagination",
      "items": [
        {
          "html": '<span class="sr-only">Mostrar evento 1</span>',
          "panel": {
            "html": item1 | safe,
            "classes": "lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"

          }
        },
        {
          "html": '<span class="sr-only">Mostrar evento 2</span>',
          "panel": {
            "html":  item2 | safe,
            "classes": "lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
          }
        },
        {
          "html": '<span class="sr-only">Mostrar evento 3</span>',
          "panel": {
            "html":  item3 | safe,
            "classes": "lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
          }
        },
        {
          "html": '<span class="sr-only">Mostrar evento 4</span>',
          "panel": {
            "html":  item4 | safe,
            "classes": "lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
          }
        }
      ],
      "classes": "c-tabs--reset c-tabs--list flex flex-col-reverse justify-center gap-base",
      "attributes": {
        "id": "tabs-list",
        "aria-live": "polite"
      }
    }) }}
  </div>
</section>

Qué componentes utilizamos

  • Pestañas en el incio de un portal, incluido en el hero o bajo la cabecera. Sirve para visualizar noticias o eventos.
    • Usa la clase .tabs--reset para controlar el posicionamiento y aplicar clases personalizadas.
  • Botones de avance y retroceso

Accesibilidad

  • Incluido en un <section>. Tiene un aria-roledescription que indica la función de este bloque y un aria-label que describe el listado.
  • Los botones tienen etiquetas .sr-only que desriben la acción.
  • Los botones "Anterior" y "Siguiente" envian el foco al título del evento que corresponda. Alternativamente puedes añadir el atributo aria-live='polite' al panel para anunciar a lectores de pantalla que el evento mostrado ha cambiado.
  • No utilices animaciones automáticas.
  • Basado en el patrón Carousel de W3C