@ewc-lib/ewc-footer-links

EWC footer-links Component

One line w/ a feedback link on the left side and legal links (etc.) on the right side.

Overview

The ewc-footer-links component provides a standardized footer for Eurostat web applications. It offers a consistent visual identity across Eurostat digital products.

Features

• Responsive design
• Accessibility compliant

Screenshot

API

Attributes	Properties	Default value	Description
	text	-	JS object. props are all attributes listed below. Can also be used to set just 1 single text.
email		[e-mail]
subject		Eurostat%20support
feedback		Feedback
feedback-url		mailto:[e-mail]
cookies		Cookies
cookies-url		https://commission.europa.eu/cookies-policy_en
privacy-policy		Privacy policy
privacy-policy-url		https://commission.europa.eu/privacy-policy-websites-managed-european-commission_en
legal-notice		Legal notice
legal-notice-url		https://commission.europa.eu/legal-notice_en
accessibility		Accessibility
accessibility-ur		https://ec.europa.eu/eurostat/web/main/help/accessibilit

Note: changing these attributes during runtime will update the href and change the link.

Margin borders

The distance to the left and the right viewport borders default to "5%" and can be set via CSS.

For example:

ewc-footer-links{padding: 0 16px 0 16px;}

Usage

Installation

npm install @ewc-lib/ewc-footer-links

Import the component in your application:

// Using ES modules
import "@ewc-lib/ewc-css-common/custom-props.css";
import '@ewc-lib/ewc-footer-links';

Then the element can be used like this

<div style="width:100%;">
  <style>ewc-footer-links {padding: 0 20px 0 20px;}</style>
  <ewc-footer-links
    email="[e-mail]"
    subject="This is the eMail's subject">
  </ewc-footer-links>
</div>

Notes

Accessibility

The component is designed with accessibility in mind:

• Keyboard navigable element
• Sufficient color contrast

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

European Union Public License (EUPL)

Changelog

• 2.1.1-alpha

  • correct mistake in usage examples
  • increase encapsulation

• 2.1.0-alpha

  • add setter, docu and usage examples