Europa Component Library

Webtools widgets and services are designed to provide corporate features that adhere to European Commission standards. They are built with the following principles:

• Corporate Compliance: Features are available out-of-the-box and align with corporate standards for styling, accessibility, usability, and cookie rules.
• Ease of Use: Designed to be straightforward to implement.
• Dependency Management: Only use centrally-maintained 3rd-party dependencies.
• Multilingual Support: Available in 24 languages.

For detailed technical documentation and access, visit the official website (requires EU Login): https://webgate.ec.europa.eu/fpfis/wikis/display/webtools

The Europa Component Library (ECL) v5 is a collection of components designed to help developers build websites that align with the visual identity of the European Commission.

Each component in the library provides:

• Documentation: Explanations of the component's purpose and usage guidelines.
• Visual Demonstration: A live preview of the component in action.
• Implementation Code: Ready-to-use HTML and CSS for direct integration.

Note: This is version 5. If your project requires the older version 4, you must use the legacy documentation link.

The Europa Component Library (ECL) is a comprehensive style guide and collection of design elements and visual standards. It is designed to ensure consistency across all digital content managed by the European Commission, including:

• European Commission websites (hosted under ec.europa.eu)
• European Union websites (hosted under europa.eu)

Developers can use the ECL to build digital content that adheres to the official Europa visual standards and design patterns.

eUI is the component library used for applications within the European Commission. It serves two primary purposes:

1. Providing a standardized set of components for EC applications.
2. Offering an integration layer that allows ECL (Europa Component Library) components to be used within native Angular codebases.

The Europa Component Library (ECL) is the official design system for the European Commission's digital presence. It provides design guidelines, reusable components, and code resources to ensure consistent, accessible, and user-friendly web experiences across Commission services.

Key benefits include:

• Consistency: Visual and functional alignment across digital properties.
• Accessibility: Components are built following WCAG AA standards.
• Efficiency: Reduces development time with pre-built, tested components.
• Maintainability: Centralized updates benefit all projects.
• Compliance: Aligns with European Commission digital service standards and branding.

The Europa Component Library is organized into several functional categories to help developers find the right building blocks for their needs:

Site-wide

Components used for global layout and structure, such as headers and footers.

• Site header
• Page header
• Site footer

Banners

Components for prominent messaging and content presentation.

• Banner
• Carousel
• Slogan ticker

Forms

Input and selection components for user data entry.

• Checkbox
• Datepicker
• File upload
• Radio
• Range
• Search form
• Select
• Text area
• Text field
• Rating field

Media

Components for handling visual and multimedia content.

• Gallery
• Media container
• Featured item
• Text and media

Navigation

Components to help users move through the application or site.

• Breadcrumb
• In-page navigation
• Link
• Menu
• Navigation list
• Pagination
• Tabs

Webtools provides widgets and services designed for European Commission corporate environments. They are built to be straightforward to implement while adhering to strict corporate standards for styling, accessibility, usability, and cookie compliance. Key features include:

• Out-of-the-box corporate features: Ready-to-use functionality.
• Standardized design: Consistent with corporate styling and accessibility requirements.
• Multilingual support: Available in 24 languages.
• Controlled dependencies: Uses only centrally-maintained 3rd-party dependencies.

The Europa Component Library (ECL) provides a suite of typography utilities to manage text presentation. These utilities allow you to control:

• Headings: Standardized heading levels.
• Paragraph: Standardized paragraph text.
• Microcopy: Small-scale text for UI elements like labels or hints.
• Text colour: Applying semantic colors to text (e.g., using ecl-u-type-color-primary).
• Text style: Applying styles such as italics (ecl-u-type-italic).
• Text highlight: Applying background highlights to text.
• Text enhance: Applying additional text enhancements.

Note: For a full list of available text colors, refer to the specific typography usage documentation.