eds-footer

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out this practical implementation of component.

In HTML

In React and Vue

Overview

EdsFooter is a footer component designed for the EBRAINS platform, featuring social links, legal information, and an optional cookie preferences button. It includes a “Back to top” button and displays an acknowledgment for Horizon Europe funding.

Key Features:

Social Network Links: Optionally display a section for social media links.
Legal and Funding Information: Includes text for legal disclaimers and funding acknowledgments.
Cookie Preferences: Optionally display a “Cookies Preferences” button.
Back to Top Button: Smoothly scrolls the page back to the top when clicked.

This component is ideal for maintaining consistent branding, legal disclaimers, and navigational elements across the EBRAINS platform, with options for social links and a “Back to top” button.

Properties

Property	Attribute	Description	Type	Default
`backToTopAriaLabel`	`back-to-top-aria-label`	Controls the display of the “Back to Top” aria label text.	`string`	`'Back to Top'`
`cookiesPreferences`	`cookies-preferences`	Controls the display of the “Cookies preferences” text.	`string`	`'Cookies preferences'`
`enableCookiesSettings`	`enable-cookies-settings`	Controls the display of the “Cookies preferences” link.	`boolean`	`false`
`enableScrollTop`	`enable-scroll-top`	Controls the display of the “Back to Top” button. When true, the button appears in the footer.	`boolean`	`false`
`fundedBy`	`funded-by`	Controls the display of the “Founded By” text.	`string`	`'EBRAINS is funded by the Horizon Europe Framework Programme.'`
`rightsReserved`	`rights-reserved`	Controls the display of the “Rights Reserved” text.	`string`	`${new Date().getFullYear()} EBRAINS. All rights reserved.`
`social`	`social`	Determines if the social network section should be displayed. Adds top padding when true.	`boolean`	`false`
`variant`	`variant`	Controls the visual variant of the footer. - ‘default’: Light background with dark text - ‘inverse’: Dark/black background with white text	`"default" \| "inverse"`	`'default'`

Events

Event	Description	Type
`cookies`		`CustomEvent<any>`

Dependencies

Used by

eds-fullscreen-menu

Depends on

Graph

graph TD;
  eds-footer --> eds-social-networks
  eds-footer --> eds-link
  eds-footer --> eds-button
  eds-social-networks --> eds-link
  eds-link --> eds-icon-wrapper
  eds-button --> eds-icon-wrapper
  eds-fullscreen-menu --> eds-footer
  style eds-footer fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS