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 | | [email protected] | |subject | | Eurostat%20support| |feedback | | Feedback| |feedback-url | | mailto:[email protected]| |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="[email protected]"
    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.2.2-alpha

  • remove underline style on links (standalone links)
  • fix active style on feedback link
  • fix feedback icon position

• 2.1.1-alpha

  • correct mistake in usage examples
  • increase encapsulation

• 2.1.0-alpha

  • add setter, docu and usage examples