Usage
Use steps to draw a connection for the user between linear pieces of information.
Examples include:
- Steps or stages of a process
- Sequential dates or outcomes
Step types
Steps use colours from your brand palette, displayed as outlined or filled. Counters can also be added where they correspond to the content. Colour selection should take into considertation the contrast with the content background.
Based on your heading class, small and medium sized steps are available to ensure the component remains visually balance.
When to avoid
Do not use when content doesn't come together in sequential or linear order, consider bullets points instead.
-
Steps item one - complete
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet, arcu sed hendrerit dapibus, arcu magna convallis odio, ac elementum purus tortor in nulla. Nulla condimentum, lacus auctor consectetur cursus, libero quam sodales ipsum, id iaculis nibh tellus eu arcu. Aenean pharetra facilisis ex, a malesuada risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Fusce aliquet, arcu sed hendrerit dapibus, arcu magna convallis odio, ac elementum purus tortor in nulla.
- Nulla condimentum, lacus auctor consectetur cursus, libero quam sodales ipsum, id iaculis nibh tellus eu arcu.
- Aenean pharetra facilisis ex, a malesuada risus.
-
Steps item two - not complete
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet, arcu sed hendrerit dapibus, arcu magna convallis odio, ac elementum purus tortor in nulla. Nulla condimentum, lacus auctor consectetur cursus, libero quam sodales ipsum, id iaculis nibh tellus eu arcu. Aenean pharetra facilisis ex, a malesuada risus.
-
Steps item 3 - not complete
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet, arcu sed hendrerit dapibus, arcu magna convallis odio, ac elementum purus tortor in nulla. Nulla condimentum, lacus auctor consectetur cursus, libero quam sodales ipsum, id iaculis nibh tellus eu arcu. Aenean pharetra facilisis ex, a malesuada risus.
-
Steps item one - complete
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet, arcu sed hendrerit dapibus, arcu magna convallis odio, ac elementum purus tortor in nulla. Nulla condimentum, lacus auctor consectetur cursus, libero quam sodales ipsum, id iaculis nibh tellus eu arcu. Aenean pharetra facilisis ex, a malesuada risus.
-
Steps item two - not complete
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet, arcu sed hendrerit dapibus, arcu magna convallis odio, ac elementum purus tortor in nulla. Nulla condimentum, lacus auctor consectetur cursus, libero quam sodales ipsum, id iaculis nibh tellus eu arcu. Aenean pharetra facilisis ex, a malesuada risus.
-
Steps item 3 - not complete
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet, arcu sed hendrerit dapibus, arcu magna convallis odio, ac elementum purus tortor in nulla. Nulla condimentum, lacus auctor consectetur cursus, libero quam sodales ipsum, id iaculis nibh tellus eu arcu. Aenean pharetra facilisis ex, a malesuada risus.
-
Steps item one - complete
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet, arcu sed hendrerit dapibus, arcu magna convallis odio, ac elementum purus tortor in nulla. Nulla condimentum, lacus auctor consectetur cursus, libero quam sodales ipsum, id iaculis nibh tellus eu arcu. Aenean pharetra facilisis ex, a malesuada risus.
-
Steps item two - not complete
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet, arcu sed hendrerit dapibus, arcu magna convallis odio, ac elementum purus tortor in nulla. Nulla condimentum, lacus auctor consectetur cursus, libero quam sodales ipsum, id iaculis nibh tellus eu arcu. Aenean pharetra facilisis ex, a malesuada risus.
-
Steps item 3 - not complete
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet, arcu sed hendrerit dapibus, arcu magna convallis odio, ac elementum purus tortor in nulla. Nulla condimentum, lacus auctor consectetur cursus, libero quam sodales ipsum, id iaculis nibh tellus eu arcu. Aenean pharetra facilisis ex, a malesuada risus.