R A D I U S

Step card list

Use to add the ability to progress through the step cards in a list-like layout.

Description

When loading the page all steps in a list will become inactive except for the first step. When progressing through steps they will become active as you use the active continue element.

Data attributes:

[data-js-step-card-list]: This attribute should be applied as the container of the step cards.
[data-js-step-card-continue]: This attribute should be applied to the element you wish to progress you along in the steps. This is most commonly a button or a radio button/checkbox.

Usage

Usage example

collapsed

inactive

Code example

<div data-js-step-card-list>
  <div class="step-card" data-js-step-card>
    <div class="step-card__collapse">collapsed</div>
    <div class="step-card__inactive">
      inactive
    </div>
    <div class="step-card__content">
      <button class="cta-primary cta--block" data-js-step-card-continue data-js-step-card-toggle>Next</button>
    </div>
  </div>
  <div class="step-card" data-js-step-card>
    <div class="step-card__inactive">
      inactive
    </div>
    <div class="step-card__content">
      <button class="cta-primary cta--block" data-js-step-card-continue>Finish</button>
    </div>
  </div>
</div>