+```
+
+Use the `ECL` library's `autoInit()` (`ECL.autoInit()`) when your page is ready or other custom event you want to hook onto.
+
+### Manual
+
+Get target element, create an instance and invoke `init()`.
+
+Given you have 1 element with an attribute `data-ecl-accordion` on the page:
+
+```js
+var elt = document.querySelector('[data-ecl-accordion]');
+var accordion = new ECL.Accordion(elt);
+accordion.init();
+```
+
+### Retrieve an existing instance
+
+If an existing instance needs to be updated, it can be retrieved this way:
+
+```js
+var elt = document.querySelector('[data-ecl-accordion]');
+var instance = ECL.components.get(elt);
+```
+
+## API
+
+
diff --git a/src/website-next/content/ec/components/accordion/docs/code.mdx b/src/website-next/content/ec/components/accordion/docs/code.mdx
new file mode 100644
index 00000000000..d992a6b2ef1
--- /dev/null
+++ b/src/website-next/content/ec/components/accordion/docs/code.mdx
@@ -0,0 +1,17 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Playground, Html } from '@ecl/website-components';
+
+import accordion from '../demo';
+
+
+
+
diff --git a/src/website-next/content/ec/components/accordion/docs/usage.md b/src/website-next/content/ec/components/accordion/docs/usage.md
new file mode 100644
index 00000000000..495e0a6d3da
--- /dev/null
+++ b/src/website-next/content/ec/components/accordion/docs/usage.md
@@ -0,0 +1,31 @@
+---
+title: Usage
+order: 1
+---
+The accordion component is used to generate vertically stacked content in a page. It is intended to save vertical space by hiding content, reducing scrolling.
+
+Accordions contains labels with the relevant information. Users can click on the accordion to read additional information. For this reason, accordion labels (collapsed state) should be as descriptive and concise as possible.
+
+## Do's
+
+- use labels that are representative of the content inside the (initially hidden) container
+- order logically (such as 1st quarter, 2nd quarter, 3rd quarter, 4th quarter)
+- make sure this component is required in order to shorten the page
+
+## Don'ts
+
+- don't use unless users will benefit from hidden information
+- don't use actionable items (i.e. forms, accordions, buttons, CTAs, etc.) or pictures in the content container as they will have decreased visibility
+- don't hide important information that should be present at all times
+- don't use long labels, ideally keep it to one line, maximum 2
+
+## When to use
+
+- when you need to present multiple sections of content in a simple way on one page, without overwhelming the user (especially applicable to mobile)
+- when it’s not critical for every user to read every section of content, adding value
+- when you can make extensive and complex content easier to digest through descriptive labels
+
+## When not to use
+
+- don't use when pages are short (reading time: under 3 minutes)
+- don't use when information would be better structured horizontally (does not need comparison between sections) - use tabs instead
diff --git a/src/website-next/content/ec/components/accordion/ec_comp_accordion.svg b/src/website-next/content/ec/components/accordion/ec_comp_accordion.svg
new file mode 100644
index 00000000000..fe1111acb1b
--- /dev/null
+++ b/src/website-next/content/ec/components/accordion/ec_comp_accordion.svg
@@ -0,0 +1,118 @@
+
+
diff --git a/src/website-next/content/ec/components/accordion/index.md b/src/website-next/content/ec/components/accordion/index.md
new file mode 100644
index 00000000000..1008361f0cd
--- /dev/null
+++ b/src/website-next/content/ec/components/accordion/index.md
@@ -0,0 +1,8 @@
+---
+title: Accordion
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-accordion--default
+---
diff --git a/src/website-next/content/ec/components/banner/demo/index.js b/src/website-next/content/ec/components/banner/demo/index.js
new file mode 100644
index 00000000000..62427cf6df1
--- /dev/null
+++ b/src/website-next/content/ec/components/banner/demo/index.js
@@ -0,0 +1,11 @@
+import demoContentImage from '@ecl/banner/demo/data--image';
+import demoContentVideo from '@ecl/banner/demo/data--video';
+
+import template from '@ecl/banner/banner.html.twig';
+import { correctSvgPath } from '@ecl/website-utils';
+
+demoContentImage.description = demoContentImage.description.link.label;
+demoContentVideo.description = demoContentVideo.description.link.label;
+
+export const bannerImage = template(correctSvgPath(demoContentImage));
+export const bannerVideo = template(correctSvgPath(demoContentVideo));
diff --git a/src/website-next/content/ec/components/banner/docs/api.mdx b/src/website-next/content/ec/components/banner/docs/api.mdx
new file mode 100644
index 00000000000..dac866a6bb1
--- /dev/null
+++ b/src/website-next/content/ec/components/banner/docs/api.mdx
@@ -0,0 +1,46 @@
+---
+title: API
+order: 3
+---
+
+import React from 'react';
+import Iframe from '../../../../../website-components/Showcase/Iframe';
+
+## Setup
+
+There are 2 ways to initialise the component.
+
+### Automatic
+
+Add `data-ecl-auto-init="Banner"` attribute to component's markup:
+
+```html
+
+ ...
+
+```
+
+Use the `ECL` library's `autoInit()` (`ECL.autoInit()`) when your page is ready or other custom event you want to hook onto.
+
+### Manual
+
+Get target element, create an instance and invoke `init()`.
+
+Given you have 1 element with an attribute `data-ecl-banner` on the page:
+
+```js
+var elt = document.querySelector('[data-ecl-banner]');
+var banner = new ECL.Banner(elt);
+banner.init();
+```
+
+### Retrieve an existing instance
+
+```js
+var elt = document.querySelector('[data-ecl-banner]');
+var instance = ECL.components.get(elt);
+```
+
+## API
+
+
diff --git a/src/website-next/content/ec/components/banner/docs/code.mdx b/src/website-next/content/ec/components/banner/docs/code.mdx
new file mode 100644
index 00000000000..da7be5a6396
--- /dev/null
+++ b/src/website-next/content/ec/components/banner/docs/code.mdx
@@ -0,0 +1,45 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Html, Playground } from '@ecl/website-components';
+import { bannerImage, bannerVideo } from '../demo';
+
+## Image banner
+
+
+
+
+
+## Video banner
+
+
+
+
+
+## Other variants
+
+Several variants are available for all kind of banner: size, font, background and text color, horizontal and vertical alignment, ...
+
+Check the playground for more information.
+
+## Banner width
+
+Banners placed inside a grid container (`.ecl-container`) will expand to this container width.
+
+To have a full width banner, the recommanded way is to place it outside of the grid container.
+
+However, if there is a need to have a full width banner inside the grid container, the css class `.ecl-banner--fullwidth` can be used (just put it at the same level as `.ecl-banner`).
+
+**Caution**: if you plan to use full width banner using this fullwidth css class, we recommend to include the optional `ecl-reset.css`, as some global rules here would improve the display (`overflow-x: hidden`).
diff --git a/src/website-next/content/ec/components/banner/docs/usage.md b/src/website-next/content/ec/components/banner/docs/usage.md
new file mode 100644
index 00000000000..35dfae5464c
--- /dev/null
+++ b/src/website-next/content/ec/components/banner/docs/usage.md
@@ -0,0 +1,31 @@
+---
+title: Usage
+order: 1
+---
+Banners are a component that score highly in the visual hierarchy, used to convey a message to the user.. They typically consist of an image, with heading, additional information and CTA. The 4 variants are designed with the user experience and accessibility in mind, controlling for various degrees of image exposure and text-to-image contrast ratio. The sizes cover multiple aspect ratios, specifically 3:1 (large), 4:1 (medium) and 5:1 (small).
+
+## Do's
+
+- ensure that the size follows the aspect ratio of 3:1 (large), 4:1 (medium) and 5:1 (small)
+- ensure that the component is optimised for different devices
+- use and indicate appropriate file formats (jpg, png), if restrictions are applied
+- keep in mind the file size as it may affect page loading time
+- indicate file size if restrictions are applied
+- use indicated HTML tags and attributes
+
+## Don'ts
+
+- do not use a size that is larger than the allotted space
+- do not use a size that is not in the correct aspect ratio
+- do not use an inappropriate file format (e.g. gif, tiff)
+- do not use an incorrect file size
+- do not use incorrect HTML tags and attributes for the banner
+
+## When to use
+
+- use on homepage or landing pages to increase the visual hierarchy of a message or page
+- use on pages that are high in the information architecture (usually parent pages) to highlight topics and link to related pages
+
+## When not to use
+
+- do not use for large pieces of content - use [Featured item](https://ec.europa.eu/component-library/eu/components/media/featured-item/code/) instead
diff --git a/src/website-next/content/ec/components/banner/ec_comp_banner.svg b/src/website-next/content/ec/components/banner/ec_comp_banner.svg
new file mode 100644
index 00000000000..ada170db47f
--- /dev/null
+++ b/src/website-next/content/ec/components/banner/ec_comp_banner.svg
@@ -0,0 +1,72 @@
+
+
diff --git a/src/website-next/content/ec/components/banner/index.md b/src/website-next/content/ec/components/banner/index.md
new file mode 100644
index 00000000000..a526e86d2d9
--- /dev/null
+++ b/src/website-next/content/ec/components/banner/index.md
@@ -0,0 +1,8 @@
+---
+title: Banner
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-banner--image
+---
diff --git a/src/website-next/content/ec/components/blockquote/demo/index.js b/src/website-next/content/ec/components/blockquote/demo/index.js
new file mode 100644
index 00000000000..60c3d52af8b
--- /dev/null
+++ b/src/website-next/content/ec/components/blockquote/demo/index.js
@@ -0,0 +1,5 @@
+import demoContent from '@ecl/blockquote/demo/data';
+import template from '@ecl/blockquote/blockquote.html.twig';
+
+const blockquote = template(demoContent);
+export default blockquote;
diff --git a/src/website-next/content/ec/components/blockquote/docs/code.mdx b/src/website-next/content/ec/components/blockquote/docs/code.mdx
new file mode 100644
index 00000000000..a49e37a0ff7
--- /dev/null
+++ b/src/website-next/content/ec/components/blockquote/docs/code.mdx
@@ -0,0 +1,15 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Playground, Html } from '@ecl/website-components';
+import blockquote from '../demo';
+
+
+
+
diff --git a/src/website-next/content/ec/components/blockquote/docs/usage.md b/src/website-next/content/ec/components/blockquote/docs/usage.md
new file mode 100644
index 00000000000..0b0ef5b85c9
--- /dev/null
+++ b/src/website-next/content/ec/components/blockquote/docs/usage.md
@@ -0,0 +1,24 @@
+---
+title: Usage
+order: 1
+---
+The blockquotes component is used to capture users' attention of an excerpt, testimonial, or a quote cited from the article or other sources. The design style makes the quoted section more distinguishable than the rest of the content in the web page.
+
+## Do's
+
+- always name the source of the quoted content
+- limit the quote to no longer than 80 characters
+- use the image variant to add a portrait of the quoted person
+
+## Don'ts
+
+- do not apply more than 2 blockquotes components in the webpage
+- for the image variant, do not use a photoshopped composition of images
+
+## When to use
+
+- quoting something important
+
+## When not to use
+
+- for the purpose of emphasising text style
diff --git a/src/website-next/content/ec/components/blockquote/ec_comp_blockquotes.svg b/src/website-next/content/ec/components/blockquote/ec_comp_blockquotes.svg
new file mode 100644
index 00000000000..c5e39375e16
--- /dev/null
+++ b/src/website-next/content/ec/components/blockquote/ec_comp_blockquotes.svg
@@ -0,0 +1,68 @@
+
+
diff --git a/src/website-next/content/ec/components/blockquote/index.md b/src/website-next/content/ec/components/blockquote/index.md
new file mode 100644
index 00000000000..8e7d579e8a7
--- /dev/null
+++ b/src/website-next/content/ec/components/blockquote/index.md
@@ -0,0 +1,8 @@
+---
+title: Blockquotes
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-blockquote--default
+---
diff --git a/src/website-next/content/ec/components/button/demo/index.js b/src/website-next/content/ec/components/button/demo/index.js
new file mode 100644
index 00000000000..cd61144b87a
--- /dev/null
+++ b/src/website-next/content/ec/components/button/demo/index.js
@@ -0,0 +1,27 @@
+import demoContentPrimary from '@ecl/button/demo/data--primary';
+import demoContentSecondary from '@ecl/button/demo/data--secondary';
+import demoContentCall from '@ecl/button/demo/data--call';
+import demoContentGhost from '@ecl/button/demo/data--ghost';
+import demoContentGhostInverted from '@ecl/button/demo/data--ghost-inverted';
+import demoContentTertiary from '@ecl/button/demo/data--tertiary';
+import template from '@ecl/button/button.html.twig';
+import { correctSvgPath } from '@ecl/website-utils';
+
+const demoContentIcon = {
+ ...demoContentSecondary,
+ icon: {
+ path: '/icons.svg',
+ name: 'corner-arrow',
+ size: 'xs',
+ transform: 'rotate-90',
+ },
+ hide_label: true,
+};
+
+export const buttonPrimary = template(demoContentPrimary);
+export const buttonSecondary = template(demoContentSecondary);
+export const buttonTertiary = template(demoContentTertiary);
+export const buttonCall = template(demoContentCall);
+export const buttonGhost = template(demoContentGhost);
+export const buttonGhostInverted = template(demoContentGhostInverted);
+export const buttonIconOnly = template(correctSvgPath(demoContentIcon));
diff --git a/src/website-next/content/ec/components/button/docs/code.mdx b/src/website-next/content/ec/components/button/docs/code.mdx
new file mode 100644
index 00000000000..c9d93435d5e
--- /dev/null
+++ b/src/website-next/content/ec/components/button/docs/code.mdx
@@ -0,0 +1,91 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Playground, Html } from '@ecl/website-components';
+import {
+ buttonPrimary,
+ buttonSecondary,
+ buttonTertiary,
+ buttonCall,
+ buttonGhost,
+ buttonGhostInverted,
+ buttonIconOnly,
+} from '../demo';
+
+## Primary
+
+
+
+
+
+## Secondary
+
+
+
+
+
+## Tertiary
+
+
+
+
+
+## Call to action
+
+
+
+
+
+## Ghost
+
+
+
+
+
+## Ghost inverted
+
+
+
+
+
+## Button with icon only
+
+Button label can be hidden by using button variant `ecl-button--icon-only`. The label has to be filled in any case, to provide context to screen readers.
+
+Of course, this requires to have an icon defined, otherwise the display would be suboptimal.
+
+Spacing of icon only button is adapted to make it square.
+
+
+
+
diff --git a/src/website-next/content/ec/components/button/docs/usage.md b/src/website-next/content/ec/components/button/docs/usage.md
new file mode 100644
index 00000000000..5b8ca80be69
--- /dev/null
+++ b/src/website-next/content/ec/components/button/docs/usage.md
@@ -0,0 +1,113 @@
+---
+title: Usage
+order: 1
+---
+Buttons trigger an action in a web page. There are 4 variants of the button component with different levels of importance and usages.
+
+# Primary Button
+
+Primary button is designed for users to perform the most important task in a web page. The visual design is more distinguishable from the secondary button.
+
+## Do's
+
+- make sure the button‘s microcopy represents the action such as “Submit“ or “Register“
+- use an icon only when it is necessary
+- when adding an icon to the text button, ensure the label is descriptive enough when used standalone (icon is not described by screen readers)
+
+## Don'ts
+
+- don't assign an action that should be assigned for a CTA or other variations of buttons
+- don't use an icon when it is not relevant or necessary to the action
+
+## When to use
+
+- as a form button such as submit, or save
+- perform a new task
+- move to the next step
+- as a primary action
+
+## When not to use
+
+- do not use for navigation
+- do not use for downloads
+- do not use when the primary action is negative - use secondary button
+- do not use when the action can't be undone, such as delete
+
+# Secondary Button
+
+It is used to represent the secondary action in a web page. It is paired with a primary button. The secondary button serves as the negative action of the pair, such as “Delete,” "Cancel" or “Remove”.
+
+## Do's
+
+- ensure the button functions a negative action, such as "Cancel", "Delete," "Remove" or "Replace" as the secondary action next to the primary button
+- follow the order of the button group; right to the primary button
+- use an icon only when it is necessary
+- when adding an icon to the text button, ensure the label is descriptive enough when used standalone (icon is not described by screen readers)
+
+## Don'ts
+
+- do not use for primary positive actions - Submit, Send, Accept, Apply
+- do not use on its own
+- don't use an icon when it is not relevant or necessary to the action
+
+## When to use
+
+- to indicate a negative action, to pair it with a primary button
+- as a secondary action next to the primary button - such as Cancel, Reject
+- next to the primary button if it is a yes and no scenario
+
+## When not to use
+
+- do not use for navigation
+- do not place it to the left side of the button group
+
+# Text Button
+
+Text button is used in a web page with less prominent action. It can be grouped with other buttons or placed independently.
+
+## Do's
+
+- make sure the button represents a less important action, such as "Show more", "Expand" or "See details"
+
+## Don'ts
+
+- use it when the action has high importance in the hierarchy
+
+## When to use
+
+- use with low emphasis in a button group
+- use on pages/cards when the main focus should be the content and not the button
+- when there is a single action intended
+- when adding an icon to the text button, ensure the label is descriptive enough when used standalone (icon is not described by screen readers)
+
+## When not to use
+
+- do not use for navigation purpose
+
+# Call to action (CTA) button
+
+The Call to action button (CTA) draws users' attention to the most important action on a web page. The visual style has bright background colour and a high contrast label to indicate the importance of the action.
+
+## Do's
+
+- ensure the button directs to a pre-defined goal, such as 'Search by priority'
+- when adding an icon to the text button, ensure the label is descriptive enough when used standalone (icon is not described by screen readers)
+
+## Don'ts
+
+- do not use more than once per page (except where the main action or user goal is repeated on the same page)
+
+## When to use
+
+- only where your goal is to strongly suggest something that the user should do
+
+## When not to use
+
+- do not use for site navigation purpose
+
+# Button with icon only
+
+All buttons can have their label hidden by using button variant ecl-button--icon-only.
+
+- label requires to be filled nonetheless, in order to provide context to screen readers
+- Ensure you adapt the label (e.g. "Secondary button") in < span class="ecl-button\_\_label" data-ecl-label="true">Secondary button to the selected icon, to provide the right context to screen readers
diff --git a/src/website-next/content/ec/components/button/ec_comp_buttons.svg b/src/website-next/content/ec/components/button/ec_comp_buttons.svg
new file mode 100644
index 00000000000..346041d824f
--- /dev/null
+++ b/src/website-next/content/ec/components/button/ec_comp_buttons.svg
@@ -0,0 +1,45 @@
+
+
diff --git a/src/website-next/content/ec/components/button/index.md b/src/website-next/content/ec/components/button/index.md
new file mode 100644
index 00000000000..b04741180b0
--- /dev/null
+++ b/src/website-next/content/ec/components/button/index.md
@@ -0,0 +1,10 @@
+---
+title: Buttons
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-button--primary
+---
+
+This is a test
diff --git a/src/website-next/content/ec/components/card/demo/index.js b/src/website-next/content/ec/components/card/demo/index.js
new file mode 100644
index 00000000000..6be65d52f70
--- /dev/null
+++ b/src/website-next/content/ec/components/card/demo/index.js
@@ -0,0 +1,12 @@
+import dataCard from '@ecl/card/demo/data';
+
+import template from '@ecl/card/card.html.twig';
+import { correctSvgPath } from '@ecl/website-utils';
+
+const dataCardDefault = JSON.parse(JSON.stringify(dataCard));
+delete dataCardDefault.lists;
+
+const dataCardLists = JSON.parse(JSON.stringify(dataCard));
+
+export const card = template(correctSvgPath(dataCardDefault));
+export const cardLists = template(correctSvgPath(dataCardLists));
diff --git a/src/website-next/content/ec/components/card/docs/code.mdx b/src/website-next/content/ec/components/card/docs/code.mdx
new file mode 100644
index 00000000000..1436e6018f6
--- /dev/null
+++ b/src/website-next/content/ec/components/card/docs/code.mdx
@@ -0,0 +1,32 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Playground, Html } from '@ecl/website-components';
+import { card, cardLists } from '../demo';
+
+## Default card
+
+
+
+
+
+## Card with lists
+
+
+
+
diff --git a/src/website-next/content/ec/components/card/docs/usage.md b/src/website-next/content/ec/components/card/docs/usage.md
new file mode 100644
index 00000000000..d7245f3b3ab
--- /dev/null
+++ b/src/website-next/content/ec/components/card/docs/usage.md
@@ -0,0 +1,28 @@
+---
+title: Usage
+order: 1
+---
+Cards component is used as an entry point to more detailed information. The component can include various sets of elements to serve users' specific needs.
+
+## Do's
+
+- only display the most relevant information on each card illustration: card with a thumbnail, title, description
+- keep the amount of links on the cards as low as possible
+
+## Don'ts
+
+- overuse cards
+- limit the amount of cards to small groups of items
+- limit to 3-4 cards within a row
+- display too many links on a cards, the main and ideally only action on card should remain to navigate to the content it represent.
+
+## When to use
+
+- browsing for information (as opposed to searching)
+- grouping heterogeneous types of content
+- allowing users to scan through content in small portions
+
+## When not to use
+
+- searching for information (as opposed to browsing).
+- on small screen display avoid using too many cards as they force users to scroll down and rely on their short-term memory, creating cognitive overload, which may result in a negative user experience.
diff --git a/src/website-next/content/ec/components/card/ec_comp_cards.svg b/src/website-next/content/ec/components/card/ec_comp_cards.svg
new file mode 100644
index 00000000000..b6087dffdfc
--- /dev/null
+++ b/src/website-next/content/ec/components/card/ec_comp_cards.svg
@@ -0,0 +1,65 @@
+
+
diff --git a/src/website-next/content/ec/components/card/index.md b/src/website-next/content/ec/components/card/index.md
new file mode 100644
index 00000000000..8231f233b42
--- /dev/null
+++ b/src/website-next/content/ec/components/card/index.md
@@ -0,0 +1,8 @@
+---
+title: Cards
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-card--default
+---
diff --git a/src/website-next/content/ec/components/carousel/demo/index.js b/src/website-next/content/ec/components/carousel/demo/index.js
new file mode 100644
index 00000000000..b432ce875d0
--- /dev/null
+++ b/src/website-next/content/ec/components/carousel/demo/index.js
@@ -0,0 +1,5 @@
+import demoContent from '@ecl/carousel/demo/data';
+import template from '@ecl/carousel/carousel.html.twig';
+import { correctSvgPath } from '@ecl/website-utils';
+
+export const carousel = template(correctSvgPath(demoContent));
diff --git a/src/website-next/content/ec/components/carousel/docs/api.mdx b/src/website-next/content/ec/components/carousel/docs/api.mdx
new file mode 100644
index 00000000000..dd89857861f
--- /dev/null
+++ b/src/website-next/content/ec/components/carousel/docs/api.mdx
@@ -0,0 +1,48 @@
+---
+title: API
+order: 3
+---
+
+import React from 'react';
+import Iframe from '../../../../../website-components/Showcase/Iframe';
+
+## Setup
+
+There are 2 ways to initialise the component.
+
+### Automatic
+
+Add `data-ecl-auto-init="Carousel"` attribute to component's markup:
+
+```html
+
+ ...
+
+```
+
+Use the `ECL` library's `autoInit()` (`ECL.autoInit()`) when your page is ready or other custom event you want to hook onto.
+
+### Manual
+
+Get target element, create an instance and invoke `init()`.
+
+Given you have 1 element with an attribute `data-ecl-carousel` on the page:
+
+```js
+var elt = document.querySelector('[data-ecl-carousel]');
+var carousel = new ECL.Carousel(elt);
+carousel.init();
+```
+
+### Retrieve an existing instance
+
+If an existing instance needs to be updated, it can be retrieved this way:
+
+```js
+var elt = document.querySelector('[data-ecl-carousel]');
+var instance = ECL.components.get(elt);
+```
+
+## API
+
+
diff --git a/src/website-next/content/ec/components/carousel/docs/code.mdx b/src/website-next/content/ec/components/carousel/docs/code.mdx
new file mode 100644
index 00000000000..a16e5ab4165
--- /dev/null
+++ b/src/website-next/content/ec/components/carousel/docs/code.mdx
@@ -0,0 +1,21 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Playground, Html } from '@ecl/website-components';
+import { carousel } from '../demo';
+
+
+
+
+
+## Other sizes
+
+Carousel can also be displayed with small or large sizes, by using corresponding sizes for the banners.
+You can find examples on the playground.
diff --git a/src/website-next/content/ec/components/carousel/docs/usage.md b/src/website-next/content/ec/components/carousel/docs/usage.md
new file mode 100644
index 00000000000..b4ea8f8e9d4
--- /dev/null
+++ b/src/website-next/content/ec/components/carousel/docs/usage.md
@@ -0,0 +1,33 @@
+---
+title: Usage
+order: 1
+---
+Similar to [Banners](https://ec.europa.eu/component-library/ec/components/banner/code/), Carousels are a component that score highly in the visual hierarchy, used to convey multiple messages to the user or provide quick access to their respective page. They typically consist of an image, with heading, additional information and [CTA](https://ec.europa.eu/component-library/ec/components/button/code/) as well as the item indicators and controls.
+
+The 4 variants are designed with the user experience and accessibility in mind, controlling for various degrees of image exposure and and text-to-image contrast ratio. The sizes cover multiple aspect ratios, specifically 3:1 (large), 4:1 (medium) and 5:1 (small).
+
+## Do's
+
+- ensure that the size follows the aspect ratio of 3:1 (large), 4:1 (medium) and 5:1 (small)
+- ensure that the component is optimised for different devices
+- use and indicate appropriate file formats (jpg, png), if restrictions are applied
+- keep in mind the file size as it may affect page loading time
+- indicate file size if restrictions are applied
+- use indicated HTML tags and attributes
+
+## Don'ts
+
+- do not use a size that is larger than the allotted space
+- do not use a size that is not in the correct aspect ratio
+- do not use an inappropriate file format (e.g. gif, tiff)
+- do not use an incorrect file size
+
+## When to use
+
+- when you have multiple topics which are given high importance
+- use on homepage or landing pages to increase the visual hierarchy of a message or page
+- use on pages that are high in the information architecture (usually parent pages) to highlight topics and link to related pages
+
+## When not to use
+
+- do not use on pages presenting specific content which require a permanent title or have no need for additional content, use [Page header with background image](https://ec.europa.eu/component-library/ec/components/site-wide/page-header/code/) variant instead
diff --git a/src/website-next/content/ec/components/carousel/ec_comp_carousel.svg b/src/website-next/content/ec/components/carousel/ec_comp_carousel.svg
new file mode 100644
index 00000000000..b74b46224e2
--- /dev/null
+++ b/src/website-next/content/ec/components/carousel/ec_comp_carousel.svg
@@ -0,0 +1,106 @@
+
diff --git a/src/website-next/content/ec/components/carousel/index.md b/src/website-next/content/ec/components/carousel/index.md
new file mode 100644
index 00000000000..3e68a100f45
--- /dev/null
+++ b/src/website-next/content/ec/components/carousel/index.md
@@ -0,0 +1,8 @@
+---
+title: Carousel
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-carousel--default
+---
diff --git a/src/website-next/content/ec/components/category-filter/demo/index.js b/src/website-next/content/ec/components/category-filter/demo/index.js
new file mode 100644
index 00000000000..6de7e4e8e37
--- /dev/null
+++ b/src/website-next/content/ec/components/category-filter/demo/index.js
@@ -0,0 +1,6 @@
+import data from '@ecl/category-filter/demo/data';
+import template from '@ecl/category-filter/category-filter.html.twig';
+import { correctSvgPath } from '@ecl/website-utils';
+
+const categoryFilter = template(correctSvgPath(data));
+export default categoryFilter;
diff --git a/src/website-next/content/ec/components/category-filter/docs/api.mdx b/src/website-next/content/ec/components/category-filter/docs/api.mdx
new file mode 100644
index 00000000000..b7274bb9277
--- /dev/null
+++ b/src/website-next/content/ec/components/category-filter/docs/api.mdx
@@ -0,0 +1,52 @@
+---
+title: API
+order: 3
+---
+
+import React from 'react';
+import Iframe from '../../../../../website-components/Showcase/Iframe';
+
+## Setup
+
+There are 2 ways to initialise the component.
+
+### Automatic
+
+Add `data-ecl-auto-init="CategoryFilter"` attribute to component's markup:
+
+```html
+
+ ...
+
+```
+
+Use the `ECL` library's `autoInit()` (`ECL.autoInit()`) when your page is ready or other custom event you want to hook onto.
+
+### Manual
+
+Get target element, create an instance and invoke `init()`.
+
+Given you have 1 element with an attribute `data-ecl-category-filter` on the page:
+
+```js
+var elt = document.querySelector('[data-ecl-category-filter]');
+var categoryFilter = new ECL.CategoryFilter(elt);
+categoryFilter.init();
+```
+
+### Retrieve an existing instance
+
+If an existing instance needs to be updated, it can be retrieved this way:
+
+```js
+var elt = document.querySelector('[data-ecl-category-filter]');
+var instance = ECL.components.get(elt);
+```
+
+## API
+
+
diff --git a/src/website-next/content/ec/components/category-filter/docs/code.mdx b/src/website-next/content/ec/components/category-filter/docs/code.mdx
new file mode 100644
index 00000000000..9649d851e12
--- /dev/null
+++ b/src/website-next/content/ec/components/category-filter/docs/code.mdx
@@ -0,0 +1,16 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Playground, Html } from '@ecl/website-components';
+import categoryFilter from '../demo';
+
+
+
+
diff --git a/src/website-next/content/ec/components/category-filter/docs/usage.md b/src/website-next/content/ec/components/category-filter/docs/usage.md
new file mode 100644
index 00000000000..fe91b8b99a7
--- /dev/null
+++ b/src/website-next/content/ec/components/category-filter/docs/usage.md
@@ -0,0 +1,26 @@
+---
+title: Usage
+order: 1
+---
+
+The category filter is a component that allows users to recognise the hierarchy of a set of items that can be filtered, and narrow down results as they select categories up to 4 levels.
+
+## Do's
+
+- make sure to display the number of items available in each category
+
+## Don'ts
+
+- do not use more than one Category filter per filter section
+
+## When to use
+
+- use on pool pages when you want to expose a set of categories users can filter by
+- when you want to inform users on the hierarchy of items available
+
+## When not to use
+
+- do no use if you have one category, expose the child nodes instead
+- do not use if you need to display categories further than 4 levels
+- do not use when categories do not have any sub-items - use the [Default select list](https://ec.europa.eu/component-library/ec/components/forms/select/code/) instead
+- do not use if you want users to be able to select child nodes from different categories - use [Multiple select list](https://ec.europa.eu/component-library/ec/components/forms/select/code/) instead
diff --git a/src/website-next/content/ec/components/category-filter/ec_comp_category_filter.svg b/src/website-next/content/ec/components/category-filter/ec_comp_category_filter.svg
new file mode 100644
index 00000000000..8c61be7b877
--- /dev/null
+++ b/src/website-next/content/ec/components/category-filter/ec_comp_category_filter.svg
@@ -0,0 +1,107 @@
+
diff --git a/src/website-next/content/ec/components/category-filter/index.md b/src/website-next/content/ec/components/category-filter/index.md
new file mode 100644
index 00000000000..def1a77c75c
--- /dev/null
+++ b/src/website-next/content/ec/components/category-filter/index.md
@@ -0,0 +1,8 @@
+---
+title: Category filter
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-category-filter--default
+---
diff --git a/src/website-next/content/ec/components/content-item/demo/index.js b/src/website-next/content/ec/components/content-item/demo/index.js
new file mode 100644
index 00000000000..77589b09cbd
--- /dev/null
+++ b/src/website-next/content/ec/components/content-item/demo/index.js
@@ -0,0 +1,16 @@
+import demoImage from '@ecl/content-item/demo/data--image';
+import demoEvent from '@ecl/content-item/demo/data--event';
+
+import template from '@ecl/content-item/content-item.html.twig';
+import { correctSvgPath } from '@ecl/website-utils';
+
+const dataImageRight = JSON.parse(JSON.stringify(demoImage));
+dataImageRight.picture.position = 'right';
+
+const dataImageTop = JSON.parse(JSON.stringify(demoImage));
+dataImageTop.picture.position = 'top';
+
+export const contentItemImage = template(correctSvgPath(demoImage));
+export const contentItemImageRight = template(correctSvgPath(dataImageRight));
+export const contentItemImageTop = template(correctSvgPath(dataImageTop));
+export const contentItemEvent = template(correctSvgPath(demoEvent));
diff --git a/src/website-next/content/ec/components/content-item/docs/code.mdx b/src/website-next/content/ec/components/content-item/docs/code.mdx
new file mode 100644
index 00000000000..05befbbc5fd
--- /dev/null
+++ b/src/website-next/content/ec/components/content-item/docs/code.mdx
@@ -0,0 +1,57 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Playground, Html } from '@ecl/website-components';
+import {
+ contentItemImage,
+ contentItemImageRight,
+ contentItemImageTop,
+ contentItemEvent,
+} from '../demo';
+
+## Content item with image (left)
+
+
+
+
+
+## Content item with image (right)
+
+
+
+
+
+## Content item with image (top)
+
+
+
+
+
+## Event content item
+
+
+
+
diff --git a/src/website-next/content/ec/components/content-item/docs/usage.md b/src/website-next/content/ec/components/content-item/docs/usage.md
new file mode 100644
index 00000000000..1e429e7e3f8
--- /dev/null
+++ b/src/website-next/content/ec/components/content-item/docs/usage.md
@@ -0,0 +1,24 @@
+---
+title: Usage
+order: 1
+---
+The Content item component provides a quick overview of the content it links to. The displayed elements are organised in an easily recognisable structure, intended to support scannability and decision-making through consistent interactions (e.g. linking to related pages). This is one of the most flexible components that can optionally include labels, primary metadata, image thumbnails, paragraphs, secondary metadata accompanied by icons and lastly, the horizontal description list. It can be used in lists, either vertically or part of a grid.
+
+## Do's
+
+- if using images, opt for assets that are related to the content and intelligible of the object depicted
+- if using icons, opt for assets that are representative of the associated content
+
+## Don'ts
+
+- do no align images inconsistently
+- do not combine multiple aspect ratios for images
+
+## When to use
+
+- use when you need a teaser that links to page of interest
+- use as part of a list
+
+## When not to use
+
+- do not use for site-wide navigation - use [Navigation list](https://ec.europa.eu/component-library/ec/components/navigation/navigation-list/code/) instead
diff --git a/src/website-next/content/ec/components/content-item/ec_comp_content_items.svg b/src/website-next/content/ec/components/content-item/ec_comp_content_items.svg
new file mode 100644
index 00000000000..bbe208a352b
--- /dev/null
+++ b/src/website-next/content/ec/components/content-item/ec_comp_content_items.svg
@@ -0,0 +1,54 @@
+
diff --git a/src/website-next/content/ec/components/content-item/index.md b/src/website-next/content/ec/components/content-item/index.md
new file mode 100644
index 00000000000..1688c46b82a
--- /dev/null
+++ b/src/website-next/content/ec/components/content-item/index.md
@@ -0,0 +1,8 @@
+---
+title: Content item
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-content-item--default
+---
diff --git a/src/website-next/content/ec/components/date-block/demo/index.js b/src/website-next/content/ec/components/date-block/demo/index.js
new file mode 100644
index 00000000000..d1a9d2f613b
--- /dev/null
+++ b/src/website-next/content/ec/components/date-block/demo/index.js
@@ -0,0 +1,8 @@
+import demoDefault from '@ecl/date-block/demo/data';
+import template from '@ecl/date-block/date-block.html.twig';
+
+const demoOngoing = { ...demoDefault, variant: 'ongoing' };
+const demoPast = { ...demoDefault, variant: 'past' };
+
+export const dateBlockOngoing = template(demoOngoing);
+export const dateBlockPast = template(demoPast);
diff --git a/src/website-next/content/ec/components/date-block/docs/code.mdx b/src/website-next/content/ec/components/date-block/docs/code.mdx
new file mode 100644
index 00000000000..6630f02fd0e
--- /dev/null
+++ b/src/website-next/content/ec/components/date-block/docs/code.mdx
@@ -0,0 +1,27 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Playground, Html } from '@ecl/website-components';
+import { dateBlockOngoing, dateBlockPast } from '../demo';
+
+## Upcoming and ongoing
+
+
+
+
+
+## Past and cancelled
+
+
+
+
diff --git a/src/website-next/content/ec/components/date-block/docs/usage.md b/src/website-next/content/ec/components/date-block/docs/usage.md
new file mode 100644
index 00000000000..d74c815cfbb
--- /dev/null
+++ b/src/website-next/content/ec/components/date-block/docs/usage.md
@@ -0,0 +1,18 @@
+---
+title: Usage
+order: 1
+---
+The date block is a visual display to support an event listing. It displays the day, month and year of an event and has a total of 5 states: upcoming, ongoing, cancelled, past and rescheduled. The date blocks cannot be used as a stand-alone component, always being complemented by informative tags, acting as an extra indicator for any given state of the event. Together with the event listing, they form the date block composition.
+
+## Do's
+
+- in the case of a multi-day event, make sure you input the starting date as this is the one that will be displayed
+
+## When to use
+
+- for any type of event (conference, meeting, forum, workshop, seminar, etc.)
+- for single or multi-day events, currently ongoing events, cancelled events, future and past events
+
+## When not to use
+
+- do not use for other occurrences such as historical milestones, achievements, biographies, etc
diff --git a/src/website-next/content/ec/components/date-block/ec_comp_date_blocks.svg b/src/website-next/content/ec/components/date-block/ec_comp_date_blocks.svg
new file mode 100644
index 00000000000..50d5047ba17
--- /dev/null
+++ b/src/website-next/content/ec/components/date-block/ec_comp_date_blocks.svg
@@ -0,0 +1,47 @@
+
+
diff --git a/src/website-next/content/ec/components/date-block/index.md b/src/website-next/content/ec/components/date-block/index.md
new file mode 100644
index 00000000000..eef0f7b5a5f
--- /dev/null
+++ b/src/website-next/content/ec/components/date-block/index.md
@@ -0,0 +1,8 @@
+---
+title: Date blocks
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-date-block--ongoing
+---
diff --git a/src/website-next/content/ec/components/expandable/demo/index.js b/src/website-next/content/ec/components/expandable/demo/index.js
new file mode 100644
index 00000000000..b5cf120c626
--- /dev/null
+++ b/src/website-next/content/ec/components/expandable/demo/index.js
@@ -0,0 +1,6 @@
+import data from '@ecl/expandable/demo/data';
+import template from '@ecl/expandable/expandable.html.twig';
+import { correctSvgPath } from '@ecl/website-utils';
+
+const expandable = template(correctSvgPath(data));
+export default expandable;
diff --git a/src/website-next/content/ec/components/expandable/docs/api.mdx b/src/website-next/content/ec/components/expandable/docs/api.mdx
new file mode 100644
index 00000000000..518c18b4da2
--- /dev/null
+++ b/src/website-next/content/ec/components/expandable/docs/api.mdx
@@ -0,0 +1,48 @@
+---
+title: API
+order: 3
+---
+
+import React from 'react';
+import Iframe from '../../../../../website-components/Showcase/Iframe';
+
+## Setup
+
+There are 2 ways to initialise the component.
+
+### Automatic
+
+Add `data-ecl-auto-init="Expandable"` attribute to component's markup:
+
+```html
+
+ ...
+
+```
+
+Use the `ECL` library's `autoInit()` (`ECL.autoInit()`) when your page is ready or other custom event you want to hook onto.
+
+### Manual
+
+Get target element, create an instance and invoke `init()`.
+
+Given you have 1 element with an attribute `data-ecl-expandable` on the page:
+
+```js
+var elt = document.querySelector('[data-ecl-expandable]');
+var expandable = new ECL.Expandable(elt);
+expandable.init();
+```
+
+### Retrieve an existing instance
+
+If an existing instance needs to be updated, it can be retrieved this way:
+
+```js
+var elt = document.querySelector('[data-ecl-expandable]');
+var instance = ECL.components.get(elt);
+```
+
+## API
+
+
diff --git a/src/website-next/content/ec/components/expandable/docs/code.mdx b/src/website-next/content/ec/components/expandable/docs/code.mdx
new file mode 100644
index 00000000000..7abcec692cf
--- /dev/null
+++ b/src/website-next/content/ec/components/expandable/docs/code.mdx
@@ -0,0 +1,16 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Playground, Html } from '@ecl/website-components';
+import expandable from '../demo';
+
+
+
+
diff --git a/src/website-next/content/ec/components/expandable/docs/usage.md b/src/website-next/content/ec/components/expandable/docs/usage.md
new file mode 100644
index 00000000000..16097baf436
--- /dev/null
+++ b/src/website-next/content/ec/components/expandable/docs/usage.md
@@ -0,0 +1,25 @@
+---
+title: Usage
+order: 1
+---
+The expandable component is a progressive disclosure component. Such components truncate information for the general layout/design and are intended to deliver additional content depending on users' interests. They help keep the interface clean and reduce scrolling by saving vertical space, while being indicative of the additional content that is available through extra interaction.
+
+## Do's
+
+- use a button label for each item with a short, distinct and indicative title of the hidden content
+
+## Don'ts
+
+- don't use with large blocks of content
+- don't hide important information that should be present at all times
+
+## When to use
+
+- use when additional information is offered that will only benefit a small group of users
+- when you can make extensive and complex content easier to digest through descriptive labels
+
+## When not to use
+
+- do not use as a button
+- do not use it consecutively - use accordions instead
+- don't use when pages are short (reading time: under 3 minutes)
diff --git a/src/website-next/content/ec/components/expandable/ec_comp_expandables.svg b/src/website-next/content/ec/components/expandable/ec_comp_expandables.svg
new file mode 100644
index 00000000000..ea446ee4be2
--- /dev/null
+++ b/src/website-next/content/ec/components/expandable/ec_comp_expandables.svg
@@ -0,0 +1,80 @@
+
+
diff --git a/src/website-next/content/ec/components/expandable/index.md b/src/website-next/content/ec/components/expandable/index.md
new file mode 100644
index 00000000000..0c738b57355
--- /dev/null
+++ b/src/website-next/content/ec/components/expandable/index.md
@@ -0,0 +1,8 @@
+---
+title: Expandables
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-expandables--default
+---
diff --git a/src/website-next/content/ec/components/fact-figures/demo/index.js b/src/website-next/content/ec/components/fact-figures/demo/index.js
new file mode 100644
index 00000000000..f3259dc42c7
--- /dev/null
+++ b/src/website-next/content/ec/components/fact-figures/demo/index.js
@@ -0,0 +1,16 @@
+import demoContent from '@ecl/fact-figures/demo/data';
+import template from '@ecl/fact-figures/fact-figures.html.twig';
+import { correctSvgPath } from '@ecl/website-utils';
+
+const demo1Col = { ...demoContent, column: 1 };
+demo1Col.items = demo1Col.items.slice(0, 1);
+const demo2Col = { ...demoContent, column: 2 };
+demo2Col.items = demo2Col.items.slice(0, 2);
+const demo3Col = { ...demoContent, column: 3 };
+demo3Col.items = demo3Col.items.slice(0, 6);
+const demo4Col = { ...demoContent, column: 4 };
+
+export const factFigures1Col = template(correctSvgPath(demo1Col));
+export const factFigures2Col = template(correctSvgPath(demo2Col));
+export const factFigures3Col = template(correctSvgPath(demo3Col));
+export const factFigures4Col = template(correctSvgPath(demo4Col));
diff --git a/src/website-next/content/ec/components/fact-figures/docs/code.mdx b/src/website-next/content/ec/components/fact-figures/docs/code.mdx
new file mode 100644
index 00000000000..15644f1df2b
--- /dev/null
+++ b/src/website-next/content/ec/components/fact-figures/docs/code.mdx
@@ -0,0 +1,57 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Link, Playground, Html } from '@ecl/website-components';
+
+import {
+ factFigures1Col,
+ factFigures2Col,
+ factFigures3Col,
+ factFigures4Col,
+} from '../demo';
+
+## 1 column
+
+
+
+
+
+## 2 columns
+
+
+
+
+
+## 3 columns
+
+
+
+
+
+## 4 columns
+
+
+
+
diff --git a/src/website-next/content/ec/components/fact-figures/docs/usage.md b/src/website-next/content/ec/components/fact-figures/docs/usage.md
new file mode 100644
index 00000000000..66d4b5be59d
--- /dev/null
+++ b/src/website-next/content/ec/components/fact-figures/docs/usage.md
@@ -0,0 +1,25 @@
+---
+title: Usage
+order: 1
+---
+The facts and figures component is used to deliver numerical representations of facts that are easier portrayed visually through the use of statistics.
+
+## Do's
+
+- use consistent capitalisation for all fields
+- use 1-3 digits only
+- always use representative icons that are consistent in design with other icons
+- if using a view all metrics link, make sure the copy of the link represents what the interaction will do, such as 'Download'
+
+## Don'ts
+
+- don't use more than 2 words for labels
+- don't exceed 3 lines of text in the descriptions
+
+## When to use
+
+- use when you want to visualise comparative statistics for a single theme
+
+## When not to use
+
+- do not use to compare statistics belonging to separate themes
diff --git a/src/website-next/content/ec/components/fact-figures/ec_comp_facts_and_figures.svg b/src/website-next/content/ec/components/fact-figures/ec_comp_facts_and_figures.svg
new file mode 100644
index 00000000000..7962f07b9c5
--- /dev/null
+++ b/src/website-next/content/ec/components/fact-figures/ec_comp_facts_and_figures.svg
@@ -0,0 +1,102 @@
+
+
diff --git a/src/website-next/content/ec/components/fact-figures/index.md b/src/website-next/content/ec/components/fact-figures/index.md
new file mode 100644
index 00000000000..9a1cbec4c5a
--- /dev/null
+++ b/src/website-next/content/ec/components/fact-figures/index.md
@@ -0,0 +1,8 @@
+---
+title: Fact and figures
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-fact-figures--default
+---
diff --git a/src/website-next/content/ec/components/file/demo/index.js b/src/website-next/content/ec/components/file/demo/index.js
new file mode 100644
index 00000000000..15c8f24058d
--- /dev/null
+++ b/src/website-next/content/ec/components/file/demo/index.js
@@ -0,0 +1,15 @@
+import demoWithTranslation from '@ecl/file/demo/data--with-translation';
+import demoWithoutTranslation from '@ecl/file/demo/data--without-translation';
+import demoThumbnail from '@ecl/file/demo/data--thumbnail';
+import demoTaxonomy from '@ecl/file/demo/data--taxonomy';
+import template from '@ecl/file/file.html.twig';
+import { correctSvgPath } from '@ecl/website-utils';
+
+export const fileWithTranslation = template(
+ correctSvgPath(demoWithTranslation),
+);
+export const fileWithoutTranslation = template(
+ correctSvgPath(demoWithoutTranslation),
+);
+export const fileThumbnail = template(correctSvgPath(demoThumbnail));
+export const fileTaxonomy = template(correctSvgPath(demoTaxonomy));
diff --git a/src/website-next/content/ec/components/file/docs/api.mdx b/src/website-next/content/ec/components/file/docs/api.mdx
new file mode 100644
index 00000000000..8c8b31b9b27
--- /dev/null
+++ b/src/website-next/content/ec/components/file/docs/api.mdx
@@ -0,0 +1,46 @@
+---
+title: API
+order: 3
+---
+
+import React from 'react';
+import Iframe from '../../../../../website-components/Showcase/Iframe';
+
+## Setup
+
+There are 2 ways to initialise the component.
+
+### Automatic
+
+Add `data-ecl-auto-init="FileDownload"` attribute to component's markup:
+
+```html
+
...
+```
+
+Use the `ECL` library's `autoInit()` (`ECL.autoInit()`) when your page is ready or other custom event you want to hook onto.
+
+### Manual
+
+Get target element, create an instance and invoke `init()`.
+
+Given you have 1 element with an attribute `data-ecl-file` on the page:
+
+```js
+var elt = document.querySelector('[data-ecl-file]');
+var file = new ECL.FileDownload(elt);
+file.init();
+```
+
+### Retrieve an existing instance
+
+If an existing instance needs to be updated, it can be retrieved this way:
+
+```js
+var elt = document.querySelector('[data-ecl-file]');
+var instance = ECL.components.get(elt);
+```
+
+## API
+
+
diff --git a/src/website-next/content/ec/components/file/docs/code.mdx b/src/website-next/content/ec/components/file/docs/code.mdx
new file mode 100644
index 00000000000..b39b51c643d
--- /dev/null
+++ b/src/website-next/content/ec/components/file/docs/code.mdx
@@ -0,0 +1,61 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Link, Playground, Html } from '@ecl/website-components';
+
+import {
+ fileWithTranslation,
+ fileWithoutTranslation,
+ fileThumbnail,
+ fileTaxonomy,
+} from '../demo';
+
+## Without translations
+
+
+
+
+
+## With translations
+
+
+
+
+
+## With thumbnail
+
+
+
+
+
+## With taxonomy
+
+
+
+
diff --git a/src/website-next/content/ec/components/file/docs/usage.md b/src/website-next/content/ec/components/file/docs/usage.md
new file mode 100644
index 00000000000..870033f4b66
--- /dev/null
+++ b/src/website-next/content/ec/components/file/docs/usage.md
@@ -0,0 +1,47 @@
+---
+title: Usage
+order: 1
+---
+The file download component delivers downloadable content to users in an easy to use container. When the file is available in more than one language the file component makes these files accessible in an expandable sub container.
+
+## Do's
+
+- the heading of each item should be short, distinct and indicative
+- always include the file language, file type and file size
+
+## Don'ts
+
+- don't use without additional relevant content on the same page
+- don't use the same heading as the file name
+
+## When to use
+
+- when you want to include additional relevant or supporting documents for download
+
+## When not to use
+
+- Do not use to include important information that should be present at all time
+
+# File download with thumbnail
+
+The file download with thumbnail component is a variation of the file download component, and delivers downloadable content accompanied by a thumbnail image in an easy to use container. When the file is available in more than one language, the file component makes these files accessible in an expandable sub container.
+
+## Do's
+
+- the heading of each item should be short, distinct and indicative
+- always include the file language, file type and file size
+- select appropriate images for thumbnails, they need to be representative of file that is linked
+
+## Don'ts
+
+- don't use without additional relevant content on the same page
+- don't use the same heading as the file name
+- don't choose images that are too complex to be distinguished in thumbnail size
+
+## When to use
+
+- when you want to include additional relevant or supporting documents for download
+
+## When not to use
+
+- Do not use to include important information that should be present at all time
diff --git a/src/website-next/content/ec/components/file/ec_comp_file.svg b/src/website-next/content/ec/components/file/ec_comp_file.svg
new file mode 100644
index 00000000000..b530f6d0015
--- /dev/null
+++ b/src/website-next/content/ec/components/file/ec_comp_file.svg
@@ -0,0 +1,56 @@
+
+
diff --git a/src/website-next/content/ec/components/file/index.md b/src/website-next/content/ec/components/file/index.md
new file mode 100644
index 00000000000..13cbb88ce68
--- /dev/null
+++ b/src/website-next/content/ec/components/file/index.md
@@ -0,0 +1,8 @@
+---
+title: Files
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-file--default
+---
diff --git a/src/website-next/content/ec/components/forms/checkbox/demo/index.js b/src/website-next/content/ec/components/forms/checkbox/demo/index.js
new file mode 100644
index 00000000000..743fded6115
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/checkbox/demo/index.js
@@ -0,0 +1,28 @@
+import demoContentDefault from '@ecl/checkbox/demo/data';
+import template from '@ecl/form-group/form-group.html.twig';
+import { correctSvgPath } from '@ecl/website-utils';
+
+export const checkboxDefault = template(correctSvgPath(demoContentDefault));
+export const checkboxInvalid = template(
+ correctSvgPath({ ...demoContentDefault, invalid: true }),
+);
+export const checkboxOptional = template(
+ correctSvgPath({
+ ...demoContentDefault,
+ required: false,
+ input: { ...demoContentDefault.input, required: false },
+ }),
+);
+export const checkboxSingle = template(
+ correctSvgPath({
+ ...demoContentDefault,
+ input: {
+ ...demoContentDefault.input,
+ items: [demoContentDefault.input.items[0]],
+ },
+ required: true,
+ helper_text: '',
+ label: '',
+ required_text: '',
+ }),
+);
diff --git a/src/website-next/content/ec/components/forms/checkbox/docs/code.mdx b/src/website-next/content/ec/components/forms/checkbox/docs/code.mdx
new file mode 100644
index 00000000000..7ca4cdbebdc
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/checkbox/docs/code.mdx
@@ -0,0 +1,59 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Playground, Html } from '@ecl/website-components';
+import {
+ checkboxDefault,
+ checkboxInvalid,
+ checkboxOptional,
+ checkboxSingle,
+} from '../demo';
+
+## Default checkbox group
+
+
+
+
+
+## Invalid checkbox group
+
+
+
+
+
+## Optional checkbox group
+
+
+
+
+
+## Standalone checkbox
+
+
+
+
diff --git a/src/website-next/content/ec/components/forms/checkbox/docs/usage.md b/src/website-next/content/ec/components/forms/checkbox/docs/usage.md
new file mode 100644
index 00000000000..9074e9ece22
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/checkbox/docs/usage.md
@@ -0,0 +1,35 @@
+---
+title: Usage
+order: 1
+---
+The checkbox is a form input for users to choose one or more options from the list of selections.
+
+## Dos
+
+- always make sure each checkbox has a short, distinct and indicative checkbox label
+- use checkbox labels as click targets (clicking the label will select that option)
+- arrange them vertically, in a single column layout
+- group related fields
+- order logically
+- indicate whether the input group is optional or mandatory
+- make use of helper text if there are further directions or hints the users may need in completing their goal
+- write specific and clear error messages, so users understand how to properly address and recover from the error
+
+## Don'ts
+
+- don't add them without grouping first, in a logical order
+- don't restrict the number of checkboxes that can be ticked at any time
+- don't nest elements under the checkbox - keep all the options on the same level
+
+## When to use
+
+- use in any situation where the input information is known to the organisation
+- when users need to select options or toggle settings
+- in forms with multiple non-exclusive options
+- in search filters
+- to turn a setting option on or off
+
+## When not to use
+
+- do not use it when you have mutually exclusive items
+- do not use it if the checkbox selection will perform an action
diff --git a/src/website-next/content/ec/components/forms/checkbox/ec_comp_checkbox.svg b/src/website-next/content/ec/components/forms/checkbox/ec_comp_checkbox.svg
new file mode 100644
index 00000000000..17e5d401780
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/checkbox/ec_comp_checkbox.svg
@@ -0,0 +1,132 @@
+
+
diff --git a/src/website-next/content/ec/components/forms/checkbox/index.md b/src/website-next/content/ec/components/forms/checkbox/index.md
new file mode 100644
index 00000000000..3dfa3044444
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/checkbox/index.md
@@ -0,0 +1,8 @@
+---
+title: Checkbox
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-forms--standalone-checkbox
+---
diff --git a/src/website-next/content/ec/components/forms/datepicker/demo/index.js b/src/website-next/content/ec/components/forms/datepicker/demo/index.js
new file mode 100644
index 00000000000..dbeb037955d
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/datepicker/demo/index.js
@@ -0,0 +1,5 @@
+import demoContent from '@ecl/datepicker/demo/data';
+import template from '@ecl/form-group/form-group.html.twig';
+import { correctSvgPath } from '@ecl/website-utils';
+
+export const datepicker = template(correctSvgPath(demoContent));
diff --git a/src/website-next/content/ec/components/forms/datepicker/docs/api.mdx b/src/website-next/content/ec/components/forms/datepicker/docs/api.mdx
new file mode 100644
index 00000000000..7e126813649
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/datepicker/docs/api.mdx
@@ -0,0 +1,44 @@
+---
+title: API
+order: 3
+---
+
+import React from 'react';
+import Iframe from '../../../../../../website-components/Showcase/Iframe';
+
+## Dependencies
+
+The ECL datepicker component uses the [Pikaday](https://github.com/Pikaday/Pikaday) under the hood. This library is not bundled in the ECL js anymore and needs to be loaded in the project before the ECL js.
+Additionally pikaday uses [moment.js](https://momentjs.com/) to handle the rendering of date formats and other things, although this is only an optional dependency and should be only loaded when the datepicker is initialised with a custom date format (default in ECL is `DD-MM-YYYY`).
+
+## Setup
+
+There are 2 ways to initialise the component.
+
+### Automatic
+
+Add `data-ecl-auto-init="Datepicker"` attribute to component's input markup:
+
+```html
+
+ ...
+
+```
+
+Use the `ECL` library's `autoInit()` (`ECL.autoInit()`) when your page is ready or other custom event you want to hook onto.
+
+### Manual
+
+Get target element, create an instance and invoke `init()`.
+
+Given you have 1 element with an attribute `data-ecl-datepicker-toggle` on the page:
+
+```js
+var elt = document.querySelector('[data-ecl-datepicker-toggle]');
+var datepicker = new ECL.Datepicker(elt);
+datepicker.init();
+```
+
+## API
+
+
diff --git a/src/website-next/content/ec/components/forms/datepicker/docs/code.mdx b/src/website-next/content/ec/components/forms/datepicker/docs/code.mdx
new file mode 100644
index 00000000000..9405e7ce4b5
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/datepicker/docs/code.mdx
@@ -0,0 +1,17 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Playground, Html } from '@ecl/website-components';
+import { datepicker } from '../demo';
+
+
+
+
diff --git a/src/website-next/content/ec/components/forms/datepicker/docs/usage.md b/src/website-next/content/ec/components/forms/datepicker/docs/usage.md
new file mode 100644
index 00000000000..c63ddd33480
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/datepicker/docs/usage.md
@@ -0,0 +1,23 @@
+---
+title: Usage
+order: 1
+---
+The Date Picker is an input field that allows the user to choose a date and year.
+
+## Do's
+
+- allow the user to type in the date and year directly when it is needed
+- date format should be clear and understandable to users
+- full name of months are spelled out
+
+## Don'ts
+
+- don't ask users to enter special characters to format dates in text field
+
+## When to use
+
+- when the complete date entry (DD-MM-YYYY) is need, not partial (only a year or month or date, for example)
+
+## When not to use
+
+- when the range of dates needs to be selected
diff --git a/src/website-next/content/ec/components/forms/datepicker/ec_comp_date_picker.svg b/src/website-next/content/ec/components/forms/datepicker/ec_comp_date_picker.svg
new file mode 100644
index 00000000000..af2e32555fe
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/datepicker/ec_comp_date_picker.svg
@@ -0,0 +1,506 @@
+
+
diff --git a/src/website-next/content/ec/components/forms/datepicker/index.md b/src/website-next/content/ec/components/forms/datepicker/index.md
new file mode 100644
index 00000000000..bba7bd76670
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/datepicker/index.md
@@ -0,0 +1,8 @@
+---
+title: Datepicker
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-forms--datepicker
+---
diff --git a/src/website-next/content/ec/components/forms/file-upload/demo/index.js b/src/website-next/content/ec/components/forms/file-upload/demo/index.js
new file mode 100644
index 00000000000..5d3c2d4ea25
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/file-upload/demo/index.js
@@ -0,0 +1,13 @@
+import demoDefault from '@ecl/file-upload/demo/data';
+import demoMultiple from '@ecl/file-upload/demo/data--multiple';
+import template from '@ecl/form-group/form-group.html.twig';
+
+export const fileUpload = template(demoDefault);
+export const fileUploadMultiple = template(demoMultiple);
+export const fileUploadDisabled = template({
+ ...demoDefault,
+ disabled: true,
+ required: false,
+});
+export const fileUploadInvalid = template({ ...demoDefault, invalid: true });
+export const fileUploadOptional = template({ ...demoDefault, required: false });
diff --git a/src/website-next/content/ec/components/forms/file-upload/docs/api.mdx b/src/website-next/content/ec/components/forms/file-upload/docs/api.mdx
new file mode 100644
index 00000000000..f74b8192302
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/file-upload/docs/api.mdx
@@ -0,0 +1,42 @@
+---
+title: API
+order: 3
+---
+
+import React from 'react';
+import Iframe from '../../../../../../website-components/Showcase/Iframe';
+
+## Setup
+
+There are 2 ways to initialise the component.
+
+### Automatic
+
+Add `data-ecl-auto-init="FileUpload"` attribute to component's input markup:
+
+```html
+
+```
+
+Use the `ECL` library's `autoInit()` (`ECL.autoInit()`) when your page is ready or other custom event you want to hook onto.
+
+### Manual
+
+Get target element, create an instance and invoke `init()`.
+
+Given you have 1 element with an attribute `data-ecl-file-upload-input` on the page:
+
+```js
+var elt = document.querySelector('[data-ecl-file-upload-input]');
+var FileUpload = new ECL.FileUpload(elt);
+FileUpload.init();
+```
+
+## API
+
+
diff --git a/src/website-next/content/ec/components/forms/file-upload/docs/code.mdx b/src/website-next/content/ec/components/forms/file-upload/docs/code.mdx
new file mode 100644
index 00000000000..d1d611c66bb
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/file-upload/docs/code.mdx
@@ -0,0 +1,71 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Link, Playground, Html } from '@ecl/website-components';
+
+import {
+ fileUpload,
+ fileUploadMultiple,
+ fileUploadDisabled,
+ fileUploadOptional,
+ fileUploadInvalid,
+} from '../demo';
+
+
+
+
+
+## Multiple uploads
+
+
+
+
+
+## Disabled
+
+
+
+
+
+## With error
+
+
+
+
+
+## Optional
+
+
+
+
diff --git a/src/website-next/content/ec/components/forms/file-upload/docs/usage.md b/src/website-next/content/ec/components/forms/file-upload/docs/usage.md
new file mode 100644
index 00000000000..9a51bbf0ea0
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/file-upload/docs/usage.md
@@ -0,0 +1,17 @@
+---
+title: Usage
+order: 1
+---
+The file upload component is used to select and upload files. This uploading interface can be supplemented by additional resources such as the [File upload status](https://v4-dev--europa-component-library.netlify.app/playground/ec/?path=/story/compositions-file-upload-status--default) to monitor the progress and offer additional interaction such as removing files once uploaded
+
+## Do's
+
+- allow users to upload a file in the commonly accepted formats
+
+## Don'ts
+
+- don't limit the file upload size or type, unless specifically mentioned in the file requirements
+
+## When to use
+
+- use when users are asked to upload one or multiple files that are necessary to completing current task (e.g. Grants & funding applications)
diff --git a/src/website-next/content/ec/components/forms/file-upload/ec_comp_file_upload.svg b/src/website-next/content/ec/components/forms/file-upload/ec_comp_file_upload.svg
new file mode 100644
index 00000000000..80104554c0a
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/file-upload/ec_comp_file_upload.svg
@@ -0,0 +1,60 @@
+
+
diff --git a/src/website-next/content/ec/components/forms/file-upload/index.md b/src/website-next/content/ec/components/forms/file-upload/index.md
new file mode 100644
index 00000000000..e529048c06d
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/file-upload/index.md
@@ -0,0 +1,8 @@
+---
+title: File upload
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-forms--file-upload
+---
diff --git a/src/website-next/content/ec/components/forms/index.mdx b/src/website-next/content/ec/components/forms/index.mdx
new file mode 100644
index 00000000000..3b6e8471bea
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/index.mdx
@@ -0,0 +1,4 @@
+---
+title: Forms
+type: group
+---
diff --git a/src/website-next/content/ec/components/forms/radio/demo/index.js b/src/website-next/content/ec/components/forms/radio/demo/index.js
new file mode 100644
index 00000000000..91abe44982b
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/radio/demo/index.js
@@ -0,0 +1,22 @@
+import demoContentDefault from '@ecl/radio/demo/data--default';
+import demoContentBinary from '@ecl/radio/demo/data--binary';
+import template from '@ecl/form-group/form-group.html.twig';
+
+export const radioGroupDefault = template(demoContentDefault);
+export const radioGroupInvalid = template({
+ ...demoContentDefault,
+ invalid: true,
+});
+export const radioGroupOptional = template({
+ ...demoContentDefault,
+ required: false,
+ input: {
+ ...radioGroupDefault.input,
+ required: false,
+ },
+});
+export const radioGroupBinary = template(demoContentBinary);
+export const radioGroupBinaryInvalid = template({
+ ...demoContentBinary,
+ invalid: true,
+});
diff --git a/src/website-next/content/ec/components/forms/radio/docs/code.mdx b/src/website-next/content/ec/components/forms/radio/docs/code.mdx
new file mode 100644
index 00000000000..1afc94e259b
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/radio/docs/code.mdx
@@ -0,0 +1,72 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Playground, Html } from '@ecl/website-components';
+import {
+ radioGroupDefault,
+ radioGroupInvalid,
+ radioGroupRequired,
+ radioGroupOptional,
+ radioGroupBinary,
+ radioGroupBinaryInvalid,
+} from '../demo';
+
+## Default radio group
+
+
+
+
+
+## Invalid radio group
+
+
+
+
+
+## Optional radio group
+
+
+
+
+
+## Binary radio group
+
+
+
+
+
+## Binary invalid radio group
+
+
+
+
diff --git a/src/website-next/content/ec/components/forms/radio/docs/usage.md b/src/website-next/content/ec/components/forms/radio/docs/usage.md
new file mode 100644
index 00000000000..09a3951f5b9
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/radio/docs/usage.md
@@ -0,0 +1,30 @@
+---
+title: Usage
+order: 1
+---
+Radio buttons provides a selection with two or more options. Only one option can be selected.
+
+## Do's
+
+- use labels as click targets (clicking the label will select that option)
+- group related fields
+- order logically (e.g. ages 18-25, ages 25-35, ages, 35-50, over 65)
+- indicate whether the input group is optional - _if it's mandatory, have a neutral option (e.g. other, n/a) selected by default_
+- make use of helper text if there are further directions or hints the users may need in completing their goal
+- write specific and clear error messages, so users understand how to address the error
+
+## Don'ts
+
+- don't add them without grouping first
+- don't nest elements under radio buttons - keep all the options on the same level
+
+## When to use
+
+- when you have under 10 items
+- when users need to select options or toggle settings
+- in forms with multiple non-exclusive options (e.g. search filters)
+- only one selection can be made
+
+## When not to use
+
+- avoid when more than one option can be selected - use [checkboxes](https://ec.europa.eu/component-library/ec/components/forms/checkbox/code/) or [multi-select](https://ec.europa.eu/component-library/ec/components/forms/select/code/) instead
diff --git a/src/website-next/content/ec/components/forms/radio/ec_comp_radio.svg b/src/website-next/content/ec/components/forms/radio/ec_comp_radio.svg
new file mode 100644
index 00000000000..0ab0643a7cf
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/radio/ec_comp_radio.svg
@@ -0,0 +1,93 @@
+
+
diff --git a/src/website-next/content/ec/components/forms/radio/index.md b/src/website-next/content/ec/components/forms/radio/index.md
new file mode 100644
index 00000000000..3144babccd2
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/radio/index.md
@@ -0,0 +1,8 @@
+---
+title: Radio
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-forms--radio-group
+---
diff --git a/src/website-next/content/ec/components/forms/range/demo/index.js b/src/website-next/content/ec/components/forms/range/demo/index.js
new file mode 100644
index 00000000000..c032067645b
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/range/demo/index.js
@@ -0,0 +1,6 @@
+import data from '@ecl/range/demo/data';
+import template from '@ecl/form-group/form-group.html.twig';
+import { correctSvgPath } from '@ecl/website-utils';
+
+const range = template(correctSvgPath(data));
+export default range;
diff --git a/src/website-next/content/ec/components/forms/range/docs/api.mdx b/src/website-next/content/ec/components/forms/range/docs/api.mdx
new file mode 100644
index 00000000000..cf14193afdf
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/range/docs/api.mdx
@@ -0,0 +1,55 @@
+---
+title: API
+order: 3
+---
+
+import React from 'react';
+import Iframe from '../../../../../../website-components/Showcase/Iframe';
+
+## Setup
+
+There are 2 ways to initialise the component.
+
+### Automatic
+
+Add `data-ecl-auto-init="Range"` attribute to form group element's markup
+Also make sure to have the markup usng the correct data attributes
+
+```html
+
+ ...
+
+ ...
+
+ ...
+
+
+
+```
+
+Use the `ECL` library's `autoInit()` (`ECL.autoInit()`) when your page is ready or other custom event you want to hook onto.
+
+### Manual
+
+Get target element, create an instance and invoke `init()`.
+
+Given you have 1 element with an attribute `data-ecl-range` on the page:
+
+```js
+var elt = document.querySelector('[data-ecl-range]');
+var range = new ECL.Range(elt);
+range.init();
+```
+
+### Retrieve an existing instance
+
+If an existing instance needs to be updated, it can be retrieved this way:
+
+```js
+var elt = document.querySelector('[data-ecl-range]');
+var instance = ECL.components.get(elt);
+```
+
+## API
+
+
diff --git a/src/website-next/content/ec/components/forms/range/docs/code.mdx b/src/website-next/content/ec/components/forms/range/docs/code.mdx
new file mode 100644
index 00000000000..5fcabf5b83b
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/range/docs/code.mdx
@@ -0,0 +1,16 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Playground, Html } from '@ecl/website-components';
+import range from '../demo';
+
+
+
+
diff --git a/src/website-next/content/ec/components/forms/range/docs/usage.md b/src/website-next/content/ec/components/forms/range/docs/usage.md
new file mode 100644
index 00000000000..1ec9f869deb
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/range/docs/usage.md
@@ -0,0 +1,28 @@
+---
+title: Usage
+order: 1
+---
+The range input is an interactive component through which users have a visual indicator of adjustable content, on a pre-defined range and for a pre-defined increment, between two items on a horizontal track. By default it is set between 0-100, however this can be changed to any numerical value (i.e. years slider).
+
+## Do's
+
+- always make sure you use a short, distinct and indicative label
+- indicate whether the input group is optional or mandatory
+- choose appropriate width (s, m, l)
+- make use of helper text if there are further directions or hints the users may need in completing their goal
+- write specific and clear error messages, so users understand how to properly address and recover from the error
+- use an appropriate range value label within the numerical context (e.g. Age, Years)
+
+## Don'ts
+
+- don't use extensive ranges; being mindful of the restricted width of the component, users might have difficulty selecting the precise value
+- don't limit potentially useful increments or steps (e.g. increments of 10 for a years filter)
+
+## When to use
+
+- when it is easier for users to add input via a slider
+
+## When not to use
+
+- do not use for strings or other non-numerical items, use a [Text field](https://ec.europa.eu/component-library/ec/components/forms/text-field/code/) or [Text area](https://ec.europa.eu/component-library/ec/components/forms/text-area/code/) instead
+- do not use when users might benefit more granularity (e.g. [Datepicker](https://ec.europa.eu/component-library/ec/components/forms/datepicker/code/) for specific dates, [Radio button](https://ec.europa.eu/component-library/ec/components/forms/radio/code/) or [Select](https://ec.europa.eu/component-library/ec/components/forms/select/code/) for options)
diff --git a/src/website-next/content/ec/components/forms/range/ec_comp_range.svg b/src/website-next/content/ec/components/forms/range/ec_comp_range.svg
new file mode 100644
index 00000000000..f6c670eee99
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/range/ec_comp_range.svg
@@ -0,0 +1,20 @@
+
diff --git a/src/website-next/content/ec/components/forms/range/index.md b/src/website-next/content/ec/components/forms/range/index.md
new file mode 100644
index 00000000000..20b9c68b362
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/range/index.md
@@ -0,0 +1,8 @@
+---
+title: Range
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-forms--range
+---
diff --git a/src/website-next/content/ec/components/forms/rating-field/demo/index.js b/src/website-next/content/ec/components/forms/rating-field/demo/index.js
new file mode 100644
index 00000000000..b11ffb5a27c
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/rating-field/demo/index.js
@@ -0,0 +1,40 @@
+import demoContentDefault from '@ecl/rating-field/demo/data';
+import template from '@ecl/form-group/form-group.html.twig';
+import { correctSvgPath } from '@ecl/website-utils';
+
+const demoContentSelected = JSON.parse(JSON.stringify(demoContentDefault));
+demoContentSelected.label = '';
+demoContentSelected.helper_text = '';
+demoContentSelected.input.items[2].checked = true;
+
+export const ratingFieldGroupDefault = template(
+ correctSvgPath({
+ ...demoContentDefault,
+ id: 'rating-default',
+ name: 'rating-default',
+ }),
+);
+export const ratingFieldGroupInvalid = template(
+ correctSvgPath({
+ ...demoContentDefault,
+ id: 'rating-invalid',
+ name: 'rating-invalid',
+ invalid: true,
+ }),
+);
+export const ratingFieldGroupOptional = template(
+ correctSvgPath({
+ ...demoContentDefault,
+ id: 'rating-optional',
+ name: 'rating-optional',
+ required: false,
+ }),
+);
+export const ratingFieldGroupDisabled = template(
+ correctSvgPath({
+ ...demoContentSelected,
+ id: 'rating-disabled',
+ name: 'rating-disabled',
+ disabled: true,
+ }),
+);
diff --git a/src/website-next/content/ec/components/forms/rating-field/docs/code.mdx b/src/website-next/content/ec/components/forms/rating-field/docs/code.mdx
new file mode 100644
index 00000000000..cf3bf059331
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/rating-field/docs/code.mdx
@@ -0,0 +1,56 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Playground, Html } from '@ecl/website-components';
+import {
+ ratingFieldGroupDefault,
+ ratingFieldGroupInvalid,
+ ratingFieldGroupRequired,
+ ratingFieldGroupOptional,
+ ratingFieldGroupDisabled,
+} from '../demo';
+
+## Default rating field
+
+
+
+
+
+## Invalid rating field
+
+
+
+
+
+## Optional rating-field
+
+
+
+
+
+## Read only rating-field
+
+
+
+
diff --git a/src/website-next/content/ec/components/forms/rating-field/docs/usage.md b/src/website-next/content/ec/components/forms/rating-field/docs/usage.md
new file mode 100644
index 00000000000..d0ec5f9802c
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/rating-field/docs/usage.md
@@ -0,0 +1,25 @@
+---
+title: Usage
+order: 1
+---
+The Rating field is an interactive component through which users can submit a easily quantifiable rating or feedback from on their experience with a process (e.g. waiting time, form completion, etc.), but can also be potentially used for content (e.g. media, translation quality, etc). Multiple sizes and/or icons are being considered.
+
+## Do's
+
+- always make sure you use a short, distinct and indicative label
+- ensure content is contextual and specific to the rating the user is expected to give (e.g. waiting time, translation quality, etc.)
+- indicate whether the input group is optional or mandatory
+- make use of helper text if there are further directions or hints the users may need in completing their goal
+- write specific and clear error messages, so users understand how to properly address and recover from the error
+
+## Don'ts
+
+- although possible, usage without label or helper text is not recommended, and should be restricted to cases where the rating field is used in a pre-defined context, such as part of another component
+
+## When to use
+
+- when there is a need/option for users to rate something
+
+## When not to use
+
+- do not use in cases where inputs are better being of qualitative input, use a [Text field](https://ec.europa.eu/component-library/ec/components/forms/text-field/code/) or [Text area](https://ec.europa.eu/component-library/ec/components/forms/text-area/code/) instead
diff --git a/src/website-next/content/ec/components/forms/rating-field/ec_comp_rating_field.svg b/src/website-next/content/ec/components/forms/rating-field/ec_comp_rating_field.svg
new file mode 100644
index 00000000000..723bb94b150
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/rating-field/ec_comp_rating_field.svg
@@ -0,0 +1,33 @@
+
diff --git a/src/website-next/content/ec/components/forms/rating-field/index.md b/src/website-next/content/ec/components/forms/rating-field/index.md
new file mode 100644
index 00000000000..141d3884294
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/rating-field/index.md
@@ -0,0 +1,8 @@
+---
+title: Rating field
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-forms--rating-field
+---
diff --git a/src/website-next/content/ec/components/forms/search-form/demo/index.js b/src/website-next/content/ec/components/forms/search-form/demo/index.js
new file mode 100644
index 00000000000..3778235a626
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/search-form/demo/index.js
@@ -0,0 +1,6 @@
+import demoContent from '@ecl/search-form/demo/data--ec';
+import template from '@ecl/search-form/search-form.html.twig';
+import { correctSvgPath } from '@ecl/website-utils';
+
+const searchForm = template(correctSvgPath(demoContent));
+export default searchForm;
diff --git a/src/website-next/content/ec/components/forms/search-form/docs/code.mdx b/src/website-next/content/ec/components/forms/search-form/docs/code.mdx
new file mode 100644
index 00000000000..3704c2f253a
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/search-form/docs/code.mdx
@@ -0,0 +1,11 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Playground, Html } from '@ecl/website-components';
+import searchForm from '../demo';
+
+
+
+
diff --git a/src/website-next/content/ec/components/forms/search-form/docs/usage.md b/src/website-next/content/ec/components/forms/search-form/docs/usage.md
new file mode 100644
index 00000000000..0609460dc44
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/search-form/docs/usage.md
@@ -0,0 +1,17 @@
+---
+title: Usage
+order: 1
+---
+Search field enables users to input a search query into a search text field for search result. It features auto-completion of queries.
+
+## Dos
+
+- always include a search button
+
+## Don'ts
+
+- don't use placeholder text in the text field
+
+## When to use
+
+- whenever needed, always as part the ECL Site header
diff --git a/src/website-next/content/ec/components/forms/search-form/ec_comp_search.svg b/src/website-next/content/ec/components/forms/search-form/ec_comp_search.svg
new file mode 100644
index 00000000000..4c64d4e9686
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/search-form/ec_comp_search.svg
@@ -0,0 +1,65 @@
+
+
diff --git a/src/website-next/content/ec/components/forms/search-form/index.md b/src/website-next/content/ec/components/forms/search-form/index.md
new file mode 100644
index 00000000000..c02312cfea4
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/search-form/index.md
@@ -0,0 +1,8 @@
+---
+title: Search form
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-forms--search
+---
diff --git a/src/website-next/content/ec/components/forms/select/demo/index.js b/src/website-next/content/ec/components/forms/select/demo/index.js
new file mode 100644
index 00000000000..e0c5bc79d25
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/select/demo/index.js
@@ -0,0 +1,7 @@
+import demoContentSingle from '@ecl/select/demo/data-single';
+import demoContentMultiple from '@ecl/select/demo/data-multiple';
+import template from '@ecl/form-group/form-group.html.twig';
+import { correctSvgPath } from '@ecl/website-utils';
+
+export const selectSingle = template(correctSvgPath(demoContentSingle));
+export const selectMultiple = template(correctSvgPath(demoContentMultiple));
diff --git a/src/website-next/content/ec/components/forms/select/docs/api.mdx b/src/website-next/content/ec/components/forms/select/docs/api.mdx
new file mode 100644
index 00000000000..66d38f7874b
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/select/docs/api.mdx
@@ -0,0 +1,48 @@
+---
+title: API
+order: 3
+---
+
+import React from 'react';
+import Iframe from '../../../../../../website-components/Showcase/Iframe';
+
+## Setup
+
+There are 2 ways to initialise the select and the select multiple components.
+
+### Automatic
+
+Add `data-ecl-auto-init="Select"` attribute to component's markup:
+
+Use the `ECL` library's `autoInit()` (`ECL.autoInit()`) when your page is ready or other custom event you want to hook onto.
+
+### Manual
+
+Get target element, create an instance and invoke `init()`.
+
+Given you have 1 element with an attribute `data-ecl-select-multiple` on the page:
+
+```js
+var elt = document.querySelector('[data-ecl-select-multiple]');
+var select = new ECL.Select(elt);
+select.init();
+```
+
+It's also possible to use the `Select`'s `autoInit` method and pass specific labels for the element:
+
+```js
+var select = ECL.Select.autoInit(
+ document.querySelector('[data-ecl-select-multiple]'),
+ { defaultText: 'string', searchText: 'string', selectAllText: 'string' },
+);
+```
+
+Once created the new instance can be retrieved like this:
+
+```js
+ECL.components.get(document.querySelector('[data-ecl-select-multiple]'));
+```
+
+## API
+
+
diff --git a/src/website-next/content/ec/components/forms/select/docs/code.mdx b/src/website-next/content/ec/components/forms/select/docs/code.mdx
new file mode 100644
index 00000000000..6850b93f4d7
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/select/docs/code.mdx
@@ -0,0 +1,29 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Playground, Html } from '@ecl/website-components';
+import { selectSingle, selectMultiple } from '../demo';
+
+## Default select list
+
+
+
+
+
+## Multiple select list
+
+
+
+
diff --git a/src/website-next/content/ec/components/forms/select/docs/usage.md b/src/website-next/content/ec/components/forms/select/docs/usage.md
new file mode 100644
index 00000000000..68310cd441a
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/select/docs/usage.md
@@ -0,0 +1,57 @@
+---
+title: Usage
+order: 1
+---
+# Default single select
+
+The select component, also known as a select or dropdown menu, is a widget which displays a list of selectable items from which the user can select one value.
+
+Having the same functionality as a [Radio button](https://ec.europa.eu/component-library/ec/components/forms/radio/code/) but relatively more UI friendly from a screen real estate perspective, when there is a large (usually 5 or more) number of list items. These are hidden in a container that is made is available on interaction.
+
+## Do's
+
+- allow placeholder text to indicate type of input desired
+- use the select component to limit the number of choices that the user can make
+- use appropriate size (small, medium, large) depending on the situation you are using the component in
+- use dropdown select menu labels as click targets (clicking the label will trigger the action)
+- ensure that the clickable area of the select component is large enough to be easily selectable with a cursor or finger
+
+## Don'ts
+
+- don't use the select component for large items or data that requires complex analysis
+
+## When to use
+
+- use when you have 5 or more items that are mutually exclusive
+
+## When not to use
+
+- do not use when you have 5 or more items from which users can select more than one - use Multi-select instead
+
+# Multi-select
+
+The multi-select component, is a variation of the select component, which displays a list of selectable items from which the user can select multiple values.
+
+It offers the same functionality as a [Checkbox](https://ec.europa.eu/component-library/ec/components/forms/checkbox/code/) but it is more UI friendly from a screen real estate perspective, when there is a large (usually 5+) number of list items. These are hidden in a container that is made is available on interaction.
+
+## Do's
+
+- allow placeholder text to indicate type of input desired
+- use the select component to limit the number of choices that the user can make
+- use appropriate size (small, medium, large) depending on the situation you are using the component in
+- use dropdown select menu labels as click targets (clicking the label will trigger the action)
+- ensure that the clickable area of the select component is large enough to be easily selectable with a cursor or finger
+- keep in mind that the order is based on the HTML structure, for this reason group select options into logical categories and provide a clear label for each group
+
+## Don'ts
+
+- don't use the select component for large items or data that requires complex analysis
+- don’t use the multi-select component to limit the number of choices that the user can make, use default instead
+
+## When to use
+
+- use when you have 5 or more items that are not mutually exclusive
+
+## When not to use
+
+- do not use when you have 5 or more items where you want to restrict selection to a single one - use Select instead
diff --git a/src/website-next/content/ec/components/forms/select/ec_comp_select.svg b/src/website-next/content/ec/components/forms/select/ec_comp_select.svg
new file mode 100644
index 00000000000..48f6ce32d5e
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/select/ec_comp_select.svg
@@ -0,0 +1,67 @@
+
+
diff --git a/src/website-next/content/ec/components/forms/select/index.md b/src/website-next/content/ec/components/forms/select/index.md
new file mode 100644
index 00000000000..935dae30800
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/select/index.md
@@ -0,0 +1,8 @@
+---
+title: Select
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-forms--select
+---
diff --git a/src/website-next/content/ec/components/forms/text-area/demo/index.js b/src/website-next/content/ec/components/forms/text-area/demo/index.js
new file mode 100644
index 00000000000..450e3d28454
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/text-area/demo/index.js
@@ -0,0 +1,23 @@
+import demoContentDefault from '@ecl/text-area/demo/data';
+import template from '@ecl/form-group/form-group.html.twig';
+import { correctSvgPath } from '@ecl/website-utils';
+
+export const textAreaDefault = template(correctSvgPath(demoContentDefault));
+export const textAreaDisabled = template(
+ correctSvgPath({
+ ...demoContentDefault,
+ disabled: true,
+ }),
+);
+export const textAreaInvalid = template(
+ correctSvgPath({
+ ...demoContentDefault,
+ invalid: true,
+ }),
+);
+export const textAreaRequired = template(
+ correctSvgPath({
+ ...demoContentDefault,
+ required: true,
+ }),
+);
diff --git a/src/website-next/content/ec/components/forms/text-area/docs/code.mdx b/src/website-next/content/ec/components/forms/text-area/docs/code.mdx
new file mode 100644
index 00000000000..a4d446afd5e
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/text-area/docs/code.mdx
@@ -0,0 +1,55 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Playground, Html } from '@ecl/website-components';
+import {
+ textAreaDefault,
+ textAreaDisabled,
+ textAreaInvalid,
+ textAreaRequired,
+} from '../demo';
+
+## Default text area
+
+
+
+
+
+## Disabled text area
+
+
+
+
+
+## Invalid text area
+
+
+
+
+
+## Required text area
+
+
+
+
diff --git a/src/website-next/content/ec/components/forms/text-area/docs/usage.md b/src/website-next/content/ec/components/forms/text-area/docs/usage.md
new file mode 100644
index 00000000000..2686ccda823
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/text-area/docs/usage.md
@@ -0,0 +1,35 @@
+---
+title: Usage
+order: 1
+---
+A textarea is an input field allowing users to enter multiple lines of text.
+
+## Do's
+
+- minimise the number of input fields - only ask for necessary information
+- arrange them vertically for better layout and readability
+- group related fields together
+- order input fields logically, matching real-world task succession and interactions
+- always label each text area with a short, descriptive title, placed above the text area
+- indicate whether the input field is optional or mandatory
+- make use of helper text if there are further directions or hints the users may need in completing their goal (example: _Must be at least 6 characters and contain a number and a special character_)
+- allow copy/paste for ease of use
+- if a character counter is necessary, place it below the text area
+- match the text field area to the expected size of the input - make it wide enough for the user to see their entire entry
+- write specific and descriptive error message for easy comprehension
+
+## Don'ts
+
+- don't use placeholder text in the text area - this may not be read by screen reading software, leading to accessibility issues
+- don't have a mandatory minimum input of characters
+- don't restrict the use of uncommon or special characters
+- don't disable copyand paste functions
+
+## When to use
+
+- use in any situation where the user needs to input a large, or unknown, amount of data
+
+## When not to use
+
+- do not use when expected input is short
+- do not use when the user must respond with specific options which are known to the organisation
diff --git a/src/website-next/content/ec/components/forms/text-area/ec_comp_text_area.svg b/src/website-next/content/ec/components/forms/text-area/ec_comp_text_area.svg
new file mode 100644
index 00000000000..06776f2b9e4
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/text-area/ec_comp_text_area.svg
@@ -0,0 +1,88 @@
+
+
diff --git a/src/website-next/content/ec/components/forms/text-area/index.md b/src/website-next/content/ec/components/forms/text-area/index.md
new file mode 100644
index 00000000000..7e6fea7f9f4
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/text-area/index.md
@@ -0,0 +1,8 @@
+---
+title: Text area
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-forms--textarea
+---
diff --git a/src/website-next/content/ec/components/forms/text-field/demo/index.js b/src/website-next/content/ec/components/forms/text-field/demo/index.js
new file mode 100644
index 00000000000..3c57b447dc8
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/text-field/demo/index.js
@@ -0,0 +1,20 @@
+import demoContentDefault from '@ecl/text-input/demo/data';
+import template from '@ecl/form-group/form-group.html.twig';
+import { correctSvgPath } from '@ecl/website-utils';
+
+correctSvgPath(demoContentDefault);
+demoContentDefault.invalid_icon.size = 's';
+
+export const textInputDefault = template(demoContentDefault);
+export const textInputDisabled = template({
+ ...demoContentDefault,
+ disabled: true,
+});
+export const textInputInvalid = template({
+ ...demoContentDefault,
+ invalid: true,
+});
+export const textInputRequired = template({
+ ...demoContentDefault,
+ required: true,
+});
diff --git a/src/website-next/content/ec/components/forms/text-field/docs/code.mdx b/src/website-next/content/ec/components/forms/text-field/docs/code.mdx
new file mode 100644
index 00000000000..b5ccbfaa89f
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/text-field/docs/code.mdx
@@ -0,0 +1,55 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Playground, Html } from '@ecl/website-components';
+import {
+ textInputDefault,
+ textInputDisabled,
+ textInputInvalid,
+ textInputRequired,
+} from '../demo';
+
+## Default text field
+
+
+
+
+
+## Disabled text field
+
+
+
+
+
+## Invalid text field
+
+
+
+
+
+## Required text field
+
+
+
+
diff --git a/src/website-next/content/ec/components/forms/text-field/docs/usage.md b/src/website-next/content/ec/components/forms/text-field/docs/usage.md
new file mode 100644
index 00000000000..155b0690e57
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/text-field/docs/usage.md
@@ -0,0 +1,27 @@
+---
+title: Usage
+order: 1
+---
+A text field is an input that can be used on a form, sign-in or any place where data is requested from the user.
+
+## Do's
+
+- allow copy/paste for ease of use
+- match the text field to the expected size of the input - make it wide enough for the user to see their entire entry
+- write specific and clear error message texts, so users understand how to address the error
+
+## Don'ts
+
+- don't use placeholder text in the text field - this may not be read by screen reading software, leading to accessibility issues
+- don't have a mandatory minimum input of characters
+- don't restrict the use of uncommon or special characters
+- don't disable copy and paste functions
+
+## When to use
+
+- use in any situation where the user needs to input limited amount of data (name, email address, age, etc)
+
+## When not to use
+
+- do not use where the user needs to input a large, or unknown amount of data
+- do not use when the user must respond with specific options which are known to the organisation
diff --git a/src/website-next/content/ec/components/forms/text-field/ec_comp_text_field.svg b/src/website-next/content/ec/components/forms/text-field/ec_comp_text_field.svg
new file mode 100644
index 00000000000..ce01ebf67c4
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/text-field/ec_comp_text_field.svg
@@ -0,0 +1,66 @@
+
+
diff --git a/src/website-next/content/ec/components/forms/text-field/index.md b/src/website-next/content/ec/components/forms/text-field/index.md
new file mode 100644
index 00000000000..c3a1c7b6aa1
--- /dev/null
+++ b/src/website-next/content/ec/components/forms/text-field/index.md
@@ -0,0 +1,8 @@
+---
+title: Text field
+defaultTab: usage
+status: ready
+playground:
+ system: ec
+ path: /story/components-forms--text
+---
diff --git a/src/website-next/content/ec/components/icon/demo/index.js b/src/website-next/content/ec/components/icon/demo/index.js
new file mode 100644
index 00000000000..48a8d5ad350
--- /dev/null
+++ b/src/website-next/content/ec/components/icon/demo/index.js
@@ -0,0 +1,47 @@
+import merge from 'deepmerge';
+import demoContentAudio from '@ecl/icon/demo/data';
+import template from '@ecl/icon/icon.html.twig';
+import { correctSvgPath } from '@ecl/website-utils';
+
+const dataDefault = correctSvgPath(demoContentAudio);
+export const iconDefault = template(dataDefault);
+
+export const iconPrimary = template(
+ merge(dataDefault, { icon: { color: 'primary' } }),
+);
+export const icon2XS = template(merge(dataDefault, { icon: { size: '2xs' } }));
+export const iconXS = template(merge(dataDefault, { icon: { size: 'xs' } }));
+export const iconS = template(merge(dataDefault, { icon: { size: 's' } }));
+export const iconM = template(merge(dataDefault, { icon: { size: 'm' } }));
+export const iconL = template(merge(dataDefault, { icon: { size: 'l' } }));
+export const iconXL = template(merge(dataDefault, { icon: { size: 'xl' } }));
+export const icon2XL = template(merge(dataDefault, { icon: { size: '2xl' } }));
+export const iconFluid = template(
+ merge(dataDefault, { icon: { size: 'fluid' } }),
+);
+export const iconRotate0 = template(
+ merge(dataDefault, { icon: { transform: 'rotate-0' } }),
+);
+export const iconRotate90 = template(
+ merge(dataDefault, { icon: { transform: 'rotate-90' } }),
+);
+export const iconRotate180 = template(
+ merge(dataDefault, { icon: { transform: 'rotate-180' } }),
+);
+export const iconRotate270 = template(
+ merge(dataDefault, { icon: { transform: 'rotate-270' } }),
+);
+export const iconFlipVertical = template(
+ merge(dataDefault, { icon: { transform: 'flip-vertical' } }),
+);
+export const iconFlipHorizontal = template(
+ merge(dataDefault, { icon: { transform: 'flip-horizontal' } }),
+);
+export const iconImage = template(
+ merge(dataDefault, {
+ as_image: true,
+ extra_accessibility: {
+ title: 'Title',
+ },
+ }),
+);
diff --git a/src/website-next/content/ec/components/icon/docs/code.mdx b/src/website-next/content/ec/components/icon/docs/code.mdx
new file mode 100644
index 00000000000..cf855031e85
--- /dev/null
+++ b/src/website-next/content/ec/components/icon/docs/code.mdx
@@ -0,0 +1,99 @@
+---
+title: Showcase
+order: 2
+---
+
+import { Link, Playground, Html } from '@ecl/website-components';
+import {
+ iconDefault,
+ iconPrimary,
+ icon2XS,
+ iconXS,
+ iconS,
+ iconM,
+ iconL,
+ iconXL,
+ icon2XL,
+ iconFluid,
+ iconRotate0,
+ iconRotate90,
+ iconRotate180,
+ iconRotate270,
+ iconFlipHorizontal,
+ iconFlipVertical,
+ iconImage,
+} from '../demo';
+
+
+
+
+
+You can pick an icon from the library we provide.
+
+## Color
+
+You can use the default, primary or inverted colours:
+
+
+
+
+
+
+## Size
+
+You can change the size of the icon by applying one of the following classes:
+
+- `ecl-icon--2xs`: 10×10
+- `ecl-icon--xs`: 16×16
+- `ecl-icon--s`: 20×20
+- `ecl-icon--m`: 24×24
+- `ecl-icon--l`: 32×32
+- `ecl-icon--xl`: 40×40
+- `ecl-icon--2xl`: 48×48
+- `ecl-icon--fluid`: 1em
+
+
+
+