Ejemplo: "Navegación con 2 secciones, una de ellas con 3 columnas", de código HTML, para maquetar el componente: "Footer", versión: 4.0.0, del sistema de diseño DESY
Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.
Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
<!-- footer -->
<footer class="py-base bg-neutral-lighter border-t border-neutral-base text-base lg:text-sm
text-neutral-dark lg:mt-48">
<div class="container mx-auto px-base ">
<div class="flex flex-col lg:flex-row flex-wrap gap-base">
<div class=" basis-3/4 -mx-base px-base">
<h3 class="c-h4 mb-base text-black">Lista de enlaces 1</h3>
<ul class="relative space-y-base lg:columns-3 gap-base">
<li class="mb-xs">
<a class="c-link font-semibold" href="#">
Navigation item 1
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#">
Navigation item 2
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#">
Navigation item 3
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#">
Navigation item 4
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#">
Navigation item 5
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#">
Navigation item 6
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#">
Navigation item 7
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#">
Navigation item 8
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#">
Navigation item 9
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#">
Navigation item 10
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#">
Navigation item 11
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#">
Navigation item 12
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#">
Navigation item 13
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#">
Navigation item 14
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#">
Navigation item 15
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#">
Navigation item 16
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#">
Navigation item 17
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#">
Navigation item 18
</a>
</li>
</ul>
</div>
<div class=" basis-1/4 -mx-base px-base">
<h3 class="c-h4 mb-base text-black">Lista de enlaces 2</h3>
<ul class="relative space-y-base lg:columns-1 gap-base">
<li class="mb-xs">
<a class="c-link font-semibold" href="#1" title="Se abre en ventana nueva" target="_blank">
Navigation item 1<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img">
<g>
<path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path>
</g>
</svg>
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#2" title="Se abre en ventana nueva" target="_blank">
Navigation item 2<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img">
<g>
<path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path>
</g>
</svg>
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#3" title="Se abre en ventana nueva" target="_blank">
Navigation item 3<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img">
<g>
<path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path>
</g>
</svg>
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#4" title="Se abre en ventana nueva" target="_blank">
Navigation item 4<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img">
<g>
<path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path>
</g>
</svg>
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#5" title="Se abre en ventana nueva" target="_blank">
Navigation item 5<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img">
<g>
<path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path>
</g>
</svg>
</a>
</li>
<li class="mb-xs">
<a class="c-link font-semibold" href="#6" title="Se abre en ventana nueva" target="_blank">
Navigation item 6<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img">
<g>
<path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path>
</g>
</svg>
</a>
</li>
</ul>
</div>
</div>
<hr class="my-base border-t border-neutral-base">
<div class="flex flex-wrap flex-col lg:flex-row justify-between">
<div class="mb-base">
<div>
<p>
Todo el contenido bajo
<a
class="c-link c-link--neutral"
href="https://creativecommons.org/licenses/by/4.0/legalcode.es"
rel="license">licencia CC BY 4.0</a>
</p>
</div>
<div>
<p>
<a
class="c-link c-link--neutral"
href="https://www.aragon.es/">Gobierno de Aragón</a>. Edificio Pignatelli. <abbr title="Paseo">Pº</abbr> María Agustín, 36. 50004 - Zaragoza - <abbr title="Teléfono">Tel.</abbr> <a href="tel:+34976714000" class="c-link c-link--neutral">976 714 000</a>
</p>
</div>
</div>
</div>
<div class="overflow-hidden">
<div class="flex flex-wrap gap-base lg:gap-x-2xl w-full pt-lg">
<div>
<p><a href="https://www.aragon.es/-/fondos-europeos-aragon " class="inline-block text-sm c-link no-underline" title="Más información sobre los Fondos Europeos">
<span class="inline-block c-footer__logo c-footer__logo--feder"><span class="sr-only">Cofinanciado por la Unión Europea. Fondo Europeo de Desarrollo Regional (FEDER). Ministerio de Hacienda.</span></span>
</a></p>
</div>
</div>
</div>
</div>
</footer>
<!-- /footer -->
Ejemplo: "Navegación con 2 secciones, una de ellas con 3 columnas", de código Nunjucks, para maquetar el componente: "Footer", versión: 4.0.0, del sistema de diseño DESY
Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
{% from "components/footer/_macro.footer.njk" import componentFooter %}
{{ componentFooter({
"navigation": [
{
"title": "Lista de enlaces 1",
"columns": 3,
"classes": "basis-3/4 -mx-base px-base",
"items": [
{
"href": "#",
"text": "Navigation item 1"
},
{
"href": "#",
"text": "Navigation item 2"
},
{
"href": "#",
"text": "Navigation item 3"
},
{
"href": "#",
"text": "Navigation item 4"
},
{
"href": "#",
"text": "Navigation item 5"
},
{
"href": "#",
"text": "Navigation item 6"
},
{
"href": "#",
"text": "Navigation item 7"
},
{
"href": "#",
"text": "Navigation item 8"
},
{
"href": "#",
"text": "Navigation item 9"
},
{
"href": "#",
"text": "Navigation item 10"
},
{
"href": "#",
"text": "Navigation item 11"
},
{
"href": "#",
"text": "Navigation item 12"
},
{
"href": "#",
"text": "Navigation item 13"
},
{
"href": "#",
"text": "Navigation item 14"
},
{
"href": "#",
"text": "Navigation item 15"
},
{
"href": "#",
"text": "Navigation item 16"
},
{
"href": "#",
"text": "Navigation item 17"
},
{
"href": "#",
"text": "Navigation item 18"
}
]
},
{
"title": "Lista de enlaces 2",
"columns": 1,
"classes": "basis-1/4 -mx-base px-base",
"items": [
{
"href": "#1",
"html": "Navigation item 1<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
"attributes": {
"title": "Se abre en ventana nueva",
"target": "_blank"
}
},
{
"href": "#2",
"html": "Navigation item 2<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
"attributes": {
"title": "Se abre en ventana nueva",
"target": "_blank"
}
},
{
"href": "#3",
"html": "Navigation item 3<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
"attributes": {
"title": "Se abre en ventana nueva",
"target": "_blank"
}
},
{
"href": "#4",
"html": "Navigation item 4<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
"attributes": {
"title": "Se abre en ventana nueva",
"target": "_blank"
}
},
{
"href": "#5",
"html": "Navigation item 5<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
"attributes": {
"title": "Se abre en ventana nueva",
"target": "_blank"
}
},
{
"href": "#6",
"html": "Navigation item 6<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
"attributes": {
"title": "Se abre en ventana nueva",
"target": "_blank"
}
}
]
}
],
"classes": "lg:mt-48"
}) }}