Steps

Inform the user of the current progress in the steps of a process.

Orientation

Column

  1. Fill in profile
  2. Create your first visit
  3. Creating a visit using your calendar
c-steps

Row R

  1. Fill in profile
  2. Create your first visit
  3. Creating a visit using your calendar
c-steps c-steps--row

Responsive

Turn to row on medium+ screens.

  1. Fill in profile
  2. Create your first visit
  3. Creating a visit using your calendar
c-steps c-steps--row@medium

Interactions

Each step can be a link to jump to a specific step

  1. Fill in profile
  2. Create your first visit
  3. Creating a visit using your calendar

Sizes

M (default)

  1. Fill in profile
  2. Create your first visit
  3. Creating a visit using your calendar
  1. Fill in profile
  2. Create your first visit
  3. Creating a visit using your calendar
c-steps

S

  1. Fill in profile
  2. Create your first visit
  3. Creating a visit using your calendar
  1. Fill in profile
  2. Create your first visit
  3. Creating a visit using your calendar
c-stepsc-steps--s

XS

  1. Fill in profile
  2. Create your first visit
  3. Creating a visit using your calendar
  1. Fill in profile
  2. Create your first visit
  3. Creating a visit using your calendar
c-stepsc-steps--xs

Numbered

  1. Fill in profile
  2. Create your first visit
  3. Creating a visit using your calendar
c-stepsc-steps--row@mediumc-steps--numbered
  1. Fill in profile
  2. Create your first visit
  3. Creating a visit using your calendar
c-stepsc-steps--sc-steps--row@mediumc-steps--numbered
  1. Fill in profile
  2. Create your first visit
  3. Creating a visit using your calendar
c-stepsc-steps--xsc-steps--row@mediumc-steps--numbered

Add description