Eurostar Card Board Component

Component that displays card board.

Contents

A Card Board houses cards and uses a JavaScript carousel at smaller widths.

Installation

Base Styles must be installed in order to use the component. For more detailed explaination please review the Styleguide README here The Card Board has 1 third party library which is preinstalled with Base Styles and 2 third parties libraries required by the JS. The JS should be consumed from the transpiled dist version however if using from the ES6 raw source code, JSPM will need to be installed for usage in order to get these third party libraries.

Third party dependencies:

• breakpoint-sass
• (handled via JSPM) lory
• (handled via JSPM) classlist-polyfill

Eurostar:

• eurostar-base-styles
• eurostar-card-board

Usage

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

2. Import styles:

    // Using JSPM:
    @import "jspm:eurostar-card-board/card-board";

    // Using Webpack:
    @import "~eurostar-card-board/_card-board.scss";

3. Import JS and Component Initialisation:

    // Using JSPM:
    import Slider from 'eurostar-slider/slider';
    const slider = new Slider();

    // Using Webpack / React:

    // Import
    const Slider = require("eurostar-slider").default;
    
    // Simple init
    new Slider();

    // Or pass elements by ref in React
    const { slider } = this.refs;
    new Slider({ cardBoardElements: [cardBoard] });