Links-list
Mostrar parámetros
Parámetros del componente
params:
- name: idPrefix
type: string
required: false
description: String to prefix id for each item if no id is specified on each item.
- name: hasNav
type: boolean
required: false
description: Defaults to `true`. If `false`, there will be no nav assuming the component will be wrapped with a custom nav with it's own aria-label.
- name: items
type: array
required: true
description: Array of nav items objects.
params:
- name: href
type: string
required: false
description: Item link.
- name: target
type: string
required: false
description: The target where the item should link to.
- name: text
type: string
required: true
description: If `html` is set, this is not required. Text to use within each nav item 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 each nav item label. If `html` is provided, the `text` argument will be ignored.
- name: id
type: string
required: false
description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
- name: disabled
type: boolean
required: false
description: If true, nav will be disabled.
- name: sub
type: boolean
required: false
description: If true, content provided will be revealed when the item is expanded.
- name: html
type: string
required: true
description: Provide content for the sub.
- name: classes
type: string
required: false
description: Classes to add to the sub container.
- name: icon
type: object
required: false
description: This is the optional icon at left
- name: html
type: string
required: true
description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
- name: containerClasses
type: string
required: false
description: Classes applied to the parent div of icon. Useful to vertical align the icon.
- name: containerClasses
type: string
required: false
description: Classes to add to the parent `<li> of the item.
- name: classes
type: string
required: false
description: Classes to add to the item.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the item.
- name: classes
type: string
required: false
description: Classes to add to the nav container.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the nav container.
Por defecto #
Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}
{{ componentLinksList({
"idPrefix": "default",
"items": [
{
"href": "#",
"text": "Item 1"
},
{
"href": "#",
"text": "Item 2"
},
{
"href": "#",
"text": "Item 3"
}
],
"attributes": {
"aria-label": "Menu destacado"
}
}) }}
HTML
<!-- links-list -->
<nav aria-label="Menu destacado">
<ul>
<li class="px-base border-y border-neutral-base -my-px">
<a id="default" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 1
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="default-2" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 2
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="default-3" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 3
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
</ul>
</nav>
<!-- /links-list -->
Con icono #
Mostrar códigodel ejemplo: Con icono
Contenido
Nunjucks macro
{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}
{{ componentLinksList({
"idPrefix": "with-icon",
"items": [
{
"href": "#",
"text": "Item 1",
"icon": {
"html": "<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>"
}
},
{
"href": "#",
"text": "Item 2",
"icon": {
"html": "<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>"
}
},
{
"href": "#",
"text": "Item 3",
"icon": {
"html": "<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>"
}
}
],
"attributes": {
"aria-label": "Menu destacado"
}
}) }}
HTML
<!-- links-list -->
<nav aria-label="Menu destacado">
<ul>
<li class="px-base border-y border-neutral-base -my-px">
<a id="with-icon" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="self-center h-full">
<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>
<div class="flex-1">
Item 1
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="with-icon-2" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="self-center h-full">
<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>
<div class="flex-1">
Item 2
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="with-icon-3" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="self-center h-full">
<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>
<div class="flex-1">
Item 3
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
</ul>
</nav>
<!-- /links-list -->
Con clases de css aplicadas #
Mostrar códigodel ejemplo: Con clases de css aplicadas
Contenido
Nunjucks macro
{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}
{{ componentLinksList({
"idPrefix": "with-classes-applied",
"items": [
{
"href": "#",
"text": "Item grande con icono",
"classes": "flex justify-between items-center py-base text-2xl",
"icon": {
"html": "<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>"
}
},
{
"href": "#",
"text": "Item grande con icono",
"classes": "flex justify-between items-center py-base text-2xl",
"icon": {
"html": "<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>"
}
},
{
"href": "#",
"text": "Item grande con icono",
"classes": "flex justify-between items-center py-base text-2xl",
"icon": {
"html": "<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>"
}
}
],
"attributes": {
"aria-label": "Menu destacado"
}
}) }}
HTML
<!-- links-list -->
<nav aria-label="Menu destacado">
<ul>
<li class="px-base border-y border-neutral-base -my-px">
<a id="with-classes-applied" href="#" class="c-link flex justify-between items-center py-base text-2xl">
<div class="flex gap-base justify-between items-center flex-1">
<div class="self-center h-full">
<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>
</div>
<div class="flex-1">
Item grande con icono
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="with-classes-applied-2" href="#" class="c-link flex justify-between items-center py-base text-2xl">
<div class="flex gap-base justify-between items-center flex-1">
<div class="self-center h-full">
<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>
</div>
<div class="flex-1">
Item grande con icono
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="with-classes-applied-3" href="#" class="c-link flex justify-between items-center py-base text-2xl">
<div class="flex gap-base justify-between items-center flex-1">
<div class="self-center h-full">
<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>
</div>
<div class="flex-1">
Item grande con icono
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
</ul>
</nav>
<!-- /links-list -->
Con containerclasses aplicado #
Mostrar códigodel ejemplo: Con containerclasses aplicado
Contenido
Nunjucks macro
{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}
{{ componentLinksList({
"idPrefix": "with-containerclasses",
"items": [
{
"href": "#",
"text": "Item 1",
"containerClasses": "px-base border border-neutral-base my-sm",
"icon": {
"html": "<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>"
}
},
{
"href": "#",
"text": "Item 2",
"containerClasses": "my-base px-base border border-neutral-base rounded",
"icon": {
"html": "<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>"
}
},
{
"href": "#",
"text": "Item 3",
"containerClasses": "px-base border border-neutral-base my-sm",
"icon": {
"html": "<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>"
}
}
],
"attributes": {
"aria-label": "Menu destacado"
}
}) }}
HTML
<!-- links-list -->
<nav aria-label="Menu destacado">
<ul>
<li class="px-base border border-neutral-base my-sm">
<a id="with-containerclasses" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="self-center h-full">
<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>
<div class="flex-1">
Item 1
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="my-base px-base border border-neutral-base rounded">
<a id="with-containerclasses-2" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="self-center h-full">
<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>
<div class="flex-1">
Item 2
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border border-neutral-base my-sm">
<a id="with-containerclasses-3" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="self-center h-full">
<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>
<div class="flex-1">
Item 3
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
</ul>
</nav>
<!-- /links-list -->
Con item deshabilitado #
Mostrar códigodel ejemplo: Con item deshabilitado
Contenido
Nunjucks macro
{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}
{{ componentLinksList({
"idPrefix": "with-disabled-item",
"items": [
{
"href": "#",
"text": "Item 1"
},
{
"href": "#",
"text": "Item 2"
},
{
"href": "#",
"text": "Item 3",
"disabled": true
}
],
"attributes": {
"aria-label": "Menu destacado"
}
}) }}
HTML
<!-- links-list -->
<nav aria-label="Menu destacado">
<ul>
<li class="px-base border-y border-neutral-base -my-px">
<a id="with-disabled-item" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 1
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="with-disabled-item-2" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 2
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="with-disabled-item-3" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base text-neutral-base no-underline pointer-events-none" aria-disabled="true" tabindex="-1">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 3
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
</ul>
</nav>
<!-- /links-list -->
Sin href #
Mostrar códigodel ejemplo: Sin href
Contenido
Nunjucks macro
{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}
{{ componentLinksList({
"idPrefix": "without-href",
"items": [
{
"href": "#",
"text": "Item 1"
},
{
"text": "Item 2"
},
{
"href": "#",
"text": "Item 3"
}
],
"attributes": {
"aria-label": "Menu destacado"
}
}) }}
HTML
<!-- links-list -->
<nav aria-label="Menu destacado">
<ul>
<li class="px-base border-y border-neutral-base -my-px">
<a id="without-href" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 1
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<div id="without-href-2" class=" flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 2
</div>
</div>
</div>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="without-href-3" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 3
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
</ul>
</nav>
<!-- /links-list -->
Con item activo #
Mostrar códigodel ejemplo: Con item activo
Contenido
Nunjucks macro
{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}
{{ componentLinksList({
"idPrefix": "with-active-item",
"items": [
{
"href": "#",
"text": "Item 1"
},
{
"href": "#",
"text": "Item 2",
"active": true
},
{
"href": "#",
"text": "Item 3"
}
],
"attributes": {
"aria-label": "Menu destacado"
}
}) }}
HTML
<!-- links-list -->
<nav aria-label="Menu destacado">
<ul>
<li class="px-base border-y border-neutral-base -my-px">
<a id="with-active-item" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 1
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="with-active-item-2" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base font-bold" aria-current="page">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
<strong>Item 2</strong>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="with-active-item-3" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 3
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
</ul>
</nav>
<!-- /links-list -->
Con target en los enlaces #
Mostrar códigodel ejemplo: Con target en los enlaces
Contenido
Nunjucks macro
{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}
{{ componentLinksList({
"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"
}
}) }}
HTML
<!-- links-list -->
<nav aria-label="Menu destacado">
<ul>
<li class="px-base border-y border-neutral-base -my-px">
<a id="with-target-in-links" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base" target="_blank" title="Se abre en ventana nueva">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 1
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="with-target-in-links-2" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base" target="_blank" title="Se abre en ventana nueva">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 2
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="with-target-in-links-3" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base" target="_blank" title="Se abre en ventana nueva">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 3
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
</ul>
</nav>
<!-- /links-list -->
Con un texto de item muy largo #
Mostrar códigodel ejemplo: Con un texto de item muy largo
Contenido
Nunjucks macro
{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}
{{ componentLinksList({
"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"
}
}) }}
HTML
<!-- links-list -->
<nav aria-label="Menu destacado">
<ul>
<li class="px-base border-y border-neutral-base -my-px">
<a id="with-very-long-option-text" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
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.
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="with-very-long-option-text-2" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
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.
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="with-very-long-option-text-3" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
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.
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
</ul>
</nav>
<!-- /links-list -->
Con contenido descriptivo en cada item #
Mostrar códigodel ejemplo: Con contenido descriptivo en cada item
Contenido
Nunjucks macro
{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}
{{ componentLinksList({
"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"
}
}) }}
HTML
<!-- links-list -->
<nav aria-label="Menu destacado">
<ul>
<li class="px-base border-y border-neutral-base -my-px">
<a id="descriptive-example" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 1
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
<div class=" c-paragraph-base text-neutral-dark -mt-base mr-lg" id="sub-descriptive-example">
<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>
</div>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="descriptive-example-2" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 2
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
<div class=" c-paragraph-base text-neutral-dark -mt-base mr-lg" id="sub-descriptive-example-2">
<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>
</div>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="descriptive-example-3" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 3
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
<div class=" c-paragraph-base text-neutral-dark -mt-base mr-lg" id="sub-descriptive-example-3">
<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>
</div>
</li>
</ul>
</nav>
<!-- /links-list -->
Con idprefix #
Muestra el código para ver el idPrefix aplicado.
Mostrar códigodel ejemplo: Con idprefix
Contenido
Nunjucks macro
{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}
{{ componentLinksList({
"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"
}
}) }}
HTML
<!-- links-list -->
<nav aria-label="Menu destacado">
<ul>
<li class="px-base border-y border-neutral-base -my-px">
<a id="site-menu-item" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Opción 1
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="site-menu-item-2" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Opción 2
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="site-menu-item-3" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Opción 3
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="site-menu-item-4" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Opción 4
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="site-menu-item-5" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Opción 5
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
</ul>
</nav>
<!-- /links-list -->
Con ids individuales #
Muestra el código para ver los ids aplicados.
Mostrar códigodel ejemplo: Con ids individuales
Contenido
Nunjucks macro
{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}
{{ componentLinksList({
"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"
}
}) }}
HTML
<!-- links-list -->
<nav aria-label="Menu destacado">
<ul>
<li class="px-base border-y border-neutral-base -my-px">
<a id="option-A" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Opción 1
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="option-B" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Opción 2
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="option-C" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Opción 3
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="option-D" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Opción 4
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="option-E" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Opción 5
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
</ul>
</nav>
<!-- /links-list -->
Con atributos #
Muestra el código para ver cómo se aplican los atributos.
Mostrar códigodel ejemplo: Con atributos
Contenido
Nunjucks macro
{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}
{{ componentLinksList({
"attributes": {
"aria-label": "Menu destacado"
},
"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"
}
}
]
}) }}
HTML
<!-- links-list -->
<nav aria-label="Menu destacado">
<ul>
<li class="px-base border-y border-neutral-base -my-px">
<a id="links-list-item" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Opción 1
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="links-list-item-2" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Opción 2
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="links-list-item-3" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Opción 3
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
<div class=" c-paragraph-base text-neutral-dark -mt-base mr-lg" id="sub-links-list-item-3">
<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>
<p>Este es otro párrafo.</p>
</div>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="links-list-item-4" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Opción 4
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="links-list-item-5" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Opción 5
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
</ul>
</nav>
<!-- /links-list -->
Sin nav #
Usa el parámetro "hasNav": false
para no rodear el componente con una etiqueta <nav>
, asumiendo que el componente estará rodeado con un nav personalizado con su propio aria-label
si lo necesita.
Mostrar códigodel ejemplo: Sin nav
Contenido
Nunjucks macro
{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}
{{ componentLinksList({
"idPrefix": "hasnav-false",
"hasNav": false,
"items": [
{
"href": "#",
"text": "Item 1"
},
{
"href": "#",
"text": "Item 2"
},
{
"href": "#",
"text": "Item 3"
}
],
"attributes": {
"aria-label": "Menu destacado"
}
}) }}
HTML
<!-- links-list -->
<div aria-label="Menu destacado">
<ul>
<li class="px-base border-y border-neutral-base -my-px">
<a id="hasnav-false" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 1
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="hasnav-false-2" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 2
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="hasnav-false-3" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
Item 3
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
</ul>
</div>
<!-- /links-list -->
Ejemplo mixto #
Mostrar códigodel ejemplo: Ejemplo mixto
Contenido
Nunjucks macro
{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}
{{ componentLinksList({
"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"
}
}) }}
HTML
<!-- links-list -->
<nav aria-label="Menu destacado">
<ul>
<li class="px-base border-y border-neutral-base -my-px">
<a id="mixed-example" href="#" class="c-link flex justify-between items-center py-base text-lg">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
<strong>Deudas</strong>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
<div class=" c-paragraph-base text-neutral-dark -mt-base mr-lg" id="sub-mixed-example">
<p class="c-paragraph-base mb-0">Tienes <span class="text-alert-base">deudas fuera de plazo</span></p>
</div>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="mixed-example-2" href="#" class="c-link flex justify-between items-center py-base text-lg">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
<strong>Historial de pagos</strong>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="mixed-example-3" href="#" class="c-link flex justify-between items-center py-base text-lg">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
<strong>Certificado de corriente de pago</strong>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
<div class=" c-paragraph-base text-neutral-dark -mt-base mr-lg" id="sub-mixed-example-3">
<p class="c-paragraph-base mb-0">Tienes <strong>1 certificado disponible</strong>.</p>
</div>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="mixed-example-4" href="#" class="c-link flex justify-between items-center py-base text-lg">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
<strong>Valoraciones de inmuebles</strong>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
</li>
<li class="px-base border-y border-neutral-base -my-px">
<a id="mixed-example-5" href="#" class="c-link flex justify-between items-center py-base text-lg">
<div class="flex gap-base justify-between items-center flex-1">
<div class="flex-1">
<strong>Aplazamiento y fraccionamiento</strong>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="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>
</a>
<div class=" c-paragraph-base text-neutral-dark -mt-base mr-lg" id="sub-mixed-example-5">
<p class="c-paragraph-base mb-0">Tienes 1 deuda fraccionada, has pagado <strong>2 fracciones</strong> de 5.</p>
</div>
</li>
</ul>
</nav>
<!-- /links-list -->