Tickster Styleguide

Appearance

v2.39.3

Steps ​

When to use it ​

The Steps component is used as a progress indicator for a certain number of known steps. It is commonly used in multi-step forms or processes to visually indicate the current step and the steps remaining.

Variants ​

To override the default color of the selected step, set --selected-color to the desired color. Use the .c-steps--horizontal modifier to display the steps in a horizontal layout. Use .c-steps--large with an ordered list (<ol>) for numbered indicators (numbers can't fit in the smaller dots). It uses the same text size as u-font--base, while the default Steps size is u-font--s.

Apply a font-size utility such as u-font--s to the ol or ul to scale the step text, indicators, and connectors together. The numbered indicators remain slightly larger than the text. A font-size utility on an individual step changes only that step's text, leaving its indicator unchanged.

Add .c-steps--labels-below to a horizontal layout to center each indicator above its label. Steps have equal widths, and long labels wrap. This works with both indicator sizes and with .c-steps__validated, preserving the existing appearance of numbers and checkmarks.

Set --steps-radius to customize the corners of the indicators and horizontal labels. It falls back to --input-radius when set; otherwise, indicators stay circular and horizontal labels use --r-xl. Both properties can be inherited from a parent or set directly on the component.

What it looks like ​

Code examples ​

html
<ol class="c-steps">
    <li><span>Step number one</span></li>
    <li class="c-steps__active" aria-current="step"><span>Step number two</span></li>
    <li><span>Step number three</span></li>
    <li><span>Step number four</span></li>
</ol>
html
<ol class="c-steps c-steps--large">
    <li><span>Step one with more text</span></li>
    <li class="c-steps__active" aria-current="step"><span>Step two with more text</span></li>
    <li><span>Step three with more text</span></li>
    <li><span>Step four with more text</span></li>
</ol>
html
<ol class="c-steps c-steps--large c-steps--horizontal">
    <li><span>Step one</span></li>
    <li class="c-steps__active" aria-current="step"><span>Step two</span></li>
    <li><span>Step three</span></li>
    <li><span>Step four</span></li>
</ol>
html
<ol class="c-steps c-steps--horizontal c-steps--labels-below">
    <li class="c-steps__validated"><span>Step 1</span></li>
    <li class="c-steps__active" aria-current="step"><span>Step 2</span></li>
    <li><span>Step 3</span></li>
    <li><span>Step 4</span></li>
</ol>
<ol class="c-steps c-steps--horizontal c-steps--labels-below c-steps--large">
    <li class="c-steps__validated"><span>Step one</span></li>
    <li class="c-steps__active" aria-current="step"><span>Step two</span></li>
    <li><span>Step three</span></li>
    <li><span>Step four</span></li>
</ol>
<ol class="c-steps c-steps--large c-steps--horizontal c-steps--labels-below u-font--xs">
    <li class="c-steps__validated"><span>Step one</span></li>
    <li class="c-steps__active" aria-current="step"><span>Step two</span></li>
    <li><span>Step three</span></li>
    <li><span>Step four</span></li>
</ol>
html
<ul class="c-steps c-steps--large c-steps--horizontal">
    <li><span>Step</span></li>
    <li><span>Step</span></li>
    <li class="c-steps__validated"><span>Step</span></li>
    <li class="c-steps__active" aria-current="step"><span>Step</span></li>
    <li><span>Step</span></li>
</ul>

Accessibility notes ​

Make sure to use aria-current="step" to indicate the current step to screen readers.