# Step Elements Elements are small components to be used within a layout

Default
Default
Default element style. Activate by adding

    .step-default

class to the

    .row

element
1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
Thin
Thin variation for default element style. Activate by adding

    .step-thin

class to the

    .row

element
1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
No Background
No background variation for default element style. Activate by adding

    .step-no-background

class to the

    .row

element
1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
No Background Thin
Thin variation for default no background element style. Activate by adding

    .step-no-background-thin

class to the

    .row

element
1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
Default - Dark
No Background
No background variation for default element style. Activate by adding

    .step-no-background

class to the

    .row

element
1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
No Background Thin
Thin variation for default no background element style. Activate by adding

    .step-no-background-thin

class to the

    .row

element
1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
Numbered Background
Background
Numbered background element style. Activate by adding

    .step-background

class to the

    .row

element
1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
Background Thin
Thin variation for Numbered Background element style. Activate by adding

    .step-background-thin

class to the

    .row

element
1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
Line
Line
Numbered Line element style. Activate by adding

    .step-line

class to the

    .row

element.

    .first

and

    .last

classes are required to be added into

    .mt-step-col

to indicate the first and last step.
1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
4 Steps Line
4 Steps Numbered Line element style. Activate by adding

    .step-line

class to the

    .row

element.

    .first

and

    .last

classes are required to be added into

    .mt-step-col

to indicate the first and last step.
1
Setup
Lorem ipsum dolor sit amet
2
Develop
Lorem ipsum dolor sit amet
3
Testing
Lorem ipsum dolor sit amet
4
Launch
Lorem ipsum dolor sit amet
Line - Dark
Line
Numbered Line element style. Activate by adding

    .step-line

class to the

    .row

element.

    .first

and

    .last

classes are required to be added into

    .mt-step-col

to indicate the first and last step.
1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
4 Steps Line
4 Steps Numbered Line element style. Activate by adding

    .step-line

class to the

    .row

element.

    .first

and

    .last

classes are required to be added into

    .mt-step-col

to indicate the first and last step.
1
Setup
Lorem ipsum dolor sit amet
2
Develop
Lorem ipsum dolor sit amet
3
Testing
Lorem ipsum dolor sit amet
4
Launch
Lorem ipsum dolor sit amet
Default 50%
1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
Thin 50%
1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
No Background 50%
1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
No Background Thin 50%
1
Purchase
Purchasing the item
2
Payment
Complete your payment
3
Deploy
Receive item integration
Active Status
All active status is controlled by adding a

    .active

class to the

    .mt-step-col

element
1
Active
Active status preview
Completed Status
All active status is controlled by adding a

    .done

class to the

    .mt-step-col

element
6
Complete
Preview for done/completed status
Error Status
All active status is controlled by adding a

    .error

class to the

    .mt-step-col

element
4
Error
Error status preview
Numbered Icons
Simple Line Icons
Icons in place of numbers for steps. Replace the

    .mt-step-number

text with the icon of your choice.
Purchase
Purchasing the item
Payment
Complete your payment
Deploy
Receive item integration
FontAwesome Icons
Icons in place of numbers for steps. Replace the

    .mt-step-number

text with the icon of your choice.
Purchase
Purchasing the item
Payment
Complete your payment
Deploy
Receive item integration