Card Ticker

Use to deliver the concept of activity on a given task; its content establishes a number of baselines with the clear objective of reassuring the user on the presented activity.

Description

This component will be paired with a label component that will introduce the content presented.

The contents of the cards are generated dynamically from a text file that is fetched across the network. (Read more about the Javascript functionality).

N.B. Flexbox and CSS animations are not supported in IE9 and below, so this component will not be displayed.

Data attributes:

  • [data-js-card-ticker]: This attribute identifies the wrapper that holds the card-ticker carousel;
  • [data-js-card-ticker-carousel]: This attribute identifies the card-ticker carousel;
  • [data-js-card-ticker-item]: This attribute identifies an item within the card-ticker carousel;
  • [data-js-card-ticker-source]: TThis attribute creates a connection between the component and its source of data.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-card-ticker;

Import JS functionality

In order to have the JS functionality of this component available, you need to include it in your project. Assuming the project is using ES6:

import card-ticker from 'radius/dist/m2dm/js/card-ticker';
cardTicker();

Subcategories

Usage

Usage example

Introductory label

Code example

<section class="card-ticker" data-js-card-ticker data-js-card-ticker-source="/m2dm-public/docs/card-ticker-data.txt">
  <div class="card-ticker__inner">
    <span class="label label--accent card-ticker__label">Introductory label</span>
    <div class="card-ticker__carousel" data-js-card-ticker-carousel></div>
  </div>
</section>