Eurostar Accordion Component

Component that display an accordion with collapsable content. The accordion comes in two variants: with or without icons.

Contents

The accordion contains two columns which can consist of any content including headings, text and embedded YouTube videos.

Installation

Base Styles must be installed in order to use the component. For more detailed explaination please review the Styleguide README here The Accordion has 2 third party library which is preinstalled with Base Styles along with the Accordion component itself.

Third party dependencies:

• breakpoint-sass
• susy

Eurostar:

• eurostar-base-styles
• eurostar-accordion

Usage

1. Extract the HTML markup as defined under Expand Markup: (https://style.eurostar.com/components/detail/accordion.html)

2. Import styles:

    // Using JSPM:
    @import "jspm:eurostar-accordion/accordion";

    // Using Webpack:
    @import "~eurostar-accordion/_accordion.scss";

3. Import JS and Component Initialisation:

    // Using JSPM:
    import Accordion from 'eurostar-accordion/accordion';
    const accordion = new Accordion();

    // Using Webpack / React:
    const Accordion = require("eurostar-accordion").default;
    new Accordion();