Tabs

Parámetros Nunjucks del componente: "Tabs". Versión: 12.0.1

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\n- name: id\n  type: string\n  required: false\n  description: This is used for the main component and to compose id attribute for each item.\n- name: idPrefix\n  type: string\n  required: false\n  description: String to prefix id for each tab item if no id is specified on each item\n- name: title\n  type: string\n  required: true\n  description: Title for the tabs table of contents\n- name: headingLevel\n  type: number\n  required: false\n  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.\n- name: tablistClasses\n  type: string\n  required: false\n  description: Classes to add to the role=tablist element\n- name: tablistAriaLabel\n  type: string\n  required: true\n  description: aria-label for the role=tablist element\n- name: items\n  type: array\n  required: true\n  description: Array of tab items.\n  params:\n  - name: id\n    type: string\n    required: true\n    description: Specific id attribute for the tab item. If omitted, then `idPrefix` string is required instead.\n  - name: text\n    type: string\n    required: true\n    description: If `html` is set, this is not required. Text to use within each tab label. If `html` is provided, the `text` argument will be ignored.\n  - name: html\n    type: string\n    required: true\n    description: If `text` is set, this is not required. HTML to use within the each tab label. If `html` is provided, the `text` argument will be ignored.\n  - name: disabled\n    type: boolean\n    required: false\n    description: If true, nav item will be disabled.\n  - name: active\n    type: boolean\n    required: false\n    description: If true, tab item will be selected at start.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to the tab.\n  - name: panel\n    description: Content for the panel\n    type: object\n    required: true\n    params:\n      - name: text\n        type: string\n        required: true\n        description: If `html` is set, this is not required. Text to use within each tab panel. If `html` is provided, the `text` argument will be ignored.\n      - name: html\n        type: string\n        required: true\n        description: If `text` is set, this is not required. HTML to use within the each tab panel. If `html` is provided, the `text` argument will be ignored.\n      - name: classes\n        type: string\n        required: false\n        description: Classes to add to the tab panel.\n      - name: attributes\n        type: object\n        required: false\n        description: HTML attributes (for example data attributes) to add to the tab panel.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the tabs component.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the tabs component.\n","length":2897}

Mostrar parámetros

Parámetros Nunjucks del componente: "Tabs"

              params:
- name: id
  type: string
  required: false
  description: This is used for the main component and to compose id attribute for each item.
- name: idPrefix
  type: string
  required: false
  description: String to prefix id for each tab item if no id is specified on each item
- name: title
  type: string
  required: true
  description: Title for the tabs table of contents
- name: headingLevel
  type: number
  required: false
  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
- name: tablistClasses
  type: string
  required: false
  description: Classes to add to the role=tablist element
- name: tablistAriaLabel
  type: string
  required: true
  description: aria-label for the role=tablist element
- name: items
  type: array
  required: true
  description: Array of tab items.
  params:
  - name: id
    type: string
    required: true
    description: Specific id attribute for the tab item. If omitted, then `idPrefix` string is required instead.
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within each tab label. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within the each tab label. If `html` is provided, the `text` argument will be ignored.
  - name: disabled
    type: boolean
    required: false
    description: If true, nav item will be disabled.
  - name: active
    type: boolean
    required: false
    description: If true, tab item will be selected at start.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the tab.
  - name: panel
    description: Content for the panel
    type: object
    required: true
    params:
      - name: text
        type: string
        required: true
        description: If `html` is set, this is not required. Text to use within each tab panel. If `html` is provided, the `text` argument will be ignored.
      - name: html
        type: string
        required: true
        description: If `text` is set, this is not required. HTML to use within the each tab panel. If `html` is provided, the `text` argument will be ignored.
      - name: classes
        type: string
        required: false
        description: Classes to add to the tab panel.
      - name: attributes
        type: object
        required: false
        description: HTML attributes (for example data attributes) to add to the tab panel.
- name: classes
  type: string
  required: false
  description: Classes to add to the tabs component.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the tabs component.

Por defecto #

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tabs -->
<div class="c-tabs" id="tabs-default" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-1" id="tab-example-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 1
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-2" id="tab-example-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 2
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-3" id="tab-example-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 3
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-4" id="tab-example-4" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 4
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 1</h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 2</h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-3" tabindex="0" role="tabpanel" aria-labelledby="tab-example-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 3</h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-4" tabindex="0" role="tabpanel" aria-labelledby="tab-example-4" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 4</h3>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "idPrefix": "tab-example",
  "items": [
    {
      "text": "Tab 1",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 2",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 3",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 4",
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    }
  ],
  "attributes": {
    "id": "tabs-default"
  }
}) }}

Contenido

Tab 1

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

Mostrar código

Contenido

Nunjucks macro

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "idPrefix": "tab-example",
  "items": [
    {
      "text": "Tab 1",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 2",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 3",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 4",
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    }
  ],
  "attributes": {
    "id": "tabs-default"
  }
}) }}

HTML

<!-- tabs -->
<div class="c-tabs" id="tabs-default" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-1" id="tab-example-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 1
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-2" id="tab-example-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 2
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-3" id="tab-example-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 3
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-4" id="tab-example-4" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 4
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 1</h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 2</h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-3" tabindex="0" role="tabpanel" aria-labelledby="tab-example-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 3</h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-4" tabindex="0" role="tabpanel" aria-labelledby="tab-example-4" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 4</h3>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Con encabezado #

Usa el parámetro 'headingLevel' para establecer el nivel del encabezado. Por ejemplo: 'headingLevel': 3 creará un encabezado <h3>.

Ejemplo: "Con encabezado", de código HTML, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tabs -->
<div class="c-tabs" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h3>Título con h3</h3>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="headingLevel example">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-headinglevel-example-1" id="headinglevel-example-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 1 con h4
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-headinglevel-example-2" id="headinglevel-example-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 2 con h4
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-headinglevel-example-3" id="headinglevel-example-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 3 con h4
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-headinglevel-example-4" id="headinglevel-example-4" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 4 con h4
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-headinglevel-example-1" tabindex="0" role="tabpanel" aria-labelledby="headinglevel-example-1">
    <div class="c-tabs__panel-heading">
      <h4 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 1 con h4</h4>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-headinglevel-example-2" tabindex="0" role="tabpanel" aria-labelledby="headinglevel-example-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h4 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 2 con h4</h4>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-headinglevel-example-3" tabindex="0" role="tabpanel" aria-labelledby="headinglevel-example-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h4 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 3 con h4</h4>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-headinglevel-example-4" tabindex="0" role="tabpanel" aria-labelledby="headinglevel-example-4" hidden="">
    <div class="c-tabs__panel-heading">
      <h4 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 4 con h4</h4>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Ejemplo: "Con encabezado", de código Nunjucks, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "title": "Título con h3",
  "headingLevel": 3,
  "tablistAriaLabel": "headingLevel example",
  "idPrefix": "headinglevel-example",
  "items": [
    {
      "text": "Tab 1 con h4",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 2 con h4",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 3 con h4",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 4 con h4",
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    }
  ]
}) }}

Título con h3

Tab 1 con h4

Mostrar código

Contenido

Nunjucks macro

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "title": "Título con h3",
  "headingLevel": 3,
  "tablistAriaLabel": "headingLevel example",
  "idPrefix": "headinglevel-example",
  "items": [
    {
      "text": "Tab 1 con h4",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 2 con h4",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 3 con h4",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 4 con h4",
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    }
  ]
}) }}

HTML

<!-- tabs -->
<div class="c-tabs" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h3>Título con h3</h3>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="headingLevel example">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-headinglevel-example-1" id="headinglevel-example-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 1 con h4
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-headinglevel-example-2" id="headinglevel-example-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 2 con h4
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-headinglevel-example-3" id="headinglevel-example-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 3 con h4
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-headinglevel-example-4" id="headinglevel-example-4" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 4 con h4
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-headinglevel-example-1" tabindex="0" role="tabpanel" aria-labelledby="headinglevel-example-1">
    <div class="c-tabs__panel-heading">
      <h4 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 1 con h4</h4>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-headinglevel-example-2" tabindex="0" role="tabpanel" aria-labelledby="headinglevel-example-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h4 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 2 con h4</h4>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-headinglevel-example-3" tabindex="0" role="tabpanel" aria-labelledby="headinglevel-example-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h4 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 3 con h4</h4>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-headinglevel-example-4" tabindex="0" role="tabpanel" aria-labelledby="headinglevel-example-4" hidden="">
    <div class="c-tabs__panel-heading">
      <h4 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 4 con h4</h4>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Con html en tabs #

Ejemplo: "Con html en tabs", de código HTML, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tabs -->
<div class="c-tabs" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-html-1" id="tab-example-html-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Archivo' role='img' focusable='false'>
          <path d='M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z' fill='currentColor' />
          <path d='M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z' fill='currentColor' />
        </svg> Tab 1
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-html-2" id="tab-example-html-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Link' role='img' focusable='false'>
          <path d='M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z' fill='currentColor' />
          <path d='M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z' fill='currentColor' />
          <path d='M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z' fill='currentColor' />
        </svg> Tab 2
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-html-3" id="tab-example-html-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Solicitud' role='img' focusable='false'>
          <path d='M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z' fill='currentColor' />
          <path d='M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z' fill='currentColor' />
          <path d='M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z' fill='currentColor' />
        </svg> Tab 3
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-html-4" id="tab-example-html-4" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Borrar' role='img' focusable='false'>
          <g fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'>
            <path d='M100.625 122.5h-61.25a8.75 8.75 0 0 1-8.75-8.75V35h78.75v78.75a8.75 8.75 0 0 1-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 0 0-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 0 0-8.75-8.75z' stroke-width='8.749995' />
          </g>
        </svg> Tab 4
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-html-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-html-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 mr-xs" aria-label="Archivo" role="img" focusable="false">
          <path d="M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z" fill="currentColor" />
          <path d="M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z" fill="currentColor" />
        </svg> Tab 1</h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-html-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-html-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 mr-xs" aria-label="Link" role="img" focusable="false">
          <path d="M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z" fill="currentColor" />
          <path d="M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z" fill="currentColor" />
          <path d="M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z" fill="currentColor" />
        </svg> Tab 2</h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-html-3" tabindex="0" role="tabpanel" aria-labelledby="tab-example-html-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 mr-xs" aria-label="Solicitud" role="img" focusable="false">
          <path d="M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z" fill="currentColor" />
          <path d="M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z" fill="currentColor" />
          <path d="M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z" fill="currentColor" />
        </svg> Tab 3</h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-html-4" tabindex="0" role="tabpanel" aria-labelledby="tab-example-html-4" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 mr-xs" aria-label="Borrar" role="img" focusable="false">
          <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
            <path d="M100.625 122.5h-61.25a8.75 8.75 0 0 1-8.75-8.75V35h78.75v78.75a8.75 8.75 0 0 1-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 0 0-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 0 0-8.75-8.75z" stroke-width="8.749995" />
          </g>
        </svg> Tab 4</h3>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Ejemplo: "Con html en tabs", de código Nunjucks, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "idPrefix": "tab-example-html",
  "items": [
    {
      "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Archivo' role='img' focusable='false'><path d='M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z' fill='currentColor'/><path d='M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z' fill='currentColor'/></svg> Tab 1",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Link' role='img' focusable='false'><path d='M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z' fill='currentColor'/><path d='M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z' fill='currentColor'/><path d='M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z' fill='currentColor'/></svg> Tab 2",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Solicitud' role='img' focusable='false'><path d='M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z' fill='currentColor'/><path d='M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z' fill='currentColor'/><path d='M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z' fill='currentColor'/></svg> Tab 3",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Borrar' role='img' focusable='false'><g fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M100.625 122.5h-61.25a8.75 8.75 0 0 1-8.75-8.75V35h78.75v78.75a8.75 8.75 0 0 1-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 0 0-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 0 0-8.75-8.75z' stroke-width='8.749995'/></g></svg> Tab 4",
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    }
  ]
}) }}

Contenido

Tab 1

Mostrar código

Contenido

Nunjucks macro

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "idPrefix": "tab-example-html",
  "items": [
    {
      "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Archivo' role='img' focusable='false'><path d='M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z' fill='currentColor'/><path d='M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z' fill='currentColor'/></svg> Tab 1",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Link' role='img' focusable='false'><path d='M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z' fill='currentColor'/><path d='M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z' fill='currentColor'/><path d='M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z' fill='currentColor'/></svg> Tab 2",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Solicitud' role='img' focusable='false'><path d='M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z' fill='currentColor'/><path d='M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z' fill='currentColor'/><path d='M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z' fill='currentColor'/></svg> Tab 3",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Borrar' role='img' focusable='false'><g fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M100.625 122.5h-61.25a8.75 8.75 0 0 1-8.75-8.75V35h78.75v78.75a8.75 8.75 0 0 1-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 0 0-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 0 0-8.75-8.75z' stroke-width='8.749995'/></g></svg> Tab 4",
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    }
  ]
}) }}

HTML

<!-- tabs -->
<div class="c-tabs" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-html-1" id="tab-example-html-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Archivo' role='img' focusable='false'>
          <path d='M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z' fill='currentColor' />
          <path d='M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z' fill='currentColor' />
        </svg> Tab 1
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-html-2" id="tab-example-html-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Link' role='img' focusable='false'>
          <path d='M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z' fill='currentColor' />
          <path d='M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z' fill='currentColor' />
          <path d='M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z' fill='currentColor' />
        </svg> Tab 2
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-html-3" id="tab-example-html-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Solicitud' role='img' focusable='false'>
          <path d='M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z' fill='currentColor' />
          <path d='M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z' fill='currentColor' />
          <path d='M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z' fill='currentColor' />
        </svg> Tab 3
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-html-4" id="tab-example-html-4" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Borrar' role='img' focusable='false'>
          <g fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'>
            <path d='M100.625 122.5h-61.25a8.75 8.75 0 0 1-8.75-8.75V35h78.75v78.75a8.75 8.75 0 0 1-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 0 0-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 0 0-8.75-8.75z' stroke-width='8.749995' />
          </g>
        </svg> Tab 4
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-html-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-html-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 mr-xs" aria-label="Archivo" role="img" focusable="false">
          <path d="M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z" fill="currentColor" />
          <path d="M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z" fill="currentColor" />
        </svg> Tab 1</h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-html-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-html-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 mr-xs" aria-label="Link" role="img" focusable="false">
          <path d="M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z" fill="currentColor" />
          <path d="M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z" fill="currentColor" />
          <path d="M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z" fill="currentColor" />
        </svg> Tab 2</h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-html-3" tabindex="0" role="tabpanel" aria-labelledby="tab-example-html-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 mr-xs" aria-label="Solicitud" role="img" focusable="false">
          <path d="M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z" fill="currentColor" />
          <path d="M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z" fill="currentColor" />
          <path d="M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z" fill="currentColor" />
        </svg> Tab 3</h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-html-4" tabindex="0" role="tabpanel" aria-labelledby="tab-example-html-4" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 mr-xs" aria-label="Borrar" role="img" focusable="false">
          <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
            <path d="M100.625 122.5h-61.25a8.75 8.75 0 0 1-8.75-8.75V35h78.75v78.75a8.75 8.75 0 0 1-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 0 0-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 0 0-8.75-8.75z" stroke-width="8.749995" />
          </g>
        </svg> Tab 4</h3>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Con item deshabilitado #

Ejemplo: "Con item deshabilitado", de código HTML, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tabs -->
<div class="c-tabs" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-disabled-1" id="tab-example-disabled-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 1
      </span>
    </button>
    <button class="c-tabs__link group opacity-50 pointer-events-none"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-disabled-2" id="tab-example-disabled-2" tabindex="-1" disabled="disabled" aria-disabled="true">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 2
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-disabled-3" id="tab-example-disabled-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 3
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-disabled-4" id="tab-example-disabled-4" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 4
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-disabled-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-disabled-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 1</h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-disabled-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-disabled-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 2</h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-disabled-3" tabindex="0" role="tabpanel" aria-labelledby="tab-example-disabled-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 3</h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-disabled-4" tabindex="0" role="tabpanel" aria-labelledby="tab-example-disabled-4" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 4</h3>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Ejemplo: "Con item deshabilitado", de código Nunjucks, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "idPrefix": "tab-example-disabled",
  "items": [
    {
      "text": "Tab 1",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 2",
      "disabled": true,
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 3",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 4",
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    }
  ]
}) }}

Contenido

Tab 1

Mostrar código

Contenido

Nunjucks macro

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "idPrefix": "tab-example-disabled",
  "items": [
    {
      "text": "Tab 1",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 2",
      "disabled": true,
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 3",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 4",
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    }
  ]
}) }}

HTML

<!-- tabs -->
<div class="c-tabs" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-disabled-1" id="tab-example-disabled-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 1
      </span>
    </button>
    <button class="c-tabs__link group opacity-50 pointer-events-none"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-disabled-2" id="tab-example-disabled-2" tabindex="-1" disabled="disabled" aria-disabled="true">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 2
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-disabled-3" id="tab-example-disabled-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 3
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-disabled-4" id="tab-example-disabled-4" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 4
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-disabled-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-disabled-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 1</h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-disabled-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-disabled-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 2</h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-disabled-3" tabindex="0" role="tabpanel" aria-labelledby="tab-example-disabled-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 3</h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-disabled-4" tabindex="0" role="tabpanel" aria-labelledby="tab-example-disabled-4" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 4</h3>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Con item activo #

Añade active: true a una tab para mostrarla activa inicialmente. También puedes usar con javascript la función global activateItemTabs(elementMenu, idItemSeleccionado) para seleccionar una tab y su panel, usando sus ids. Ej: Abre la consola del navegador y escribe activateItemTabs('tabs-active', 'tab-example-active-3') para desactivar la tab actual y activar la tercera tab de este ejemplo.

Ejemplo: "Con item activo", de código HTML, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tabs -->
<div class="c-tabs" id="tabs-active" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-active-1" id="tab-example-active-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 1
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-active-2" id="tab-example-active-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 2
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-active-3" id="tab-example-active-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 3
      </span>
    </button>
    <button class="c-tabs__link group c-tabs__link--is-active"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-active-4" id="tab-example-active-4" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 4
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-active-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-active-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 1</h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-active-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-active-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 2</h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-active-3" tabindex="0" role="tabpanel" aria-labelledby="tab-example-active-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 3</h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-active-4" tabindex="0" role="tabpanel" aria-labelledby="tab-example-active-4" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 4</h3>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Ejemplo: "Con item activo", de código Nunjucks, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "idPrefix": "tab-example-active",
  "items": [
    {
      "text": "Tab 1",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 2",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 3",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 4",
      "active": true,
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    }
  ],
  "attributes": {
    "id": "tabs-active"
  }
}) }}

Contenido

Tab 1

Mostrar código

Contenido

Nunjucks macro

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "idPrefix": "tab-example-active",
  "items": [
    {
      "text": "Tab 1",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 2",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 3",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 4",
      "active": true,
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    }
  ],
  "attributes": {
    "id": "tabs-active"
  }
}) }}

HTML

<!-- tabs -->
<div class="c-tabs" id="tabs-active" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-active-1" id="tab-example-active-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 1
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-active-2" id="tab-example-active-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 2
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-active-3" id="tab-example-active-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 3
      </span>
    </button>
    <button class="c-tabs__link group c-tabs__link--is-active"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-active-4" id="tab-example-active-4" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 4
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-active-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-active-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 1</h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-active-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-active-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 2</h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-active-3" tabindex="0" role="tabpanel" aria-labelledby="tab-example-active-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 3</h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-active-4" tabindex="0" role="tabpanel" aria-labelledby="tab-example-active-4" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 4</h3>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Con muchos items #

Ejemplo: "Con muchos items", de código HTML, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tabs -->
<div class="c-tabs" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-many-items-1" id="tab-example-many-items-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 1
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-2" id="tab-example-many-items-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 2
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-3" id="tab-example-many-items-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 3
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-4" id="tab-example-many-items-4" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 4
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-5" id="tab-example-many-items-5" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 5
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-6" id="tab-example-many-items-6" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 6
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-7" id="tab-example-many-items-7" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 7
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-8" id="tab-example-many-items-8" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 8
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-9" id="tab-example-many-items-9" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 9
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-10" id="tab-example-many-items-10" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 10
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-11" id="tab-example-many-items-11" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 11
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-12" id="tab-example-many-items-12" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 12
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 1</h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 2</h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-3" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 3</h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-4" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-4" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 4</h3>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-5" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-5" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 5</h3>
    </div>
    <p><strong>Panel 5</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-6" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-6" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 6</h3>
    </div>
    <p><strong>Panel 6</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-7" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-7" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 7</h3>
    </div>
    <p><strong>Panel 7</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-8" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-8" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 8</h3>
    </div>
    <p><strong>Panel 8</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-9" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-9" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 9</h3>
    </div>
    <p><strong>Panel 9</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-10" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-10" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 10</h3>
    </div>
    <p><strong>Panel 10</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-11" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-11" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 11</h3>
    </div>
    <p><strong>Panel 11</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-12" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-12" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 12</h3>
    </div>
    <p><strong>Panel 12</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Ejemplo: "Con muchos items", de código Nunjucks, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "idPrefix": "tab-example-many-items",
  "items": [
    {
      "text": "Tab 1",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 2",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 3",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 4",
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 5",
      "panel": {
        "html": "<p><strong>Panel 5</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 6",
      "panel": {
        "html": "<p><strong>Panel 6</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 7",
      "panel": {
        "html": "<p><strong>Panel 7</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 8",
      "panel": {
        "html": "<p><strong>Panel 8</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 9",
      "panel": {
        "html": "<p><strong>Panel 9</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 10",
      "panel": {
        "html": "<p><strong>Panel 10</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 11",
      "panel": {
        "html": "<p><strong>Panel 11</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 12",
      "panel": {
        "html": "<p><strong>Panel 12</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    }
  ]
}) }}

Contenido

Tab 1

Mostrar código

Contenido

Nunjucks macro

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "idPrefix": "tab-example-many-items",
  "items": [
    {
      "text": "Tab 1",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 2",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 3",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 4",
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 5",
      "panel": {
        "html": "<p><strong>Panel 5</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 6",
      "panel": {
        "html": "<p><strong>Panel 6</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 7",
      "panel": {
        "html": "<p><strong>Panel 7</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 8",
      "panel": {
        "html": "<p><strong>Panel 8</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 9",
      "panel": {
        "html": "<p><strong>Panel 9</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 10",
      "panel": {
        "html": "<p><strong>Panel 10</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 11",
      "panel": {
        "html": "<p><strong>Panel 11</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 12",
      "panel": {
        "html": "<p><strong>Panel 12</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    }
  ]
}) }}

HTML

<!-- tabs -->
<div class="c-tabs" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-many-items-1" id="tab-example-many-items-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 1
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-2" id="tab-example-many-items-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 2
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-3" id="tab-example-many-items-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 3
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-4" id="tab-example-many-items-4" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 4
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-5" id="tab-example-many-items-5" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 5
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-6" id="tab-example-many-items-6" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 6
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-7" id="tab-example-many-items-7" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 7
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-8" id="tab-example-many-items-8" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 8
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-9" id="tab-example-many-items-9" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 9
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-10" id="tab-example-many-items-10" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 10
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-11" id="tab-example-many-items-11" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 11
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-many-items-12" id="tab-example-many-items-12" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 12
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 1</h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 2</h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-3" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 3</h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-4" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-4" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 4</h3>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-5" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-5" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 5</h3>
    </div>
    <p><strong>Panel 5</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-6" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-6" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 6</h3>
    </div>
    <p><strong>Panel 6</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-7" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-7" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 7</h3>
    </div>
    <p><strong>Panel 7</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-8" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-8" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 8</h3>
    </div>
    <p><strong>Panel 8</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-9" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-9" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 9</h3>
    </div>
    <p><strong>Panel 9</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-10" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-10" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 10</h3>
    </div>
    <p><strong>Panel 10</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-11" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-11" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 11</h3>
    </div>
    <p><strong>Panel 11</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-many-items-12" tabindex="0" role="tabpanel" aria-labelledby="tab-example-many-items-12" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 12</h3>
    </div>
    <p><strong>Panel 12</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Con scroll en móvil #

Usa .c-tabs--scroll para hacer que la apariencia en móvil sea la misma que en escritorio. Prueba a mirarlo en breakpoints pequeños y verás que aparece un scroll horizontal.

Ejemplo: "Con scroll en móvil", de código HTML, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tabs -->
<div class="c-tabs c-tabs--scroll" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-scroll-mobile-1" id="tab-example-scroll-mobile-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 1
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-2" id="tab-example-scroll-mobile-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 2
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-3" id="tab-example-scroll-mobile-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 3
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-4" id="tab-example-scroll-mobile-4" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 4
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-5" id="tab-example-scroll-mobile-5" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 5
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-6" id="tab-example-scroll-mobile-6" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 6
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-7" id="tab-example-scroll-mobile-7" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 7
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-8" id="tab-example-scroll-mobile-8" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 8
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-9" id="tab-example-scroll-mobile-9" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 9
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-10" id="tab-example-scroll-mobile-10" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 10
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-11" id="tab-example-scroll-mobile-11" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 11
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-12" id="tab-example-scroll-mobile-12" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 12
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 1</h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 2</h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-3" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 3</h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-4" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-4" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 4</h3>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-5" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-5" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 5</h3>
    </div>
    <p><strong>Panel 5</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-6" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-6" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 6</h3>
    </div>
    <p><strong>Panel 6</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-7" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-7" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 7</h3>
    </div>
    <p><strong>Panel 7</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-8" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-8" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 8</h3>
    </div>
    <p><strong>Panel 8</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-9" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-9" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 9</h3>
    </div>
    <p><strong>Panel 9</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-10" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-10" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 10</h3>
    </div>
    <p><strong>Panel 10</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-11" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-11" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 11</h3>
    </div>
    <p><strong>Panel 11</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-12" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-12" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 12</h3>
    </div>
    <p><strong>Panel 12</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Ejemplo: "Con scroll en móvil", de código Nunjucks, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "idPrefix": "tab-example-scroll-mobile",
  "classes": "c-tabs--scroll",
  "items": [
    {
      "text": "Tab 1",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 2",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 3",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 4",
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 5",
      "panel": {
        "html": "<p><strong>Panel 5</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 6",
      "panel": {
        "html": "<p><strong>Panel 6</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 7",
      "panel": {
        "html": "<p><strong>Panel 7</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 8",
      "panel": {
        "html": "<p><strong>Panel 8</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 9",
      "panel": {
        "html": "<p><strong>Panel 9</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 10",
      "panel": {
        "html": "<p><strong>Panel 10</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 11",
      "panel": {
        "html": "<p><strong>Panel 11</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 12",
      "panel": {
        "html": "<p><strong>Panel 12</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    }
  ]
}) }}

Contenido

Tab 1

Mostrar código

Contenido

Nunjucks macro

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "idPrefix": "tab-example-scroll-mobile",
  "classes": "c-tabs--scroll",
  "items": [
    {
      "text": "Tab 1",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 2",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 3",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 4",
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 5",
      "panel": {
        "html": "<p><strong>Panel 5</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 6",
      "panel": {
        "html": "<p><strong>Panel 6</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 7",
      "panel": {
        "html": "<p><strong>Panel 7</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 8",
      "panel": {
        "html": "<p><strong>Panel 8</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 9",
      "panel": {
        "html": "<p><strong>Panel 9</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 10",
      "panel": {
        "html": "<p><strong>Panel 10</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 11",
      "panel": {
        "html": "<p><strong>Panel 11</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 12",
      "panel": {
        "html": "<p><strong>Panel 12</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    }
  ]
}) }}

HTML

<!-- tabs -->
<div class="c-tabs c-tabs--scroll" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-scroll-mobile-1" id="tab-example-scroll-mobile-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 1
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-2" id="tab-example-scroll-mobile-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 2
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-3" id="tab-example-scroll-mobile-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 3
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-4" id="tab-example-scroll-mobile-4" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 4
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-5" id="tab-example-scroll-mobile-5" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 5
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-6" id="tab-example-scroll-mobile-6" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 6
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-7" id="tab-example-scroll-mobile-7" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 7
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-8" id="tab-example-scroll-mobile-8" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 8
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-9" id="tab-example-scroll-mobile-9" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 9
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-10" id="tab-example-scroll-mobile-10" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 10
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-11" id="tab-example-scroll-mobile-11" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 11
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-scroll-mobile-12" id="tab-example-scroll-mobile-12" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 12
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 1</h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 2</h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-3" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 3</h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-4" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-4" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 4</h3>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-5" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-5" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 5</h3>
    </div>
    <p><strong>Panel 5</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-6" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-6" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 6</h3>
    </div>
    <p><strong>Panel 6</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-7" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-7" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 7</h3>
    </div>
    <p><strong>Panel 7</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-8" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-8" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 8</h3>
    </div>
    <p><strong>Panel 8</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-9" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-9" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 9</h3>
    </div>
    <p><strong>Panel 9</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-10" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-10" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 10</h3>
    </div>
    <p><strong>Panel 10</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-11" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-11" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 11</h3>
    </div>
    <p><strong>Panel 11</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-scroll-mobile-12" tabindex="0" role="tabpanel" aria-labelledby="tab-example-scroll-mobile-12" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 12</h3>
    </div>
    <p><strong>Panel 12</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Con html en tabs para mobile #

Ejemplo: "Con html en tabs para mobile", de código HTML, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tabs -->
<div class="c-tabs c-tabs--scroll" id="tabs-active-icons" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-html-stacked-1" id="tab-example-html-stacked-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'>
            <path d='M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z' fill='currentColor' />
            <path d='M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z' fill='currentColor' />
          </svg><span class='block mx-auto'>Tab 1</span></span>
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-html-stacked-2" id="tab-example-html-stacked-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'>
            <path d='M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z' fill='currentColor' />
            <path d='M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z' fill='currentColor' />
            <path d='M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z' fill='currentColor' />
          </svg><span class='block mx-auto'>Tab 2</span></span>
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-html-stacked-3" id="tab-example-html-stacked-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'>
            <path d='M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z' fill='currentColor' />
            <path d='M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z' fill='currentColor' />
            <path d='M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z' fill='currentColor' />
          </svg><span class='block mx-auto'>Tab 3</span></span>
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-html-stacked-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-html-stacked-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><span class="block"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-8 h-8 mx-auto mb-sm" aria-label="Archivo" role="img" focusable="false">
            <path d="M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z" fill="currentColor" />
            <path d="M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z" fill="currentColor" />
          </svg><span class="block mx-auto">Tab 1</span></span></h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-html-stacked-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-html-stacked-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><span class="block"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-8 h-8 mx-auto mb-sm" aria-label="Archivo" role="img" focusable="false">
            <path d="M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z" fill="currentColor" />
            <path d="M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z" fill="currentColor" />
            <path d="M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z" fill="currentColor" />
          </svg><span class="block mx-auto">Tab 2</span></span></h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-html-stacked-3" tabindex="0" role="tabpanel" aria-labelledby="tab-example-html-stacked-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><span class="block"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-8 h-8 mx-auto mb-sm" aria-label="Archivo" role="img" focusable="false">
            <path d="M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z" fill="currentColor" />
            <path d="M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z" fill="currentColor" />
            <path d="M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z" fill="currentColor" />
          </svg><span class="block mx-auto">Tab 3</span></span></h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Ejemplo: "Con html en tabs para mobile", de código Nunjucks, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "idPrefix": "tab-example-html-stacked",
  "classes": "c-tabs--scroll",
  "items": [
    {
      "html": "<span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'><path d='M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z' fill='currentColor'/><path d='M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z' fill='currentColor'/></svg><span class='block mx-auto'>Tab 1</span></span>",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "html": "<span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'><path d='M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z' fill='currentColor'/><path d='M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z' fill='currentColor'/><path d='M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z' fill='currentColor'/></svg><span class='block mx-auto'>Tab 2</span></span>",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "html": "<span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'><path d='M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z' fill='currentColor'/><path d='M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z' fill='currentColor'/><path d='M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z' fill='currentColor'/></svg><span class='block mx-auto'>Tab 3</span></span>",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    }
  ],
  "attributes": {
    "id": "tabs-active-icons"
  }
}) }}

Contenido

Tab 1

Mostrar código

Contenido

Nunjucks macro

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "idPrefix": "tab-example-html-stacked",
  "classes": "c-tabs--scroll",
  "items": [
    {
      "html": "<span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'><path d='M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z' fill='currentColor'/><path d='M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z' fill='currentColor'/></svg><span class='block mx-auto'>Tab 1</span></span>",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "html": "<span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'><path d='M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z' fill='currentColor'/><path d='M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z' fill='currentColor'/><path d='M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z' fill='currentColor'/></svg><span class='block mx-auto'>Tab 2</span></span>",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "html": "<span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'><path d='M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z' fill='currentColor'/><path d='M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z' fill='currentColor'/><path d='M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z' fill='currentColor'/></svg><span class='block mx-auto'>Tab 3</span></span>",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    }
  ],
  "attributes": {
    "id": "tabs-active-icons"
  }
}) }}

HTML

<!-- tabs -->
<div class="c-tabs c-tabs--scroll" id="tabs-active-icons" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-html-stacked-1" id="tab-example-html-stacked-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'>
            <path d='M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z' fill='currentColor' />
            <path d='M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z' fill='currentColor' />
          </svg><span class='block mx-auto'>Tab 1</span></span>
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-html-stacked-2" id="tab-example-html-stacked-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'>
            <path d='M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z' fill='currentColor' />
            <path d='M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z' fill='currentColor' />
            <path d='M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z' fill='currentColor' />
          </svg><span class='block mx-auto'>Tab 2</span></span>
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-html-stacked-3" id="tab-example-html-stacked-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'>
            <path d='M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z' fill='currentColor' />
            <path d='M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z' fill='currentColor' />
            <path d='M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z' fill='currentColor' />
          </svg><span class='block mx-auto'>Tab 3</span></span>
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-html-stacked-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-html-stacked-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><span class="block"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-8 h-8 mx-auto mb-sm" aria-label="Archivo" role="img" focusable="false">
            <path d="M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z" fill="currentColor" />
            <path d="M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z" fill="currentColor" />
          </svg><span class="block mx-auto">Tab 1</span></span></h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-html-stacked-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-html-stacked-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><span class="block"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-8 h-8 mx-auto mb-sm" aria-label="Archivo" role="img" focusable="false">
            <path d="M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z" fill="currentColor" />
            <path d="M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z" fill="currentColor" />
            <path d="M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z" fill="currentColor" />
          </svg><span class="block mx-auto">Tab 2</span></span></h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-html-stacked-3" tabindex="0" role="tabpanel" aria-labelledby="tab-example-html-stacked-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><span class="block"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-8 h-8 mx-auto mb-sm" aria-label="Archivo" role="img" focusable="false">
            <path d="M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z" fill="currentColor" />
            <path d="M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z" fill="currentColor" />
            <path d="M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z" fill="currentColor" />
          </svg><span class="block mx-auto">Tab 3</span></span></h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Con clases de css aplicadas #

Mostrar código para ver las clases aplicadas en el HTML.

Ejemplo: "Con clases de css aplicadas", de código HTML, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tabs -->
<div class="c-tabs" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-classes-1" id="tab-example-classes-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 1
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-classes-2" id="tab-example-classes-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 2
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-classes-3" id="tab-example-classes-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 3
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-classes-4" id="tab-example-classes-4" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 4
      </span>
    </button>
  </div>
  <div class="c-tabs__panel bg-primary-light" id="tab-tab-example-classes-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-classes-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 1</h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel bg-primary-light" id="tab-tab-example-classes-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-classes-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 2</h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel bg-primary-light" id="tab-tab-example-classes-3" tabindex="0" role="tabpanel" aria-labelledby="tab-example-classes-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 3</h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel bg-primary-light" id="tab-tab-example-classes-4" tabindex="0" role="tabpanel" aria-labelledby="tab-example-classes-4" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 4</h3>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Ejemplo: "Con clases de css aplicadas", de código Nunjucks, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "idPrefix": "tab-example-classes",
  "items": [
    {
      "text": "Tab 1",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>",
        "classes": "bg-primary-light"
      }
    },
    {
      "text": "Tab 2",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
        "classes": "bg-primary-light"
      }
    },
    {
      "text": "Tab 3",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
        "classes": "bg-primary-light"
      }
    },
    {
      "text": "Tab 4",
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
        "classes": "bg-primary-light"
      }
    }
  ]
}) }}

Contenido

Tab 1

Mostrar código

Contenido

Nunjucks macro

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "idPrefix": "tab-example-classes",
  "items": [
    {
      "text": "Tab 1",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>",
        "classes": "bg-primary-light"
      }
    },
    {
      "text": "Tab 2",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
        "classes": "bg-primary-light"
      }
    },
    {
      "text": "Tab 3",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
        "classes": "bg-primary-light"
      }
    },
    {
      "text": "Tab 4",
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
        "classes": "bg-primary-light"
      }
    }
  ]
}) }}

HTML

<!-- tabs -->
<div class="c-tabs" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-classes-1" id="tab-example-classes-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 1
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-classes-2" id="tab-example-classes-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 2
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-classes-3" id="tab-example-classes-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 3
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-classes-4" id="tab-example-classes-4" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 4
      </span>
    </button>
  </div>
  <div class="c-tabs__panel bg-primary-light" id="tab-tab-example-classes-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-classes-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 1</h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel bg-primary-light" id="tab-tab-example-classes-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-classes-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 2</h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel bg-primary-light" id="tab-tab-example-classes-3" tabindex="0" role="tabpanel" aria-labelledby="tab-example-classes-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 3</h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel bg-primary-light" id="tab-tab-example-classes-4" tabindex="0" role="tabpanel" aria-labelledby="tab-example-classes-4" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 4</h3>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Con aspecto de links list #

Usa la clase .tabs--reset para quitar los estilos por defecto de los tabs. Luego añade una clase modificadora propia de tu proyecto, o bien, esta de este ejemplo llamada .tabs--list para dar estilo a los elementos. Añade estilos adicionales con los parámetros tablistClasses y panel.classes para posicionar y tener mayor control del estilo de los elementos.

Ejemplo: "Con aspecto de links list", de código HTML, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tabs -->
<div class="c-tabs c-tabs--reset c-tabs--list grid grid-cols-2 lg:grid-cols-4 lg:gap-lg" id="tabs-list" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs flex flex-col col-span-2 lg:col-span-1 lg:divide-y lg:divide-neutral-base mb-base lg:mb-0" role="tablist" aria-label="Ejemplo de tab con aspecto de links list dispuesto en horizontal">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-links-list-1" id="tab-links-list-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 1</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' 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></span></span>
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-links-list-2" id="tab-links-list-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 2</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' 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></span></span>
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-links-list-3" id="tab-links-list-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 3</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' 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></span></span>
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-links-list-4" id="tab-links-list-4" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 4</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' 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></span></span>
      </span>
    </button>
  </div>
  <div class="c-tabs__panel col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base" id="tab-tab-links-list-1" tabindex="0" role="tabpanel" aria-labelledby="tab-links-list-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><span class="flex w-full"><span class="flex gap-base justify-between items-center flex-1 c-link">Tab 1</span><span class="block self-center h-full text-primary-base"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="hidden lg:block self-center" 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></span></span></h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base" id="tab-tab-links-list-2" tabindex="0" role="tabpanel" aria-labelledby="tab-links-list-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><span class="flex w-full"><span class="flex gap-base justify-between items-center flex-1 c-link">Tab 2</span><span class="block self-center h-full text-primary-base"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="hidden lg:block self-center" 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></span></span></h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base" id="tab-tab-links-list-3" tabindex="0" role="tabpanel" aria-labelledby="tab-links-list-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><span class="flex w-full"><span class="flex gap-base justify-between items-center flex-1 c-link">Tab 3</span><span class="block self-center h-full text-primary-base"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="hidden lg:block self-center" 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></span></span></h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base" id="tab-tab-links-list-4" tabindex="0" role="tabpanel" aria-labelledby="tab-links-list-4" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><span class="flex w-full"><span class="flex gap-base justify-between items-center flex-1 c-link">Tab 4</span><span class="block self-center h-full text-primary-base"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="hidden lg:block self-center" 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></span></span></h3>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Ejemplo: "Con aspecto de links list", de código Nunjucks, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistClasses": "flex flex-col col-span-2 lg:col-span-1 lg:divide-y lg:divide-neutral-base mb-base lg:mb-0",
  "tablistAriaLabel": "Ejemplo de tab con aspecto de links list dispuesto en horizontal",
  "idPrefix": "tab-links-list",
  "items": [
    {
      "html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 1</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' 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></span></span>",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>",
        "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
      }
    },
    {
      "html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 2</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' 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></span></span>",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
        "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
      }
    },
    {
      "html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 3</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' 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></span></span>",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
        "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
      }
    },
    {
      "html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 4</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' 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></span></span>",
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
        "classes": "col-span-2 lg:col-span-2 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 grid grid-cols-2 lg:grid-cols-4 lg:gap-lg",
  "attributes": {
    "id": "tabs-list"
  }
}) }}

Contenido

Tab 1

Mostrar código

Contenido

Nunjucks macro

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistClasses": "flex flex-col col-span-2 lg:col-span-1 lg:divide-y lg:divide-neutral-base mb-base lg:mb-0",
  "tablistAriaLabel": "Ejemplo de tab con aspecto de links list dispuesto en horizontal",
  "idPrefix": "tab-links-list",
  "items": [
    {
      "html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 1</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' 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></span></span>",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>",
        "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
      }
    },
    {
      "html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 2</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' 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></span></span>",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
        "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
      }
    },
    {
      "html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 3</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' 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></span></span>",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
        "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
      }
    },
    {
      "html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 4</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' 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></span></span>",
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
        "classes": "col-span-2 lg:col-span-2 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 grid grid-cols-2 lg:grid-cols-4 lg:gap-lg",
  "attributes": {
    "id": "tabs-list"
  }
}) }}

HTML

<!-- tabs -->
<div class="c-tabs c-tabs--reset c-tabs--list grid grid-cols-2 lg:grid-cols-4 lg:gap-lg" id="tabs-list" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs flex flex-col col-span-2 lg:col-span-1 lg:divide-y lg:divide-neutral-base mb-base lg:mb-0" role="tablist" aria-label="Ejemplo de tab con aspecto de links list dispuesto en horizontal">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-links-list-1" id="tab-links-list-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 1</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' 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></span></span>
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-links-list-2" id="tab-links-list-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 2</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' 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></span></span>
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-links-list-3" id="tab-links-list-3" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 3</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' 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></span></span>
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-links-list-4" id="tab-links-list-4" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        <span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 4</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' 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></span></span>
      </span>
    </button>
  </div>
  <div class="c-tabs__panel col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base" id="tab-tab-links-list-1" tabindex="0" role="tabpanel" aria-labelledby="tab-links-list-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><span class="flex w-full"><span class="flex gap-base justify-between items-center flex-1 c-link">Tab 1</span><span class="block self-center h-full text-primary-base"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="hidden lg:block self-center" 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></span></span></h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base" id="tab-tab-links-list-2" tabindex="0" role="tabpanel" aria-labelledby="tab-links-list-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><span class="flex w-full"><span class="flex gap-base justify-between items-center flex-1 c-link">Tab 2</span><span class="block self-center h-full text-primary-base"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="hidden lg:block self-center" 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></span></span></h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base" id="tab-tab-links-list-3" tabindex="0" role="tabpanel" aria-labelledby="tab-links-list-3" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><span class="flex w-full"><span class="flex gap-base justify-between items-center flex-1 c-link">Tab 3</span><span class="block self-center h-full text-primary-base"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="hidden lg:block self-center" 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></span></span></h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base" id="tab-tab-links-list-4" tabindex="0" role="tabpanel" aria-labelledby="tab-links-list-4" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold"><span class="flex w-full"><span class="flex gap-base justify-between items-center flex-1 c-link">Tab 4</span><span class="block self-center h-full text-primary-base"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="hidden lg:block self-center" 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></span></span></h3>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Con ids individuales #

Mostrar código para ver los id aplicados

Ejemplo: "Con ids individuales", de código HTML, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tabs -->
<div class="c-tabs" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-a-1" id="tab-example-a-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 1
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-b-1" id="tab-example-b-1" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 2
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-c" id="tab-example-c" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 3
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-d" id="tab-example-d" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 4
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-a-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-a-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 1</h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-b-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-b-1" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 2</h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-c" tabindex="0" role="tabpanel" aria-labelledby="tab-example-c" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 3</h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-d" tabindex="0" role="tabpanel" aria-labelledby="tab-example-d" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 4</h3>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Ejemplo: "Con ids individuales", de código Nunjucks, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "items": [
    {
      "text": "Tab 1",
      "id": "tab-example-a-1",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 2",
      "id": "tab-example-b-1",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 3",
      "id": "tab-example-c",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 4",
      "id": "tab-example-d",
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    }
  ]
}) }}

Contenido

Tab 1

Mostrar código

Contenido

Nunjucks macro

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "items": [
    {
      "text": "Tab 1",
      "id": "tab-example-a-1",
      "panel": {
        "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
      }
    },
    {
      "text": "Tab 2",
      "id": "tab-example-b-1",
      "panel": {
        "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 3",
      "id": "tab-example-c",
      "panel": {
        "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    },
    {
      "text": "Tab 4",
      "id": "tab-example-d",
      "panel": {
        "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
      }
    }
  ]
}) }}

HTML

<!-- tabs -->
<div class="c-tabs" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-a-1" id="tab-example-a-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 1
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-b-1" id="tab-example-b-1" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 2
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-c" id="tab-example-c" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 3
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-d" id="tab-example-d" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Tab 4
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-a-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-a-1">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 1</h3>
    </div>
    <p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-b-1" tabindex="0" role="tabpanel" aria-labelledby="tab-example-b-1" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 2</h3>
    </div>
    <p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-c" tabindex="0" role="tabpanel" aria-labelledby="tab-example-c" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 3</h3>
    </div>
    <p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-d" tabindex="0" role="tabpanel" aria-labelledby="tab-example-d" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Tab 4</h3>
    </div>
    <p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>
  </div>
</div>
<!-- /tabs -->

Ejemplo complejo #

Ejemplo de uso real en una app.

Ejemplo: "Ejemplo complejo", de código HTML, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tabs -->
<div class="c-tabs" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-a-2" id="tab-example-a-2">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Cambios
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-b-2" id="tab-example-b-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Ver original
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-a-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-a-2">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Cambios</h3>
    </div>
    <div class="mb-base p-base bg-warning-light">
      <ul class="c-ul mb-0">
        <li>
          <p>Ley 38/2003, de 17 de noviembre, General de Subvenciones. (BOE nº 276 de 18 de noviembre de 2003) y su Reglamento de desarrollo aprobado por Real Decreto 887/2006, de 21 de julio. </p>
          <p><a href="#" class="c-link text-sm">Ver detalles de la normativa</a></p>
        </li>
        <li>Ley 5/2015, de 25 de marzo, de Subvenciones de Aragón. (BOA nº 68 de 10 de abril de 2015). <br><a href="#" class="c-link text-sm">Ver detalles de la normativa</a></li>
      </ul>
    </div>
    <div class="flex items-baseline">
      <p class="flex-1 text-sm text-neutral-dark">Cambios realizados hace 2 horas</p>
      <div class="ml-auto"><button class="c-button c-button--transparent">Descartar</button><button class="c-button c-button--transparent">Editar</button></div>
    </div>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-b-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-b-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Ver original</h3>
    </div>
    <div class="mb-base p-base">
      <ul class="c-ul mb-0">
        <li>
          <p>Ley 38/2003, de 17 de noviembre, General de Subvenciones. (BOE nº 276 de 11 de diciembre de 2020) y su Reglamento de desarrollo aprobado por Real Decreto 887/2006, de 21 de julio.</p>
          <p><a href="#" class="c-link text-sm">Ver detalles de la normativa</a></p>
        </li>
        <li>Ley 5/2015, de 25 de marzo, de Subvenciones de Aragón. (BOA nº 68 de 10 de abril de 2015). <br><a href="#" class="c-link text-sm">Ver detalles de la normativa</a></li>
      </ul>
    </div>
    <p class="text-sm text-neutral-dark">Texto original</p>
  </div>
</div>
<!-- /tabs -->

Ejemplo: "Ejemplo complejo", de código Nunjucks, para maquetar el componente: "Tabs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "items": [
    {
      "text": "Cambios",
      "id": "tab-example-a-2",
      "panel": {
        "html": "<div class='mb-base p-base bg-warning-light'><ul class='c-ul mb-0'><li><p>Ley 38/2003, de 17 de noviembre, General de Subvenciones. (BOE nº 276 de 18 de noviembre de 2003) y su Reglamento de desarrollo aprobado por Real Decreto 887/2006, de 21 de julio. </p><p><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></p></li><li>Ley 5/2015, de 25 de marzo, de Subvenciones de Aragón. (BOA nº 68 de 10 de abril de 2015). <br><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></li></ul></div><div class='flex items-baseline'><p class='flex-1 text-sm text-neutral-dark'>Cambios realizados hace 2 horas</p><div class='ml-auto'><button class='c-button c-button--transparent'>Descartar</button><button class='c-button c-button--transparent'>Editar</button></div></div>"
      }
    },
    {
      "text": "Ver original",
      "id": "tab-example-b-2",
      "panel": {
        "html": "<div class='mb-base p-base'><ul class='c-ul mb-0'><li><p>Ley 38/2003, de 17 de noviembre, General de Subvenciones. (BOE nº 276 de 11 de diciembre de 2020) y su Reglamento de desarrollo aprobado por Real Decreto 887/2006, de 21 de julio.</p><p><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></p></li><li>Ley 5/2015, de 25 de marzo, de Subvenciones de Aragón. (BOA nº 68 de 10 de abril de 2015). <br><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></li></ul></div><p class='text-sm text-neutral-dark'>Texto original</p>"
      }
    }
  ]
}) }}

Contenido

Cambios

Ley 38/2003, de 17 de noviembre, General de Subvenciones. (BOE nº 276 de 18 de noviembre de 2003) y su Reglamento de desarrollo aprobado por Real Decreto 887/2006, de 21 de julio.
Ver detalles de la normativa
Ley 5/2015, de 25 de marzo, de Subvenciones de Aragón. (BOA nº 68 de 10 de abril de 2015).
Ver detalles de la normativa

Cambios realizados hace 2 horas

Mostrar código

Contenido

Nunjucks macro

{% from "components/tabs/_macro.tabs.njk" import componentTabs %}

{{ componentTabs({
  "tablistAriaLabel": "Ejemplo de tab",
  "items": [
    {
      "text": "Cambios",
      "id": "tab-example-a-2",
      "panel": {
        "html": "<div class='mb-base p-base bg-warning-light'><ul class='c-ul mb-0'><li><p>Ley 38/2003, de 17 de noviembre, General de Subvenciones. (BOE nº 276 de 18 de noviembre de 2003) y su Reglamento de desarrollo aprobado por Real Decreto 887/2006, de 21 de julio. </p><p><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></p></li><li>Ley 5/2015, de 25 de marzo, de Subvenciones de Aragón. (BOA nº 68 de 10 de abril de 2015). <br><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></li></ul></div><div class='flex items-baseline'><p class='flex-1 text-sm text-neutral-dark'>Cambios realizados hace 2 horas</p><div class='ml-auto'><button class='c-button c-button--transparent'>Descartar</button><button class='c-button c-button--transparent'>Editar</button></div></div>"
      }
    },
    {
      "text": "Ver original",
      "id": "tab-example-b-2",
      "panel": {
        "html": "<div class='mb-base p-base'><ul class='c-ul mb-0'><li><p>Ley 38/2003, de 17 de noviembre, General de Subvenciones. (BOE nº 276 de 11 de diciembre de 2020) y su Reglamento de desarrollo aprobado por Real Decreto 887/2006, de 21 de julio.</p><p><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></p></li><li>Ley 5/2015, de 25 de marzo, de Subvenciones de Aragón. (BOA nº 68 de 10 de abril de 2015). <br><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></li></ul></div><p class='text-sm text-neutral-dark'>Texto original</p>"
      }
    }
  ]
}) }}

HTML

<!-- tabs -->
<div class="c-tabs" data-module="c-tabs">
  <div class="c-tabs__heading">
    <h2>Contenido</h2>
  </div>
  <div class="c-tabs__tabs" role="tablist" aria-label="Ejemplo de tab">
    <button class="c-tabs__link group"
      role="tab" aria-selected="true" aria-controls="tab-tab-example-a-2" id="tab-example-a-2">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Cambios
      </span>
    </button>
    <button class="c-tabs__link group"
      role="tab" aria-selected="false" aria-controls="tab-tab-example-b-2" id="tab-example-b-2" tabindex="-1">
      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
        Ver original
      </span>
    </button>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-a-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-a-2">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Cambios</h3>
    </div>
    <div class="mb-base p-base bg-warning-light">
      <ul class="c-ul mb-0">
        <li>
          <p>Ley 38/2003, de 17 de noviembre, General de Subvenciones. (BOE nº 276 de 18 de noviembre de 2003) y su Reglamento de desarrollo aprobado por Real Decreto 887/2006, de 21 de julio. </p>
          <p><a href="#" class="c-link text-sm">Ver detalles de la normativa</a></p>
        </li>
        <li>Ley 5/2015, de 25 de marzo, de Subvenciones de Aragón. (BOA nº 68 de 10 de abril de 2015). <br><a href="#" class="c-link text-sm">Ver detalles de la normativa</a></li>
      </ul>
    </div>
    <div class="flex items-baseline">
      <p class="flex-1 text-sm text-neutral-dark">Cambios realizados hace 2 horas</p>
      <div class="ml-auto"><button class="c-button c-button--transparent">Descartar</button><button class="c-button c-button--transparent">Editar</button></div>
    </div>
  </div>
  <div class="c-tabs__panel" id="tab-tab-example-b-2" tabindex="0" role="tabpanel" aria-labelledby="tab-example-b-2" hidden="">
    <div class="c-tabs__panel-heading">
      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">Ver original</h3>
    </div>
    <div class="mb-base p-base">
      <ul class="c-ul mb-0">
        <li>
          <p>Ley 38/2003, de 17 de noviembre, General de Subvenciones. (BOE nº 276 de 11 de diciembre de 2020) y su Reglamento de desarrollo aprobado por Real Decreto 887/2006, de 21 de julio.</p>
          <p><a href="#" class="c-link text-sm">Ver detalles de la normativa</a></p>
        </li>
        <li>Ley 5/2015, de 25 de marzo, de Subvenciones de Aragón. (BOA nº 68 de 10 de abril de 2015). <br><a href="#" class="c-link text-sm">Ver detalles de la normativa</a></li>
      </ul>
    </div>
    <p class="text-sm text-neutral-dark">Texto original</p>
  </div>
</div>
<!-- /tabs -->