Components

Stepper Bar

scss:Readyfigma:Ready
Usage
Code

Import

Import the settings, the bottom-bar, the stepper-bar and the container scss files.

@import 'settings-tools/all-settings';
@import 'layouts/_l.container';
@import "components/c.stepper-bar";
@import "components/c.button";

Usage

The creation of an stepper bar component in your code is done using the following HTML structure:

<div
  class="ml-container ml-container--fluid mc-bottom-bar mc-bottom-bar--fixed mc-stepper-bar"
>
  <button class="mc-button mc-button--s mc-button--bordered-danger">
    Cancel
  </button>
  <div class="mc-stepper-bar__actions">
    <button class="mc-button mc-button--s mc-button--bordered-neutral">
      Previous
    </button>
    <button class="mc-button mc-button--s mc-stepper-bar__next">Next</button>
  </div>
</div>

Fixed

The stepper bar component width can be fixed at the bottom of the page. To achieve that, you have to apply the mc-bottom-bar--fixed modifier.