Steps

Steps can be used to show a list of steps in a process.

Class name
Type
steps Component Container of step items
step Component A step item
step-primary
Modifier
Adds `primary` color to step
step-secondary
Modifier
Adds `secondary` color to step
step-accent
Modifier
Adds `accent` color to step
step-info
Modifier
Adds `info` color to step
step-success
Modifier
Adds `success` color to step
step-warning
Modifier
Adds `warning` color to step
step-error
Modifier
Adds `error` color to step
steps-vertical
Responsive
makes `steps` vertical
steps-horizontal
Responsive
makes `steps` horizontal
# Horizontal
  • Register
  • Choose plan
  • Purchase
  • Receive Product
# Vertical
  • Register
  • Choose plan
  • Purchase
  • Receive Product
# responsive (vertical on small screen, horizontal on large screen)
  • Register
  • Choose plan
  • Purchase
  • Receive Product
# With data-content
  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 5
  • Step 6
  • Step 7
# Custom colors
  • Fly to moon
  • Shrink the moon
  • Grab the moon
  • Sit on toilet
# With scrollable wrapper
  • start
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • end