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.

    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>

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.

Carrusel

Contenido

Ir a sección 1

18 octubre 2022

Título de evento 1

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" disabled="disabled" id="tab-1-prev">
      <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 item anterior</span>
    </button>
    <div>
      {% call componentCard({
          "containerClasses": "relative min-h-44"
        }) %}
        <div class="flex gap-sm flex-row items-center pb-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 text-neutral-dark">18 octubre 2022</p>
        </div>
        <h3 class="c-h3"><a href="#" class="c-link c-link--full">Título de evento 1</a></h3>
        <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('tab-2-next').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 item siguiente</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('tab-1-prev').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 item anterior</span>
    </button>
    <div>
      {% call componentCard({
          "containerClasses": "relative min-h-44"
        }) %}
        <div class="flex gap-sm flex-row items-center pb-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 text-neutral-dark">18 octubre 2022</p>
        </div>
        <h3 class="c-h3"><a href="#" class="c-link c-link--full">Título de evento 2</a></h3>
        <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('tab-3-next').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 item siguiente</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('tab-2-prev').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 item anterior</span>
    </button>
    <div>
      {% call componentCard({
          "containerClasses": "relative min-h-44"
        }) %}
        <div class="flex gap-sm flex-row items-center pb-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 text-neutral-dark">18 octubre 2022</p>
        </div>
        <h3 class="c-h3"><a href="#" class="c-link c-link--full">Título de evento 3</a></h3>
        <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('tab-4-next').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 item siguiente</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('tab-3-prev').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 item anterior</span>
    </button>
    <div>
      {% call componentCard({
          "containerClasses": "relative min-h-44"
        }) %}
        <div class="flex gap-sm flex-row items-center pb-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 text-neutral-dark">18 octubre 2022</p>
        </div>
        <h3 class="c-h3"><a href="#" class="c-link c-link--full">Título de evento 4</a></h3>
        <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" disabled="disabled">
      <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 item siguiente</span>
    </button>
  </div>
{% endset %}


<section aria-roledescription="carrusel" aria-label="Listado de items destacados">
  <div>
    {{ componentTabs({
      "tablistClasses": "flex justify-center lg:gap-0 gap-base w-full c-tabs--scroll",
      "tablistAriaLabel": "Acceso a las secciones",
      "idPrefix": "tab-pagination",
      "items": [
        {
          "html": '<div class="aspect-square rounded-full c-button c-button--sm"><span class="sr-only">Ir a sección 1</span></div>',
          "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": '<div class="aspect-square rounded-full c-button c-button--sm"><span class="sr-only">Ir a sección 1</span></div>',
          "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": '<div class="aspect-square rounded-full c-button c-button--sm"><span class="sr-only">Ir a sección 1</span></div>',
          "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": '<div class="aspect-square rounded-full c-button c-button--sm"><span class="sr-only">Ir a sección 1</span></div>',
          "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 lg:gap-0 gap-base",
      "attributes": {
        "id": "tabs-list"
      }
    }) }}
  </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 estilos.
  • 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.
  • No utilices animaciones automáticas.
  • Basado en el patrón Carousel de W3C