desy-html 12.0.0 → 12.1.0

package/docs/ds/_ds.example.tabs.njk

@@ -1,137 +1,137 @@
-{% from "components/tabs/_macro.tabs.njk" import componentTabs %}
-
-<div class="grid lg:grid-cols-2 gap-xl mb-lg">
-  <div>
-    {{ componentTabs({
-      "tablistAriaLabel": "Tab example",
-      "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>"
-          }
-        }
-      ]
-    })  }}
-  </div>
-  <div>
-    {{ componentTabs({
-      "tablistAriaLabel": "Tab example",
-      "idPrefix": "tab-example-html",
-      "items": [
-        {
-          "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" 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>"
-          }
-        }
-      ]
-    })  }}
-  </div>
-</div>
-<div class="grid lg:grid-cols-1 gap-xl mb-lg">
-  <div>
-    <p class="c-paragraph-base">Ejemplo en uso real:</p>
-    {{ componentTabs({
-      "tablistAriaLabel": "Tab example",
-      "items": [
-        {
-          "text": "Cambios",
-          "id": "tab-example-a",
-          "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",
-          "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>"
-          }
-        }
-      ]
-    })  }}
-  </div>
-</div>
-<div class="grid lg:grid-cols-1 gap-xl mb-lg">
-  <div>
-    <p class="c-paragraph-base">Ejemplo con aspecto de lista de enlaces:</p>
-    {{ 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": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 1</div><div class=\"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></div>",
-          "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": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 2</div><div class=\"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></div>",
-          "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": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 3</div><div class=\"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></div>",
-          "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": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 4</div><div class=\"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></div>",
-          "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"
-      }
-    }) }}
-  </div>
+{% from "components/tabs/_macro.tabs.njk" import componentTabs %}
+
+<div class="grid lg:grid-cols-2 gap-xl mb-lg">
+  <div>
+    {{ componentTabs({
+      "tablistAriaLabel": "Tab example",
+      "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>"
+          }
+        }
+      ]
+    })  }}
+  </div>
+  <div>
+    {{ componentTabs({
+      "tablistAriaLabel": "Tab example",
+      "idPrefix": "tab-example-html",
+      "items": [
+        {
+          "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" 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>"
+          }
+        }
+      ]
+    })  }}
+  </div>
+</div>
+<div class="grid lg:grid-cols-1 gap-xl mb-lg">
+  <div>
+    <p class="c-paragraph-base">Ejemplo en uso real:</p>
+    {{ componentTabs({
+      "tablistAriaLabel": "Tab example",
+      "items": [
+        {
+          "text": "Cambios",
+          "id": "tab-example-a",
+          "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",
+          "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>"
+          }
+        }
+      ]
+    })  }}
+  </div>
+</div>
+<div class="grid lg:grid-cols-1 gap-xl mb-lg">
+  <div>
+    <p class="c-paragraph-base">Ejemplo con aspecto de lista de enlaces:</p>
+    {{ 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": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 1</div><div class=\"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></div>",
+          "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": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 2</div><div class=\"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></div>",
+          "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": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 3</div><div class=\"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></div>",
+          "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": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 4</div><div class=\"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></div>",
+          "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"
+      }
+    }) }}
+  </div>
 </div>