desy-html 10.2.2 → 11.0.1

package/src/templates/components/links-list/_examples.links-list.njk

@@ -1,595 +1,595 @@
-{% set exampleComponent = "links-list" %}
-
-{% set iconSimple %}
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg>
-{% endset %}
-
-{% set iconComplex %}
-  <div class="flex items-center justify-center p-sm -ml-sm bg-neutral-lighter rounded-full text-4xl"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg></div>
-{% endset %}
-
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "idPrefix": "default",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1"
-        },
-        {
-          "href": "#",
-          "text": "Item 2"
-        },
-        {
-          "href": "#",
-          "text": "Item 3"
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu destacado"
-      }
-    }
-  },
-  {
-    "name": "Con varios tipos de icono a la derecha",
-    "description": "Utiliza el parámetro `iconRight` y sus parámetro: `type`, `html` y `containerClasses` para cambiar el tipo de icono de la derecha.",
-    "data": {
-      "idPrefix": "iconright",
-      "items": [
-        {
-          "href": "#",
-          "text": "Sin iconRight (arrow por defecto)"
-        },
-        {
-          "href": "#",
-          "text": "iconRight.type: arrow",
-          "iconRight": {
-            "type": "arrow"
-          }
-        },
-        {
-          "href": "#",
-          "text": "iconRight.type: chevron",
-          "iconRight": {
-            "type": "chevron"
-          }
-        },
-        {
-          "href": "#",
-          "text": "iconRight.type: none",
-          "iconRight": {
-            "type": "none"
-          }
-        },
-        {
-          "href": "#",
-          "text": "Con icono pesonalizado usando iconRight.html",
-          "iconRight": {
-            "html": '<svg class="self-center" aria-hidden="true" focusable="false" width="1em" height="1em" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <g>
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.28572 1.71429C6.12793 1.71429 6.00001 1.84221 6.00001 2V3.14286H10V2C10 1.84221 9.87209 1.71429 9.71429 1.71429H6.28572ZM11.7143 3.14286V2C11.7143 0.895431 10.8189 0 9.71429 0H6.28572C5.18115 0 4.28572 0.895431 4.28572 2V3.14286H1.14286C0.669476 3.14286 0.285721 3.52662 0.285721 4C0.285721 4.47338 0.669476 4.85714 1.14286 4.85714H5.14286H10.8572H14.8572C15.3305 4.85714 15.7143 4.47338 15.7143 4C15.7143 3.52662 15.3305 3.14286 14.8572 3.14286H11.7143ZM2.85715 6.28571C2.69243 6.28571 2.53572 6.3568 2.42722 6.48073C2.31872 6.60466 2.26897 6.76939 2.29074 6.93266L3.4336 15.5041C3.47145 15.788 3.71361 16 4.00001 16H12C12.2864 16 12.5286 15.788 12.5664 15.5041L13.7093 6.93266C13.7311 6.76939 13.6813 6.60466 13.5728 6.48073C13.4642 6.3568 13.3076 6.28571 13.1429 6.28571H2.85715Z" fill="currentColor"></path>
-            </g></svg>'
-          }
-        },
-        {
-          "href": "#",
-          "text": "iconRight.containerClasses para posicionar el icono",
-          "sub": {
-            "html": "<p>También se puede usar item.containerClasses para quitar el padding lateral del item.</p><p>Lorem, ipsum, dolor sit amet consectetur adipisicing elit. Esse consequuntur rem, unde doloribus eaque accusantium? Distinctio recusandae laudantium tenetur explicabo, vero, repellat, earum debitis voluptatem maxime perspiciatis doloribus adipisci qui?</p>"
-          },
-          "iconRight": {
-            "type": "arrow",
-            "containerClasses": "absolute right-0 top-[50%] -mt-[0.5em]"
-          },
-          "containerClasses": "relative border-y border-neutral-base -my-px"
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu destacado"
-      }
-    }
-  },
-  {
-    "name": "con icono",
-    "data": {
-      "idPrefix": "with-icon",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1",
-          "icon": {
-            "html": iconSimple | trim
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 2",
-          "icon": {
-            "html": iconSimple | trim
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 3",
-          "icon": {
-            "html": iconSimple | trim
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu destacado"
-      }
-    }
-  },
-  {
-    "name": "con clases de css aplicadas",
-    "data": {
-      "idPrefix": "with-classes-applied",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item grande con icono",
-          "classes": "flex justify-between items-center py-base text-2xl",
-          "icon": {
-            "html": iconComplex | trim
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item grande con icono",
-          "classes": "flex justify-between items-center py-base text-2xl",
-          "icon": {
-            "html": iconComplex | trim
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item grande con icono",
-          "classes": "flex justify-between items-center py-base text-2xl",
-          "icon": {
-            "html": iconComplex | trim
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu destacado"
-      }
-    }
-  },
-  {
-    "name": "con listClasses aplicado: con líneas horizontales arriba y abajo",
-    "data": {
-      "idPrefix": "with-listclasses",
-      "listClasses": "divide-y divide-neutral-base border-t border-b border-neutral-base",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1",
-          "icon": {
-            "html": iconSimple | trim
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 2",
-          "icon": {
-            "html": iconSimple | trim
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 3",
-          "icon": {
-            "html": iconSimple | trim
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu destacado"
-      }
-    }
-  },
-  {
-    "name": "con containerClasses aplicado: con aspecto de cards",
-    "data": {
-      "idPrefix": "with-containerclasses",
-      "listClasses": "border border-transparent",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1",
-          "containerClasses": "my-sm px-base border border-neutral-base rounded",
-          "icon": {
-            "html": iconSimple | trim
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 2",
-          "containerClasses": "my-sm px-base border border-neutral-base rounded",
-          "icon": {
-            "html": iconSimple | trim
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 3",
-          "containerClasses": "px-base border border-neutral-base rounded",
-          "icon": {
-            "html": iconSimple | trim
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu destacado"
-      }
-    }
-  },
-  {
-    "name": "con item deshabilitado",
-    "data": {
-      "idPrefix": "with-disabled-item",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1"
-        },
-        {
-          "href": "#",
-          "text": "Item 2"
-        },
-        {
-          "href": "#",
-          "text": "Item 3",
-          "disabled": true
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu destacado"
-      }
-    }
-  },
-  {
-    "name": "sin href",
-    "data": {
-      "idPrefix": "without-href",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1"
-        },
-        {
-          "text": "Item 2"
-        },
-        {
-          "href": "#",
-          "text": "Item 3"
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu destacado"
-      }
-    }
-  },
-  {
-    "name": "con item activo",
-    "data": {
-      "idPrefix": "with-active-item",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1"
-        },
-        {
-          "href": "#",
-          "text": "Item 2",
-          "active": true
-        },
-        {
-          "href": "#",
-          "text": "Item 3"
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu destacado"
-      }
-    }
-  },
-  {
-    "name": "con target en los enlaces",
-    "data": {
-      "idPrefix": "with-target-in-links",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1",
-          "target": "_blank",
-          "attributes": {
-            "title": "Se abre en ventana nueva"
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 2",
-          "target": "_blank",
-          "attributes": {
-            "title": "Se abre en ventana nueva"
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 3",
-          "target": "_blank",
-          "attributes": {
-            "title": "Se abre en ventana nueva"
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu destacado"
-      }
-    }
-  },
-  {
-    "name": "con un texto de item muy largo",
-    "data": {
-      "idPrefix": "with-very-long-option-text",
-      "items": [
-        {
-          "href": "#",
-          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus."
-        },
-        {
-          "href": "#",
-          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum."
-        },
-        {
-          "href": "#",
-          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis."
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu destacado"
-      }
-    }
-  },
-  {
-    "name": "con contenido descriptivo en cada item",
-    "data": {
-      "idPrefix": "descriptive-example",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1",
-          "sub": {
-            "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 2",
-          "sub": {
-            "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 3",
-          "sub": {
-            "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu destacado"
-      }
-    }
-  },
-  {
-    "name": "con idPrefix",
-    "description": "Muestra el código para ver el idPrefix aplicado.",
-    "data": {
-      "idPrefix": "site-menu-item",
-      "items": [
-        {
-          "href": "#",
-          "text": "Opción 1"
-        },
-        {
-          "href": "#",
-          "text": "Opción 2"
-        },
-        {
-          "href": "#",
-          "text": "Opción 3"
-        },
-        {
-          "href": "#",
-          "text": "Opción 4"
-        },
-        {
-          "href": "#",
-          "text": "Opción 5"
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu destacado"
-      }
-    }
-  },
-  {
-    "name": "con ids individuales",
-    "description": "Muestra el código para ver los ids aplicados.",
-    "data": {
-      "items": [
-        {
-          "href": "#",
-          "text": "Opción 1",
-          "id": "option-A"
-        },
-        {
-          "href": "#",
-          "text": "Opción 2",
-          "id": "option-B"
-        },
-        {
-          "href": "#",
-          "text": "Opción 3",
-          "id": "option-C"
-        },
-        {
-          "href": "#",
-          "text": "Opción 4",
-          "id": "option-D"
-        },
-        {
-          "href": "#",
-          "text": "Opción 5",
-          "id": "option-E"
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu destacado"
-      }
-    }
-  },
-  {
-    "name": "con atributos",
-    "description": "Muestra el código para ver cómo se aplican los atributos.",
-    "data": {
-      "attributes": {
-        "id": "nav-id-example"
-      },
-      "items": [
-        {
-          "href": "#",
-          "text": "Opción 1",
-          "attributes": {
-            "data-attribute-1": "value-A",
-            "data-attribute-2": "value-B",
-            "data-attribute-3": "value-C"
-          }
-        },
-        {
-          "href": "#",
-          "text": "Opción 2",
-          "attributes": {
-            "data-attribute-1": "value-A",
-            "data-attribute-2": "value-B",
-            "data-attribute-3": "value-C"
-          }
-        },
-        {
-          "href": "#",
-          "text": "Opción 3",
-          "attributes": {
-            "data-attribute-1": "value-A",
-            "data-attribute-2": "value-B",
-            "data-attribute-3": "value-C"
-          },
-          "sub": {
-            "attributes": {
-              "data-attribute-1": "value-A",
-              "data-attribute-2": "value-B",
-              "data-attribute-3": "value-C"
-            },
-            "html": '<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p><p>Este es otro párrafo.</p>'
-          }
-        },
-        {
-          "href": "#",
-          "text": "Opción 4",
-          "attributes": {
-            "data-attribute-1": "value-A",
-            "data-attribute-2": "value-B",
-            "data-attribute-3": "value-C"
-          }
-        },
-        {
-          "href": "#",
-          "text": "Opción 5",
-          "attributes": {
-            "data-attribute-1": "value-A",
-            "data-attribute-2": "value-B",
-            "data-attribute-3": "value-C"
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu destacado"
-      }
-    }
-  },
-  {
-    "name": "Sin nav",
-    "description": 'Usa el parámetro <code>"hasNav": false</code> para no rodear el componente con una etiqueta <code>&lt;nav&gt;</code>, asumiendo que el componente estará rodeado con un nav personalizado con su propio <code>aria-label</code> si lo necesita.',
-    "data": {
-      "idPrefix": "hasnav-false",
-      "hasNav": false,
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1"
-        },
-        {
-          "href": "#",
-          "text": "Item 2"
-        },
-        {
-          "href": "#",
-          "text": "Item 3"
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu destacado"
-      }
-    }
-  },
-  {
-    "name": "ejemplo mixto",
-    "data": {
-      "idPrefix": "mixed-example",
-      "items": [
-        {
-          "href": "#",
-          "html": "<strong>Deudas</strong>",
-          "classes": "flex justify-between items-center py-base text-lg",
-          "sub": {
-            "html": '<p class="c-paragraph-base mb-0">Tienes <span class="text-alert-base">deudas fuera de plazo</span></p>'
-          }
-        },
-        {
-          "href": "#",
-          "html": "<strong>Historial de pagos</strong>",
-          "classes": "flex justify-between items-center py-base text-lg"
-        },
-        {
-          "href": "#",
-          "html": "<strong>Certificado de corriente de pago</strong>",
-          "classes": "flex justify-between items-center py-base text-lg",
-          "sub": {
-            "html": '<p class="c-paragraph-base mb-0">Tienes <strong>1 certificado disponible</strong>.</p>'
-          }
-        },
-        {
-          "href": "#",
-          "html": "<strong>Valoraciones de inmuebles</strong>",
-          "classes": "flex justify-between items-center py-base text-lg"
-        },
-        {
-          "href": "#",
-          "html": "<strong>Aplazamiento y fraccionamiento</strong>",
-          "classes": "flex justify-between items-center py-base text-lg",
-          "sub": {
-            "html": '<p class="c-paragraph-base mb-0">Tienes 1 deuda fraccionada, has pagado <strong>2 fracciones</strong> de 5.</p>'
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu destacado"
-      }
-    }
-  }
+{% set exampleComponent = "links-list" %}
+
+{% set iconSimple %}
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg>
+{% endset %}
+
+{% set iconComplex %}
+  <div class="flex items-center justify-center p-sm -ml-sm bg-neutral-lighter rounded-full text-4xl"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg></div>
+{% endset %}
+
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "idPrefix": "default",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2"
+        },
+        {
+          "href": "#",
+          "text": "Item 3"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "Con varios tipos de icono a la derecha",
+    "description": "Utiliza el parámetro `iconRight` y sus parámetro: `type`, `html` y `containerClasses` para cambiar el tipo de icono de la derecha.",
+    "data": {
+      "idPrefix": "iconright",
+      "items": [
+        {
+          "href": "#",
+          "text": "Sin iconRight (arrow por defecto)"
+        },
+        {
+          "href": "#",
+          "text": "iconRight.type: arrow",
+          "iconRight": {
+            "type": "arrow"
+          }
+        },
+        {
+          "href": "#",
+          "text": "iconRight.type: chevron",
+          "iconRight": {
+            "type": "chevron"
+          }
+        },
+        {
+          "href": "#",
+          "text": "iconRight.type: none",
+          "iconRight": {
+            "type": "none"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Con icono pesonalizado usando iconRight.html",
+          "iconRight": {
+            "html": '<svg class="self-center" aria-hidden="true" focusable="false" width="1em" height="1em" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.28572 1.71429C6.12793 1.71429 6.00001 1.84221 6.00001 2V3.14286H10V2C10 1.84221 9.87209 1.71429 9.71429 1.71429H6.28572ZM11.7143 3.14286V2C11.7143 0.895431 10.8189 0 9.71429 0H6.28572C5.18115 0 4.28572 0.895431 4.28572 2V3.14286H1.14286C0.669476 3.14286 0.285721 3.52662 0.285721 4C0.285721 4.47338 0.669476 4.85714 1.14286 4.85714H5.14286H10.8572H14.8572C15.3305 4.85714 15.7143 4.47338 15.7143 4C15.7143 3.52662 15.3305 3.14286 14.8572 3.14286H11.7143ZM2.85715 6.28571C2.69243 6.28571 2.53572 6.3568 2.42722 6.48073C2.31872 6.60466 2.26897 6.76939 2.29074 6.93266L3.4336 15.5041C3.47145 15.788 3.71361 16 4.00001 16H12C12.2864 16 12.5286 15.788 12.5664 15.5041L13.7093 6.93266C13.7311 6.76939 13.6813 6.60466 13.5728 6.48073C13.4642 6.3568 13.3076 6.28571 13.1429 6.28571H2.85715Z" fill="currentColor"></path>
+            </g></svg>'
+          }
+        },
+        {
+          "href": "#",
+          "text": "iconRight.containerClasses para posicionar el icono",
+          "sub": {
+            "html": "<p>También se puede usar item.containerClasses para quitar el padding lateral del item.</p><p>Lorem, ipsum, dolor sit amet consectetur adipisicing elit. Esse consequuntur rem, unde doloribus eaque accusantium? Distinctio recusandae laudantium tenetur explicabo, vero, repellat, earum debitis voluptatem maxime perspiciatis doloribus adipisci qui?</p>"
+          },
+          "iconRight": {
+            "type": "arrow",
+            "containerClasses": "absolute right-0 top-[50%] -mt-[0.5em]"
+          },
+          "containerClasses": "relative border-y border-neutral-base -my-px"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "con icono",
+    "data": {
+      "idPrefix": "with-icon",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1",
+          "icon": {
+            "html": iconSimple | trim
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "icon": {
+            "html": iconSimple | trim
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "icon": {
+            "html": iconSimple | trim
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "con clases de css aplicadas",
+    "data": {
+      "idPrefix": "with-classes-applied",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item grande con icono",
+          "classes": "flex justify-between items-center py-base text-2xl",
+          "icon": {
+            "html": iconComplex | trim
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item grande con icono",
+          "classes": "flex justify-between items-center py-base text-2xl",
+          "icon": {
+            "html": iconComplex | trim
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item grande con icono",
+          "classes": "flex justify-between items-center py-base text-2xl",
+          "icon": {
+            "html": iconComplex | trim
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "con listClasses aplicado: con líneas horizontales arriba y abajo",
+    "data": {
+      "idPrefix": "with-listclasses",
+      "listClasses": "divide-y divide-neutral-base border-t border-b border-neutral-base",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1",
+          "icon": {
+            "html": iconSimple | trim
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "icon": {
+            "html": iconSimple | trim
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "icon": {
+            "html": iconSimple | trim
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "con containerClasses aplicado: con aspecto de cards",
+    "data": {
+      "idPrefix": "with-containerclasses",
+      "listClasses": "border border-transparent",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1",
+          "containerClasses": "my-sm px-base border border-neutral-base rounded",
+          "icon": {
+            "html": iconSimple | trim
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "containerClasses": "my-sm px-base border border-neutral-base rounded",
+          "icon": {
+            "html": iconSimple | trim
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "containerClasses": "px-base border border-neutral-base rounded",
+          "icon": {
+            "html": iconSimple | trim
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "con item deshabilitado",
+    "data": {
+      "idPrefix": "with-disabled-item",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2"
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "disabled": true
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "sin href",
+    "data": {
+      "idPrefix": "without-href",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "text": "Item 2"
+        },
+        {
+          "href": "#",
+          "text": "Item 3"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "con item activo",
+    "data": {
+      "idPrefix": "with-active-item",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "active": true
+        },
+        {
+          "href": "#",
+          "text": "Item 3"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "con target en los enlaces",
+    "data": {
+      "idPrefix": "with-target-in-links",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1",
+          "target": "_blank",
+          "attributes": {
+            "title": "Se abre en ventana nueva"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "target": "_blank",
+          "attributes": {
+            "title": "Se abre en ventana nueva"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "target": "_blank",
+          "attributes": {
+            "title": "Se abre en ventana nueva"
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "con un texto de item muy largo",
+    "data": {
+      "idPrefix": "with-very-long-option-text",
+      "items": [
+        {
+          "href": "#",
+          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus."
+        },
+        {
+          "href": "#",
+          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum."
+        },
+        {
+          "href": "#",
+          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis."
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "con contenido descriptivo en cada item",
+    "data": {
+      "idPrefix": "descriptive-example",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1",
+          "sub": {
+            "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "sub": {
+            "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "sub": {
+            "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "con idPrefix",
+    "description": "Muestra el código para ver el idPrefix aplicado.",
+    "data": {
+      "idPrefix": "site-menu-item",
+      "items": [
+        {
+          "href": "#",
+          "text": "Opción 1"
+        },
+        {
+          "href": "#",
+          "text": "Opción 2"
+        },
+        {
+          "href": "#",
+          "text": "Opción 3"
+        },
+        {
+          "href": "#",
+          "text": "Opción 4"
+        },
+        {
+          "href": "#",
+          "text": "Opción 5"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "con ids individuales",
+    "description": "Muestra el código para ver los ids aplicados.",
+    "data": {
+      "items": [
+        {
+          "href": "#",
+          "text": "Opción 1",
+          "id": "option-A"
+        },
+        {
+          "href": "#",
+          "text": "Opción 2",
+          "id": "option-B"
+        },
+        {
+          "href": "#",
+          "text": "Opción 3",
+          "id": "option-C"
+        },
+        {
+          "href": "#",
+          "text": "Opción 4",
+          "id": "option-D"
+        },
+        {
+          "href": "#",
+          "text": "Opción 5",
+          "id": "option-E"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "con atributos",
+    "description": "Muestra el código para ver cómo se aplican los atributos.",
+    "data": {
+      "attributes": {
+        "id": "nav-id-example"
+      },
+      "items": [
+        {
+          "href": "#",
+          "text": "Opción 1",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Opción 2",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Opción 3",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          },
+          "sub": {
+            "attributes": {
+              "data-attribute-1": "value-A",
+              "data-attribute-2": "value-B",
+              "data-attribute-3": "value-C"
+            },
+            "html": '<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p><p>Este es otro párrafo.</p>'
+          }
+        },
+        {
+          "href": "#",
+          "text": "Opción 4",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Opción 5",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "Sin nav",
+    "description": 'Usa el parámetro <code>"hasNav": false</code> para no rodear el componente con una etiqueta <code>&lt;nav&gt;</code>, asumiendo que el componente estará rodeado con un nav personalizado con su propio <code>aria-label</code> si lo necesita.',
+    "data": {
+      "idPrefix": "hasnav-false",
+      "hasNav": false,
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2"
+        },
+        {
+          "href": "#",
+          "text": "Item 3"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "ejemplo mixto",
+    "data": {
+      "idPrefix": "mixed-example",
+      "items": [
+        {
+          "href": "#",
+          "html": "<strong>Deudas</strong>",
+          "classes": "flex justify-between items-center py-base text-lg",
+          "sub": {
+            "html": '<p class="c-paragraph-base mb-0">Tienes <span class="text-alert-base">deudas fuera de plazo</span></p>'
+          }
+        },
+        {
+          "href": "#",
+          "html": "<strong>Historial de pagos</strong>",
+          "classes": "flex justify-between items-center py-base text-lg"
+        },
+        {
+          "href": "#",
+          "html": "<strong>Certificado de corriente de pago</strong>",
+          "classes": "flex justify-between items-center py-base text-lg",
+          "sub": {
+            "html": '<p class="c-paragraph-base mb-0">Tienes <strong>1 certificado disponible</strong>.</p>'
+          }
+        },
+        {
+          "href": "#",
+          "html": "<strong>Valoraciones de inmuebles</strong>",
+          "classes": "flex justify-between items-center py-base text-lg"
+        },
+        {
+          "href": "#",
+          "html": "<strong>Aplazamiento y fraccionamiento</strong>",
+          "classes": "flex justify-between items-center py-base text-lg",
+          "sub": {
+            "html": '<p class="c-paragraph-base mb-0">Tienes 1 deuda fraccionada, has pagado <strong>2 fracciones</strong> de 5.</p>'
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  }
 ] %}