IxDF Design System

“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

  1. Attend lessons at your own pace

    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.

  2. Network online and offline

    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.

  3. Advance your career

    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.

Standard Usage of Steps With a Small Total Area

This is not mobile view, just a small container

  1. Attend lessons at your own pace

    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.

  2. Advance your career

    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.

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

  1. Attend lessons at your own pace

    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.

  2. Network online and offline

    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.

  3. Advance your career

    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.

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.