ecl-data.json•25.6 kB
{
"version": "4.11.1",
"name": "Europa Component Library (ECL)",
"description": "Design system for the European Commission and websites managed by the Commission",
"installation": {
"npm": "npm install @ecl/preset-eu",
"yarn": "yarn add @ecl/preset-eu",
"cdn_pattern": "https://cdn{1,2,3,4}.fpfis.tech.ec.europa.eu/ecl/{tag}/{system}/{path}",
"cdn_example": "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v4.11.1/eu/styles/optional/ecl-ec-default.css"
},
"setup": {
"html_template": "<!doctype html>\n<html lang=\"en\" class=\"no-js\">\n <head>\n <meta charset=\"utf-8\" />\n <title>Page title</title>\n <meta content=\"width=device-width,initial-scale=1\" name=\"viewport\" />\n <meta content=\"IE=edge\" http-equiv=\"X-UA-Compatible\" />\n <script>\n var cl = document.querySelector('html').classList;\n cl.remove('no-js');\n cl.add('has-js');\n </script>\n <link rel=\"stylesheet\" href=\"/styles/optional/ecl-reset.css\" media=\"screen\" />\n <link rel=\"stylesheet\" href=\"/styles/ecl-eu.css\" media=\"screen\" />\n <link rel=\"stylesheet\" href=\"/styles/optional/ecl-eu-utilities.css\" media=\"screen\" />\n <link rel=\"stylesheet\" href=\"/styles/ecl-eu-print.css\" media=\"print\" />\n </head>\n <body>\n <!-- content of your page here -->\n <script src=\"/scripts/ecl-eu.js\"></script>\n <script>\n ECL.autoInit();\n </script>\n </body>\n</html>",
"optional_styles": [
{
"name": "ecl-reset.css",
"description": "CSS reset rules, mostly based on normalize.css with custom additions"
},
{
"name": "ecl-eu-default.css",
"description": "Apply ECL styling to default HTML tags (links, buttons, table). Use sparingly - recommended to add classes to elements"
},
{
"name": "ecl-eu-utilities.css",
"description": "Utility classes for common styling needs"
}
],
"javascript": {
"auto_init": "ECL.autoInit()",
"manual_init": "Check component documentation for manual initialization",
"data_attribute": "data-ecl-auto-init=\"[ComponentName]\""
},
"dependencies": {
"pikaday": "Required for datepicker component",
"moment": "Optional for datepicker custom date formats"
}
},
"guidelines": {
"typography": {
"url": "https://ec.europa.eu/component-library/eu/guidelines/typography/",
"description": "Typography guidelines for consistent text styling"
},
"colours": {
"url": "https://ec.europa.eu/component-library/eu/guidelines/colours/",
"description": "Color palette and usage guidelines"
},
"images": {
"url": "https://ec.europa.eu/component-library/eu/guidelines/images/",
"description": "Image usage and optimization guidelines"
},
"iconography": {
"url": "https://ec.europa.eu/component-library/eu/guidelines/iconography/",
"description": "Icon system and usage guidelines"
},
"spacing": {
"url": "https://ec.europa.eu/component-library/eu/guidelines/spacing/",
"description": "Spacing system for consistent layouts"
}
},
"components": {
"accordion": {
"name": "Accordion",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/accordion/usage/",
"description": "Expandable/collapsible content sections",
"usage": "Use accordions to organize and hide content that users may not need to see all at once",
"auto_init": "Accordion",
"example": "<div class=\"ecl-accordion\" data-ecl-accordion data-ecl-auto-init=\"Accordion\">\n <div class=\"ecl-accordion__item\">\n <button class=\"ecl-accordion__toggle\" data-ecl-accordion-toggle>\n <span class=\"ecl-accordion__toggle-title\">Section title</span>\n <svg class=\"ecl-icon ecl-icon--s ecl-accordion__toggle-icon\">\n <use xlink:href=\"/icons.svg#corner-arrow\"></use>\n </svg>\n </button>\n <div class=\"ecl-accordion__content\" hidden>\n Content goes here\n </div>\n </div>\n</div>"
},
"banner": {
"name": "Banner",
"category": "banners",
"url": "https://ec.europa.eu/component-library/eu/components/banner/usage/",
"description": "Hero section for highlighting important content",
"usage": "Use banners to draw attention to key messages or calls to action"
},
"blockquote": {
"name": "Blockquote",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/blockquote/usage/",
"description": "Styled quotation blocks",
"usage": "Use blockquotes to highlight quotes or testimonials"
},
"breadcrumb": {
"name": "Breadcrumb",
"category": "navigation",
"url": "https://ec.europa.eu/component-library/eu/components/navigation/breadcrumb/usage/",
"description": "Navigation trail showing page hierarchy",
"usage": "Use breadcrumbs to help users understand their location in the site hierarchy",
"example": "<nav class=\"ecl-breadcrumb\" aria-label=\"Breadcrumb\">\n <ol class=\"ecl-breadcrumb__container\">\n <li class=\"ecl-breadcrumb__segment\">\n <a href=\"/\" class=\"ecl-link ecl-breadcrumb__link\">Home</a>\n <svg class=\"ecl-icon ecl-icon--xs ecl-breadcrumb__icon\">\n <use xlink:href=\"/icons.svg#corner-arrow\"></use>\n </svg>\n </li>\n <li class=\"ecl-breadcrumb__segment ecl-breadcrumb__current-page\">\n <span class=\"ecl-breadcrumb__current-page-label\">Current page</span>\n </li>\n </ol>\n</nav>"
},
"button": {
"name": "Button",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/button/usage/",
"description": "Interactive button elements",
"usage": "Use buttons for primary and secondary actions. Primary buttons should be used sparingly",
"variants": ["primary", "secondary", "call-to-action", "ghost", "text"],
"example": "<button type=\"button\" class=\"ecl-button ecl-button--primary\">Primary button</button>\n<button type=\"button\" class=\"ecl-button ecl-button--secondary\">Secondary button</button>\n<button type=\"button\" class=\"ecl-button ecl-button--call\">Call to action</button>"
},
"card": {
"name": "Card",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/card/usage/",
"description": "Container for content with consistent styling",
"usage": "Use cards to display related information in a structured format",
"example": "<article class=\"ecl-card\">\n <div class=\"ecl-card__image\">\n <img src=\"image.jpg\" alt=\"Alt text\" class=\"ecl-card__image-media\" />\n </div>\n <div class=\"ecl-card__body\">\n <h3 class=\"ecl-card__title\">\n <a href=\"#\" class=\"ecl-link ecl-link--standalone\">Card title</a>\n </h3>\n <div class=\"ecl-card__description\">Card description text</div>\n </div>\n</article>"
},
"carousel": {
"name": "Carousel",
"category": "banners",
"url": "https://ec.europa.eu/component-library/eu/components/carousel/usage/",
"description": "Rotating content display",
"usage": "Use carousels to showcase multiple items in limited space",
"auto_init": "Carousel"
},
"category-filter": {
"name": "Category Filter",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/category-filter/usage/",
"description": "Filter interface for categorized content",
"usage": "Use category filters to help users narrow down content by categories"
},
"checkbox": {
"name": "Checkbox",
"category": "forms",
"url": "https://ec.europa.eu/component-library/eu/components/forms/checkbox/usage/",
"description": "Checkbox input for multiple selections",
"usage": "Use checkboxes when users can select multiple options",
"example": "<div class=\"ecl-form-group\">\n <div class=\"ecl-checkbox\">\n <input type=\"checkbox\" id=\"checkbox-1\" class=\"ecl-checkbox__input\" />\n <label for=\"checkbox-1\" class=\"ecl-checkbox__label\">\n <span class=\"ecl-checkbox__box\">\n <svg class=\"ecl-icon ecl-icon--s ecl-checkbox__icon\">\n <use xlink:href=\"/icons.svg#check\"></use>\n </svg>\n </span>\n <span class=\"ecl-checkbox__text\">Checkbox label</span>\n </label>\n </div>\n</div>"
},
"content-item": {
"name": "Content Item",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/content-item/usage/",
"description": "Structured content display with metadata",
"usage": "Use content items to display articles, news items, or similar content"
},
"date-block": {
"name": "Date Block",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/date-block/usage/",
"description": "Visual date display component",
"usage": "Use date blocks to prominently display dates for events or articles"
},
"datepicker": {
"name": "Datepicker",
"category": "forms",
"url": "https://ec.europa.eu/component-library/eu/components/forms/datepicker/usage/",
"description": "Date input with calendar picker",
"usage": "Use datepickers for date selection. Requires Pikaday library",
"dependencies": ["pikaday", "moment (optional)"],
"auto_init": "Datepicker",
"format": "DD-MM-YYYY (default)"
},
"expandable": {
"name": "Expandable",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/expandable/usage/",
"description": "Single expandable content section",
"usage": "Use expandables for single collapsible sections",
"auto_init": "Expandable"
},
"fact-figures": {
"name": "Fact and Figures",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/fact-figures/usage/",
"description": "Display statistics and data",
"usage": "Use to highlight important statistics or data points"
},
"featured-item": {
"name": "Featured Item",
"category": "media",
"url": "https://ec.europa.eu/component-library/eu/components/media/featured-item/usage/",
"description": "Highlighted content with media",
"usage": "Use to feature important content with prominent imagery"
},
"file": {
"name": "File",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/file/usage/",
"description": "File download component",
"usage": "Use to present downloadable files with metadata"
},
"file-upload": {
"name": "File Upload",
"category": "forms",
"url": "https://ec.europa.eu/component-library/eu/components/forms/file-upload/usage/",
"description": "File upload input",
"usage": "Use for file upload functionality",
"auto_init": "FileUpload"
},
"gallery": {
"name": "Gallery",
"category": "media",
"url": "https://ec.europa.eu/component-library/eu/components/media/gallery/usage/",
"description": "Image gallery with lightbox",
"usage": "Use to display collections of images",
"auto_init": "Gallery"
},
"icon": {
"name": "Icon",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/icon/usage/",
"description": "SVG icon system",
"usage": "Use ECL icons for consistent visual language",
"example": "<svg class=\"ecl-icon ecl-icon--m\">\n <use xlink:href=\"/icons.svg#[icon-name]\"></use>\n</svg>",
"sizes": ["xs", "s", "m", "l", "xl", "2xl", "fluid"]
},
"inpage-navigation": {
"name": "Inpage Navigation",
"category": "navigation",
"url": "https://ec.europa.eu/component-library/eu/components/navigation/inpage-navigation/usage/",
"description": "Table of contents for page sections",
"usage": "Use for navigating within long pages",
"auto_init": "InpageNavigation"
},
"label": {
"name": "Label",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/label/usage/",
"description": "Badge-style labels",
"usage": "Use labels to categorize or tag content"
},
"link": {
"name": "Link",
"category": "navigation",
"url": "https://ec.europa.eu/component-library/eu/components/navigation/link/usage/",
"description": "Styled hyperlinks",
"usage": "Use ECL link styles for consistent navigation",
"variants": ["default", "standalone", "call-to-action", "primary", "secondary"],
"example": "<a href=\"#\" class=\"ecl-link\">Default link</a>\n<a href=\"#\" class=\"ecl-link ecl-link--standalone\">Standalone link</a>\n<a href=\"#\" class=\"ecl-link ecl-link--cta\">Call to action link</a>"
},
"list": {
"name": "List",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/list/usage/",
"description": "Styled lists",
"usage": "Use for unordered, ordered, and definition lists"
},
"list-illustration": {
"name": "List with Illustration",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/list-illustration/usage/",
"description": "List items with icons or images",
"usage": "Use to create visually enhanced lists"
},
"loading-indicator": {
"name": "Loading Indicator",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/loading-indicator/usage/",
"description": "Loading spinner animation",
"usage": "Use to indicate loading states"
},
"media-container": {
"name": "Media Container",
"category": "media",
"url": "https://ec.europa.eu/component-library/eu/components/media/media-container/usage/",
"description": "Container for responsive media",
"usage": "Use for embedding videos and iframes"
},
"mega-menu": {
"name": "Mega Menu",
"category": "navigation",
"url": "https://ec.europa.eu/component-library/eu/components/navigation/mega-menu/usage/",
"description": "Large dropdown navigation menu",
"usage": "Use for complex navigation structures",
"auto_init": "MegaMenu"
},
"menu": {
"name": "Menu",
"category": "navigation",
"url": "https://ec.europa.eu/component-library/eu/components/navigation/menu/usage/",
"description": "Standard navigation menu",
"usage": "Use for primary site navigation",
"auto_init": "Menu"
},
"message": {
"name": "Message",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/message/usage/",
"description": "User feedback messages",
"usage": "Use to communicate success, info, warning, or error messages",
"variants": ["info", "success", "warning", "error"],
"auto_init": "Message",
"example": "<div role=\"alert\" class=\"ecl-message ecl-message--info\" data-ecl-message data-ecl-auto-init=\"Message\">\n <svg class=\"ecl-icon ecl-icon--l ecl-message__icon\">\n <use xlink:href=\"/icons.svg#information\"></use>\n </svg>\n <div class=\"ecl-message__content\">\n <div class=\"ecl-message__title\">Information message</div>\n <p class=\"ecl-message__description\">Message description text</p>\n </div>\n <button class=\"ecl-message__close\" type=\"button\" data-ecl-message-close>\n <svg class=\"ecl-icon ecl-icon--s\">\n <use xlink:href=\"/icons.svg#close\"></use>\n </svg>\n </button>\n</div>"
},
"modal": {
"name": "Modal",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/modal/usage/",
"description": "Dialog overlay",
"usage": "Use modals for focused interactions",
"auto_init": "Modal"
},
"navigation-list": {
"name": "Navigation List",
"category": "navigation",
"url": "https://ec.europa.eu/component-library/eu/components/navigation/navigation-list/usage/",
"description": "Vertical navigation list",
"usage": "Use for sidebar or secondary navigation"
},
"news-ticker": {
"name": "News Ticker",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/news-ticker/usage/",
"description": "Scrolling news/announcements",
"usage": "Use to highlight breaking news or important announcements",
"auto_init": "NewsTicker"
},
"notification": {
"name": "Notification",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/notification/usage/",
"description": "Page-level notification banners",
"usage": "Use for system-wide messages and alerts"
},
"page-header": {
"name": "Page Header",
"category": "site-wide",
"url": "https://ec.europa.eu/component-library/eu/components/site-wide/page-header/usage/",
"description": "Header for content pages",
"usage": "Use at the top of content pages"
},
"pagination": {
"name": "Pagination",
"category": "navigation",
"url": "https://ec.europa.eu/component-library/eu/components/navigation/pagination/usage/",
"description": "Page navigation controls",
"usage": "Use for multi-page content"
},
"popover": {
"name": "Popover",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/popover/usage/",
"description": "Contextual popover tooltip",
"usage": "Use for additional information on hover/click",
"auto_init": "Popover"
},
"radio": {
"name": "Radio",
"category": "forms",
"url": "https://ec.europa.eu/component-library/eu/components/forms/radio/usage/",
"description": "Radio button input",
"usage": "Use when users can select only one option from a group",
"example": "<div class=\"ecl-form-group\">\n <div class=\"ecl-radio\">\n <input type=\"radio\" id=\"radio-1\" name=\"radio-group\" class=\"ecl-radio__input\" />\n <label for=\"radio-1\" class=\"ecl-radio__label\">\n <span class=\"ecl-radio__box\"></span>\n <span class=\"ecl-radio__text\">Radio option 1</span>\n </label>\n </div>\n</div>"
},
"range": {
"name": "Range",
"category": "forms",
"url": "https://ec.europa.eu/component-library/eu/components/forms/range/usage/",
"description": "Range slider input",
"usage": "Use for selecting values from a range"
},
"rating-field": {
"name": "Rating Field",
"category": "forms",
"url": "https://ec.europa.eu/component-library/eu/components/forms/rating-field/usage/",
"description": "Star rating input",
"usage": "Use for collecting user ratings"
},
"search-form": {
"name": "Search Form",
"category": "forms",
"url": "https://ec.europa.eu/component-library/eu/components/forms/search-form/usage/",
"description": "Search input with button",
"usage": "Use for site search functionality",
"example": "<form class=\"ecl-search-form\" role=\"search\">\n <label for=\"search-input\" class=\"ecl-search-form__label\">Search</label>\n <input id=\"search-input\" type=\"search\" class=\"ecl-search-form__text-input\" placeholder=\"Search\" />\n <button type=\"submit\" class=\"ecl-button ecl-button--search ecl-search-form__button\">\n <svg class=\"ecl-icon ecl-icon--s\">\n <use xlink:href=\"/icons.svg#search\"></use>\n </svg>\n <span class=\"ecl-button__label\">Search</span>\n </button>\n</form>"
},
"select": {
"name": "Select",
"category": "forms",
"url": "https://ec.europa.eu/component-library/eu/components/forms/select/usage/",
"description": "Dropdown select input",
"usage": "Use for selecting from a list of options",
"auto_init": "Select"
},
"separator": {
"name": "Separator",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/separator/usage/",
"description": "Visual separator line",
"usage": "Use to separate content sections"
},
"site-footer": {
"name": "Site Footer",
"category": "site-wide",
"url": "https://ec.europa.eu/component-library/eu/components/site-wide/site-footer/usage/",
"description": "Main site footer",
"usage": "Use at the bottom of every page"
},
"site-header": {
"name": "Site Header",
"category": "site-wide",
"url": "https://ec.europa.eu/component-library/eu/components/site-wide/site-header/usage/",
"description": "Main site header with navigation",
"usage": "Use at the top of every page",
"auto_init": "SiteHeader"
},
"social-media-follow": {
"name": "Social Media Follow",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/social-media-follow/usage/",
"description": "Social media follow links",
"usage": "Use to link to social media profiles"
},
"social-media-share": {
"name": "Social Media Share",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/social-media-share/usage/",
"description": "Social media sharing buttons",
"usage": "Use to enable content sharing",
"auto_init": "SocialMediaShare"
},
"splash-page": {
"name": "Splash Page",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/splash-page/usage/",
"description": "Language selection splash page",
"usage": "Use for multi-language site entry"
},
"table": {
"name": "Table",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/table/usage/",
"description": "Data tables",
"usage": "Use to display tabular data",
"variants": ["default", "zebra", "multi-header"],
"auto_init": "Table",
"example": "<table class=\"ecl-table\">\n <thead class=\"ecl-table__head\">\n <tr class=\"ecl-table__row\">\n <th class=\"ecl-table__header\">Header 1</th>\n <th class=\"ecl-table__header\">Header 2</th>\n </tr>\n </thead>\n <tbody class=\"ecl-table__body\">\n <tr class=\"ecl-table__row\">\n <td class=\"ecl-table__cell\">Data 1</td>\n <td class=\"ecl-table__cell\">Data 2</td>\n </tr>\n </tbody>\n</table>"
},
"tabs": {
"name": "Tabs",
"category": "navigation",
"url": "https://ec.europa.eu/component-library/eu/components/navigation/tabs/usage/",
"description": "Tabbed content interface",
"usage": "Use to organize related content in tabs",
"auto_init": "Tabs"
},
"tag": {
"name": "Tag",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/tag/usage/",
"description": "Interactive tag/chip component",
"usage": "Use for filters, categories, or removable items",
"auto_init": "Tag"
},
"text-area": {
"name": "Text Area",
"category": "forms",
"url": "https://ec.europa.eu/component-library/eu/components/forms/text-area/usage/",
"description": "Multi-line text input",
"usage": "Use for longer text input",
"example": "<div class=\"ecl-form-group\">\n <label for=\"textarea-1\" class=\"ecl-form-label\">Label</label>\n <textarea id=\"textarea-1\" class=\"ecl-text-area\" rows=\"4\"></textarea>\n</div>"
},
"text-field": {
"name": "Text Field",
"category": "forms",
"url": "https://ec.europa.eu/component-library/eu/components/forms/text-field/usage/",
"description": "Single-line text input",
"usage": "Use for short text input",
"example": "<div class=\"ecl-form-group\">\n <label for=\"text-1\" class=\"ecl-form-label\">Label</label>\n <input type=\"text\" id=\"text-1\" class=\"ecl-text-input\" />\n</div>"
},
"timeline": {
"name": "Timeline",
"category": "content",
"url": "https://ec.europa.eu/component-library/eu/components/timeline/usage/",
"description": "Chronological event display",
"usage": "Use to display events or milestones chronologically",
"auto_init": "Timeline"
}
},
"utilities": {
"url": "https://ec.europa.eu/component-library/eu/utilities/",
"description": "Utility classes for spacing, display, colors, etc."
},
"resources": {
"playground": "https://ec.europa.eu/component-library/playground/eu/",
"github": "https://github.com/ec-europa/europa-component-library",
"npm_org": "https://www.npmjs.com/org/ecl",
"releases": "https://github.com/ec-europa/europa-component-library/releases",
"cookie_consent": "https://webgate.ec.europa.eu/fpfis/wikis/display/webtools/Cookie+Consent+Kit+Banner"
},
"important_notes": [
"Always host SVG sprites on the same domain to avoid CORS issues",
"Use svg4everybody polyfill if loading SVGs from CDN: svg4everybody({ polyfill: true })",
"ECL uses Pikaday for datepicker - must be loaded separately",
"Include Cookie Consent Kit before going live",
"Recommended to host ECL resources locally rather than using CDN",
"Use data-ecl-auto-init attribute for automatic component initialization",
"Call ECL.autoInit() after page load for auto-initialization"
]
}