“Steps” Component

Design: zeplin.

Steps are used to explain or display a multi-step process. For optimal understandability and experience, keep to a limit of 5 steps.

Steps are stylized so that step numbers are connected with a line. Each step in a series of static steps can contain any type of rich content, such as headers, body text, images, etc.

Standard Usage of Steps

Standard Usage of Steps With a Small Total Area

This is not mobile view, just a small container

Usage

@component('components.steps.steps')
    @component('components.steps.__stepsItem', ['title' => 'Attend lessons at your own pace'])
        <p class="m-none">
            Each week you get access to a new lesson, but you can move through the
            lessons at your own pace. You can anytime—in as little as 15 minutes per day.
        </p>
    @endcomponent
    @component('components.steps.__stepsItem', ['title' => 'Advance your career'])
        <p class="m-none">
            Get a verifiable and industry-trusted Course Certificate once you’ve scored 70%.
            Use your certificates on your résumé, LinkedIn profile or website to showcase your newly mastered skills.
        </p>
    @endcomponent
@endcomponent

Dynamic Steps

Usage

@component('components.steps.steps')
    @component('components.steps.__stepsItem', [
        'title' => 'Attend lessons at your own pace',
        'isInactive' => true,
    ])
        <button class="button button--primary stepPart--visible">Push me</button>
        <p class="m-none">
            Each week you get access to a new lesson, but you can move through the
            lessons at your own pace. You can anytime—in as little as 15 minutes per day.
        </p>
    @endcomponent
    @component('components.steps.__stepsItem', [
        'title' => 'Network online and offline',
        'isInactive' => false,
    ])
        <p class="m-none">
            Network with your fellow course mates online, through discussion forums inside
            the lessons. You can also meet your peers offline via Local Group meet-ups.
        </p>
    @endcomponent
    @component('components.steps.__stepsItem', [
        'title' => 'Advance your career',
        'isInactive' => true,
    ])
        <p class="m-none">
            Get a verifiable and industry-trusted Course Certificate once you’ve scored 70%.
            Use your certificates on your résumé, LinkedIn profile or website to showcase your newly mastered skills.
        </p>
    @endcomponent
@endcomponent

Props

• title (required)
  string

  Title of individual step items.

• isInactive
  bool

  Disables a particular step and collapses it content. It will also add an overlay on the step. We can use the class stepPart--visible to show a particular content even if step is disabled.