Step card

Use to break a long user flow into a sequence of logical steps.

Description

The step card is a pattern built for forms with multiple consecutive parts but also has a static modifier to be used without its javascript counterpart.

Modifier:

step-card--grey - if there is only one card per page, then this modifier should be applied.

Elements:

  • step-card: The main element. This element has the option of two classes:
    • is-collapsed: which shows the step-card__collapse element and hides the step-card__content
    • is-inactive: which shows the step-card__inactive element and hides the step-card__content
  • step-card__content: The meat of the content. This element wraps the general content where other components will be placed.
  • step-card__collapse: Contains the summarised content.
  • step-card__inactive: Contains the inactive content.

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-step-card;

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 step-card from 'radius/dist/m2dm/js/step-card';
stepCard();

Subcategories

Usage

Usage example

Code example

<section class="step-card" data-js-step-card>
  <div class="step-card__collapse" data-js-step-card-toshow>
    <div class="step-card__support-icon"></div>
    <button type="button" data-js-step-card-toggle>Show open</button>
    <div class="placeholder-component"></div>
  </div>
  <div class="step-card__content" data-js-step-card-tohide>
    <button type="button" data-js-step-card-toggle>Show collapsed</button>
    <div class="placeholder-component"></div>
  </div>
</section>