El pie de página es una herramienta muy útil para facilitar la navegación del usuario hacia recursos clave del sitio web, no sólo para mostrar información de contacto, información legal o redes sociales.
Footer
Mostrar parámetros
Parámetros Nunjucks del componente: "Footer"
params:-name:metatype:objectrequired:falsedescription:Objectcontainingoptionsforthemetanavigation.params:-name:visuallyHiddenTitletype:stringdescription:Titleforametaitemsection,whichdefaultstoSupportlinks-name:htmltype:stringdescription:HTMLtoaddtothemetasectionofthefooter,whichwillappearbelowanylinksspecifiedusingmeta.items.-name:texttype:stringdescription:Texttoaddtothemetasectionofthefooter,whichwillappearbelowanylinksspecifiedusingmeta.items.Ifmeta.htmlisspecified,thisoptionisignored.-name:itemstype:arrayrequired:falsedescription:Arrayofitemsforuseinthemetasectionofthefooter.params:-name:texttype:stringrequired:truedescription:Listitemtextinthemetasectionofthefooter.-name:htmltype:stringrequired:falsedescription:If`text`isset,thisisnotrequired.HTMLtouseinthelistitem.If`html`isprovided,the`text`argumentwillbeignored.-name:hreftype:stringrequired:truedescription:Listitemhrefattributeinthemetasectionofthefooter.-name:attributestype:objectrequired:falsedescription:HTMLattributes(forexampledataattributes)toaddtotheanchorinthefootermetasection.-name:descriptiontype:objectrequired:falsedescription:Objectcontainingoptionsforthedescriptioncontent.Ifnotdefined,itdefaultstolicenseandorganizationcontactinformationfrombrandingconfiguration.params:-name:visuallyHiddenTitletype:stringdescription:Titleforametaitemsection,whichdefaultstoSupportlinks-name:htmltype:stringdescription:HTMLtoaddtothemetasectionofthefooter,whichwillappearbelowanylinksspecifiedusingmeta.items.-name:texttype:stringdescription:Texttoaddtothemetasectionofthefooter,whichwillappearbelowanylinksspecifiedusingmeta.items.Ifmeta.htmlisspecified,thisoptionisignored.-name:navigationtype:arrayrequired:falsedescription:Arrayofitemsforuseinthenavigationsectionofthefooter.params:-name:titletype:stringrequired:falsedescription:Titleforasection-name:columnstype:integerrequired:falsedescription: Amount of columns to display items in navigation section of the footer. Allowed values:from1to8.-name:itemstype:arrayrequired:falsedescription:Arrayofitemstodisplayinthelistinnavigationsectionofthefooter.params:-name:texttype:stringrequired:truedescription:Listitemtextinthenavigationsectionofthefooter.-name:htmltype:stringrequired:falsedescription:If`text`isset,thisisnotrequired.HTMLtouseinthelistitem.If`html`isprovided,the`text`argumentwillbeignored.-name:hreftype:stringrequired:truedescription:Listitemhrefattributeinthenavigationsectionofthefooter.Both`text`and`href`attributesneedtobepresenttocreatealink.-name:attributestype:objectrequired:falsedescription:HTMLattributes(forexampledataattributes)toaddtotheanchorinthefooternavigationsection.-name:classestype:stringrequired:falsedescription:Classestoaddtothenavigationitem.-name:noLogotype:booleanrequired:falsedescription:Whentrue,therewillbenologo.-name:logotype:objectrequired:falsedescription:Thisistheoptionallogo.Defaultstodefault`FEDER`typelogowithdefaulturllinkconfiguredinbranding.-name:htmltype:stringrequired:falsedescription:Usethishtmltoinsertacustomsvginlinelogo.Ifthisisset,thetypearenotused.-name:urltype:stringrequired:falsedescription:Addacustomlinktothelogo.DefaultstotheURLconfiguredinbranding.-name:typetype:stringrequired:falsedescription:Predefinedicontypesare`UE`,`FEDER`,`FSE+`,`FEADER`and`Plurifondo`.Defaultsto`FEDER`.-name:containerClassestype:stringrequired:falsedescription:Classesappliedtotheparentdivoflogo.Usefultopositionthelogo.-name:icontype:objectrequired:falsedescription:Thisistheoptionaliconorcustomhtmlnextoflogo.-name:htmltype:stringrequired:falsedescription:Usethishtmltoinsertacustomsvginlineicon.-name:containerClassestype:stringrequired:falsedescription:Classesappliedtotheparentdivoficon.Usefultopositiontheicon.Defaultsto`flex-1`.-name:containerClassestype:stringrequired:falsedescription:Classesthatcanbeaddedtotheinnercontainer,usefulifyouwanttomakethefooterfullwidth.-name:classestype:stringrequired:falsedescription:Classestoaddtothefootercomponentcontainer.-name:attributestype:objectrequired:falsedescription:HTMLattributes(forexampledataattributes)toaddtothefootercomponentcontainer.-name:urlFedertype:stringrequired:falsedescription:(Deprecated,uselogo.urlinstead).Addacustomlinktothelogo.DefaultstotheURLconfiguredinbranding.
Con un gran margin-top aplicado por defecto en escritorio que desaparece en móvil.
Descripción visual
Footer con fondo gris claro que ocupa todo el ancho. Contiene texto en gris oscuro de tamaño pequeño con información de licencia, dirección y teléfono. El texto incluye un enlace azul subrayado para la licencia CC BY 4.0.
<!-- footer --><footerclass="py-base bg-neutral-lighter border-t border-neutral-base text-base lg:text-sm
text-neutral-dark lg:mt-48"><divclass="container mx-auto px-base "><divclass="flex flex-wrap flex-col lg:flex-row justify-between"><divclass="mb-base"><div><p>
Todo el contenido bajo
<aclass="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><aclass="c-link c-link--neutral"href="https://www.aragon.es/">Gobierno de Aragón</a>. Edificio Pignatelli. Paseo María Agustín, 36. 50004 - Zaragoza - Teléfono: <ahref="tel:+34976714000"class="c-link c-link--neutral">976 714 000</a></p></div></div></div><divclass="overflow-hidden"><divclass="flex flex-wrap gap-base lg:gap-x-2xl w-full pt-lg"><div><p><ahref="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"><spanclass="inline-block c-footer__logo c-footer__logo--feder"><spanclass="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 -->
Enlaces secundarios de navegación con información meta relacionada con el sitio.
Descripción visual
Footer con fondo gris claro dividido en dos secciones. La sección superior muestra una fila de enlaces horizontales en azul con texto pequeño separados por espacios. La sección inferior contiene texto gris oscuro de tamaño pequeño con información de licencia, dirección y teléfono, incluyendo un enlace azul subrayado.
Mostrar códigodel ejemplo: Con enlaces en meta y contenido
<!-- footer --><footerclass="py-base bg-neutral-lighter border-t border-neutral-base text-base lg:text-sm
text-neutral-dark lg:mt-48"><divclass="container mx-auto px-base "><divclass="flex flex-wrap flex-col lg:flex-row justify-between"><divclass="mb-base"><h2class="sr-only">Enlaces a pie de página</h2><ulclass="flex flex-col lg:flex-row lg:flex-wrap mb-base"><liclass="mb-sm mr-base"><aclass="c-link font-semibold"href="#1">
Inicio
</a></li><liclass="mb-sm mr-base"><aclass="c-link font-semibold"href="#2">
Aviso legal
</a></li><liclass="mb-sm mr-base"><aclass="c-link font-semibold"href="#3">
Política de cookies
</a></li><liclass="mb-sm mr-base"><aclass="c-link font-semibold"href="#4">
Política de privacidad
</a></li><liclass="mb-sm mr-base"><aclass="c-link font-semibold"href="#5">
Accesibilidad
</a></li><liclass="mb-sm mr-base"><aclass="c-link font-semibold"href="#6">
Mapa web
</a></li></ul><div><p>
Todo el contenido bajo
<aclass="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><aclass="c-link c-link--neutral"href="https://www.aragon.es/">Gobierno de Aragón</a>. Edificio Pignatelli. Paseo María Agustín, 36. 50004 - Zaragoza - Teléfono: <ahref="tel:+34976714000"class="c-link c-link--neutral">976 714 000</a></p></div></div></div><divclass="overflow-hidden"><divclass="flex flex-wrap gap-base lg:gap-x-2xl w-full pt-lg"><div><p><ahref="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"><spanclass="inline-block c-footer__logo c-footer__logo--feder"><spanclass="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 -->
Footer con fondo gris claro que ocupa todo el ancho. Incluye una línea de texto en gris oscuro de tamaño pequeño indicando versión en la parte superior. Debajo aparece texto gris oscuro de tamaño pequeño con información de licencia, dirección y teléfono, donde la licencia es un enlace azul subrayado.
Mostrar códigodel ejemplo: Con un meta personalizado
<!-- footer --><footerclass="py-base bg-neutral-lighter border-t border-neutral-base text-base lg:text-sm
text-neutral-dark lg:mt-48"><divclass="container mx-auto px-base "><divclass="flex flex-wrap flex-col lg:flex-row justify-between"><divclass="mb-base"><h2class="sr-only">Enlaces de pie de página</h2><divclass="mb-sm"><p>Versión 4.0.3</p></div><div><p>
Todo el contenido bajo
<aclass="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><aclass="c-link c-link--neutral"href="https://www.aragon.es/">Gobierno de Aragón</a>. Edificio Pignatelli. Paseo María Agustín, 36. 50004 - Zaragoza - Teléfono: <ahref="tel:+34976714000"class="c-link c-link--neutral">976 714 000</a></p></div></div></div><divclass="overflow-hidden"><divclass="flex flex-wrap gap-base lg:gap-x-2xl w-full pt-lg"><div><p><ahref="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"><spanclass="inline-block c-footer__logo c-footer__logo--feder"><spanclass="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 -->
Sustituye el texto por defecto por uno personalizado.
Descripción visual
Footer con fondo blanco conteniendo texto en color gris oscuro de tamaño pequeño distribuido en múltiples líneas. El texto incluye información de copyright, dirección, y datos de contacto alineados a la izquierda. El área del footer tiene borde superior gris claro de 1px separando el contenido.
Mostrar códigodel ejemplo: Con descripción personalizada
Utiliza este contenido para insertar otro logo o enlaces.
Descripción visual
Footer con fondo beige claro conteniendo texto en negro de tamaño pequeño alineado a la izquierda, incluyendo enlaces subrayados en azul. Logo corporativo multicolor (rojo, naranja, negro) centrado en la parte inferior del footer. El área tiene borde superior gris de 1px y espaciado interno generoso.
Mostrar códigodel ejemplo: Con contenido html junto al logo
Usa logo.url para personalizar la url del enlace del logo.
Descripción visual
Footer con fondo beige claro conteniendo texto en negro de tamaño pequeño alineado a la izquierda con enlace subrayado en azul oscuro. Información de contacto distribuida en dos líneas con datos de ubicación y teléfono. El área presenta borde superior gris de 1px con espaciado vertical equilibrado.
Mostrar códigodel ejemplo: Con enlace personalizado del logo
<!-- footer --><footerclass="py-base bg-neutral-lighter border-t border-neutral-base text-base lg:text-sm
text-neutral-dark lg:mt-48"><divclass="container mx-auto px-base "><divclass="flex flex-wrap flex-col lg:flex-row justify-between"><divclass="mb-base"><div><p>
Todo el contenido bajo
<aclass="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><aclass="c-link c-link--neutral"href="https://www.aragon.es/">Gobierno de Aragón</a>. Edificio Pignatelli. Paseo María Agustín, 36. 50004 - Zaragoza - Teléfono: <ahref="tel:+34976714000"class="c-link c-link--neutral">976 714 000</a></p></div></div></div><divclass="overflow-hidden"><divclass="flex flex-wrap gap-base lg:gap-x-2xl w-full pt-lg"><div><p><ahref=" https://www.europarl.europa.eu/factsheets/es/sheet/95/el-fondo-europeo-de-desarrollo-regional-feder-"class="inline-block text-sm c-link no-underline"title="Más información sobre los Fondos Europeos"><spanclass="inline-block c-footer__logo c-footer__logo--feder"><spanclass="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 -->
Usa noLogo para ocultar el logo por defecto de EU Feder.
Descripción visual
Footer con fondo gris claro conteniendo texto negro en múltiples líneas. La primera línea muestra texto de peso normal con un enlace subrayado en azul. La segunda línea presenta información de ubicación y contacto en texto negro de peso normal, sin elementos gráficos adicionales.
Usa logo.type: feder o bien no definas el logo.type para dejar por defecto el logo FEDER.
Descripción visual
Footer con fondo gris claro conteniendo texto negro en múltiples líneas. La primera línea muestra texto de peso normal con un enlace subrayado en azul. La segunda línea presenta información de ubicación y contacto en texto negro de peso normal. Incluye un logotipo FEDER ubicado en la parte superior izquierda del área del footer.
<!-- footer --><footerclass="py-base bg-neutral-lighter border-t border-neutral-base text-base lg:text-sm
text-neutral-dark lg:mt-48"><divclass="container mx-auto px-base "><divclass="flex flex-wrap flex-col lg:flex-row justify-between"><divclass="mb-base"><div><p>
Todo el contenido bajo
<aclass="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><aclass="c-link c-link--neutral"href="https://www.aragon.es/">Gobierno de Aragón</a>. Edificio Pignatelli. Paseo María Agustín, 36. 50004 - Zaragoza - Teléfono: <ahref="tel:+34976714000"class="c-link c-link--neutral">976 714 000</a></p></div></div></div><divclass="overflow-hidden"><divclass="flex flex-wrap gap-base lg:gap-x-2xl w-full pt-lg"><div><p><ahref="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"><spanclass="inline-block c-footer__logo c-footer__logo--feder"><spanclass="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 -->
Footer con fondo gris claro conteniendo texto negro en múltiples líneas. La primera línea muestra texto de peso normal con un enlace subrayado en azul. La segunda línea presenta información de ubicación y contacto en texto negro de peso normal. Incluye un logotipo de la Unión Europea ubicado en la parte superior izquierda del área del footer.
Footer con fondo gris claro de altura contenida. Contiene un bloque de texto pequeño en gris oscuro sobre dos líneas, donde la primera línea incluye un enlace subrayado en azul. Los elementos de texto están alineados a la izquierda con espaciado vertical compacto.
<!-- footer --><footerclass="py-base bg-neutral-lighter border-t border-neutral-base text-base lg:text-sm
text-neutral-dark lg:mt-48"><divclass="container mx-auto px-base "><divclass="flex flex-wrap flex-col lg:flex-row justify-between"><divclass="mb-base"><div><p>
Todo el contenido bajo
<aclass="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><aclass="c-link c-link--neutral"href="https://www.aragon.es/">Gobierno de Aragón</a>. Edificio Pignatelli. Paseo María Agustín, 36. 50004 - Zaragoza - Teléfono: <ahref="tel:+34976714000"class="c-link c-link--neutral">976 714 000</a></p></div></div></div><divclass="overflow-hidden"><divclass="flex flex-wrap gap-base lg:gap-x-2xl w-full pt-lg"><div><p><ahref="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"><spanclass="inline-block c-footer__logo c-footer__logo--fse"><spanclass="sr-only">Cofinanciado por la Unión Europea. Fondo Social Europeo Plus (FSE+). Ministerio de Agricultura y Economía Social.</span></span></a></p></div></div></div></div></footer><!-- /footer -->
Footer con fondo gris claro de altura contenida. Contiene un bloque de texto pequeño en gris oscuro sobre dos líneas, donde la primera línea incluye un enlace subrayado en azul. Los elementos de texto están alineados a la izquierda con espaciado vertical compacto.
<!-- footer --><footerclass="py-base bg-neutral-lighter border-t border-neutral-base text-base lg:text-sm
text-neutral-dark lg:mt-48"><divclass="container mx-auto px-base "><divclass="flex flex-wrap flex-col lg:flex-row justify-between"><divclass="mb-base"><div><p>
Todo el contenido bajo
<aclass="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><aclass="c-link c-link--neutral"href="https://www.aragon.es/">Gobierno de Aragón</a>. Edificio Pignatelli. Paseo María Agustín, 36. 50004 - Zaragoza - Teléfono: <ahref="tel:+34976714000"class="c-link c-link--neutral">976 714 000</a></p></div></div></div><divclass="overflow-hidden"><divclass="flex flex-wrap gap-base lg:gap-x-2xl w-full pt-lg"><div><p><ahref=" https://www.fondoseuropeos.hacienda.gob.es/sitios/dgfc/es-ES/paginas/feader.aspx"class="inline-block text-sm c-link no-underline"title="Más información sobre los Fondos Europeos"><spanclass="inline-block c-footer__logo c-footer__logo--feader"><spanclass="sr-only">Cofinanciado por la Unión Europea. Fondo Europeo Agrario de Desarrollo Rural (FEADER). Ministerio de Agricultura, Pesca y Alimentación.</span></span></a></p></div></div></div></div></footer><!-- /footer -->
Footer con fondo gris claro de altura contenida. Contiene un bloque de texto pequeño en gris oscuro sobre dos líneas, donde la primera línea incluye un enlace subrayado en azul. Los elementos de texto están alineados a la izquierda con espaciado vertical compacto.
Mostrar códigodel ejemplo: Con logo tipo plurifondo
<!-- footer --><footerclass="py-base bg-neutral-lighter border-t border-neutral-base text-base lg:text-sm
text-neutral-dark lg:mt-48"><divclass="container mx-auto px-base "><divclass="flex flex-wrap flex-col lg:flex-row justify-between"><divclass="mb-base"><div><p>
Todo el contenido bajo
<aclass="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><aclass="c-link c-link--neutral"href="https://www.aragon.es/">Gobierno de Aragón</a>. Edificio Pignatelli. Paseo María Agustín, 36. 50004 - Zaragoza - Teléfono: <ahref="tel:+34976714000"class="c-link c-link--neutral">976 714 000</a></p></div></div></div><divclass="overflow-hidden"><divclass="flex flex-wrap gap-base lg:gap-x-2xl w-full pt-lg"><div><p><ahref="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"><spanclass="inline-block c-footer__logo c-footer__logo--plurifondo"><spanclass="sr-only">Cofinanciado por la Unión Europea. Plurifondo. Gobierno de España.</span></span></a></p></div></div></div></div></footer><!-- /footer -->
Usa logo.html para insertar un logo svg inline sustituyendo al logo por defecto. Usa el código de este ejemplo y recuerda usar los atributos role y aria del svg.
Descripción visual
Footer con fondo blanco y borde superior gris claro. Contiene texto gris oscuro de tamaño pequeño con enlaces azules subrayados, seguido de información de dirección y teléfono. Incluye logo alineado a la izquierda en la parte inferior.
Mostrar códigodel ejemplo: Solo con logo personalizado
Usa icon para insertar un logo svg inline, respetando los atributos aria necesarios.
Descripción visual
Footer con fondo blanco dividido en dos secciones horizontales por línea gris clara. Sección superior vacía, sección inferior con fondo gris muy claro conteniendo texto pequeño gris oscuro con enlaces azules, información de contacto, y tres logos alineados horizontalmente.
Mostrar códigodel ejemplo: Con logo feder y otros logos personalizados
Sustituye el texto por defecto con uno personalizado. Usa noLogo:true para ocultar el logo. Y usa el parámetro description.html para cambiar la descripción por defecto.
Descripción visual
Footer con fondo blanco sin bordes superiores decorativos. Contiene bloque de texto gris oscuro de tamaño pequeño con copyright, dirección completa en múltiples líneas, número de teléfono en negrita, y enlace de email azul subrayado. Diseño compacto con alineación izquierda.
Mostrar códigodel ejemplo: Con descripción personalizada y sin logo
Usa el parámetro navigation.items para añadir secciones de navegación organizadas en columnas.
Descripción visual
Footer con fondo gris claro que contiene tres columnas de ancho idéntico. Cada columna tiene un encabezado negro en negrita y una lista vertical de enlaces azules subrayados. El pie incluye texto gris oscuro de tamaño pequeño con información de contacto y enlaces adicionales.
Mostrar códigodel ejemplo: Navegación con 3 secciones en columnas iguales
Navegación con 2 secciones, una de ellas con 3 columnas #
Usa el parámetro navigation.columns y navigation.classes para añadir columnas y controlar la anchura de cada una de las secciones de la navegación. Puedes añadir hasta 6 columnas en cada sección.
Descripción visual
Footer con fondo gris claro dividido en dos secciones principales. La primera sección presenta una columna con encabezado negro en negrita y seis enlaces azules subrayados en lista vertical. La segunda sección contiene un encabezado negro en negrita seguido de tres columnas con enlaces azules subrayados distribuidos horizontalmente. El pie incluye texto gris oscuro pequeño con datos de contacto.
Mostrar códigodel ejemplo: Navegación con 2 secciones, una de ellas con 3 columnas
Ejemplo para plantilla de email por defecto. Para comunicaciones internas, con logo SDA
Descripción visual
Footer con fondo gris claro que contiene únicamente texto informativo gris oscuro de tamaño pequeño con datos de dirección y contacto. En la parte inferior derecha aparece el logotipo de SDA en negro con texto descriptivo gris debajo. El diseño es horizontal y minimalista sin navegación por enlaces.
Mostrar códigodel ejemplo: Plantilla de correo electrónico con logo de sda