# Steps

Source: https://iriscss.com/documentation/components/steps/

A numbered tracker for flows like checkout or sign up.

Mark the current step with `aria-current="step"`. Steps before it show as done, steps after it as still to come. Below a 36rem wide screen the steps stack, with each label next to its marker.

```html
<ol class="steps">
  <li>Cart</li>
  <li>Shipping</li>
  <li aria-current="step">Payment</li>
  <li>Review</li>
</ol>
```

## Colors

A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) on the list colors the done and current steps.

```html
<ol class="steps success">
  <li>Account</li>
  <li aria-current="step">Profile</li>
  <li>Done</li>
</ol>
```

## Variables

| Variable | Default |
| --- | --- |
| `--i-steps-marker-size` | `2rem` |
| `--i-steps-line-width` | `0.125rem` |