Getting Started
Design Elements
Utilities
Components
- Button Group
- Button
- Checkbox
- Divider
- Feedback
- Field Group
- Grid
- Icon
- Input Group
- Input
- Loader
- Modal
- Panel
- Popup
- Progress
- Select Box
- Step Nav
- Summary List
- Table
- Tabs
- Toggle
- Tooltip
Can use numbers or icons.
<div class="StepNav ">
<ul class="StepNav-steps">
<li class="StepNav-step is-enabled ">
<a href="#" class="StepNav-stepLink">
<svg viewBox="0 0 960 960" class="Icon StepNav-stepIcon"><path d="M915 178.9c8 6.7 12.3 15.5 13 26.5s-2.3 21.2-9 30.5c-252.7 360.7-389.3 555.3-410 584-21.3 28.7-48.8 43.2-82.5 43.5S365 849.2 343 819.9l-278-391c-6.7-9.3-9.7-19.7-9-31s5-20.3 13-27c34-29.3 72-55.7 114-79 8.7-4.7 18.3-5.3 29-2s19.3 9.7 26 19l188 264 321-456c6.7-9.3 15.2-15.5 25.5-18.5s20.2-2.2 29.5 2.5c44 24 81.7 50 113 78z"/></svg>
<span class="StepNav-stepTitle">Completed Step</span>
</a>
</li>
<li class="StepNav-step is-enabled is-active">
<a href="#" class="StepNav-stepLink">
<svg viewBox="0 0 960 960" class="Icon StepNav-stepIcon"><path d="M480,9Q622.35,9,724,115T825.57,370.29q0,75.59-30.43,160.51T721.51,682.48q-43.2,66.76-86.39,123.21t-73.63,86.88L531.05,923q-32.4,28.47-53.5,28T426,923q-11.78-11.78-31.42-32.4t-70.19-83.45A1182.49,1182.49,0,0,1,235.55,681.5q-38.29-62.83-69.7-149.22t-31.42-162Q134.43,221.06,236,115T480,9Zm0,508.54q67.74,0,115.85-47.61T644,354.58q0-67.74-48.11-115.85T480,190.63q-67.74,0-115.35,48.11T317,354.58q0,67.74,47.61,115.35T480,517.55Z"/></svg>
<span class="StepNav-stepTitle">Current Step</span>
</a>
</li>
<li class="StepNav-step ">
<span class="StepNav-stepLink">
<svg viewBox="0 0 960 960" class="Icon StepNav-stepIcon">
<path d="M829,500.82V843.87A58.74,58.74,0,0,1,813.63,884a69.15,69.15,0,0,1-37.18,22.31A1302.73,1302.73,0,0,1,480,940q-154.67,0-299.43-33.71A63.46,63.46,0,0,1,131,843.87V503.8a76.16,76.16,0,0,1,17.85-49.57q17.85-21.81,43.63-21.81h33.71V273.77q0-114,69.9-183.92T480,20q114,0,183.92,69.9t69.9,183.92V432.41h30.74q25.78,0,45.11,20.82T829,500.82ZM384.82,432.41H575.18V273.77q0-95.18-95.18-95.18t-95.18,95.18Z" />
</svg>
<span class="StepNav-stepTitle">Next Step</span>
</span>
</li>
</ul>
</div>
<div class="StepNav ">
<ul class="StepNav-steps">
<li class="StepNav-step is-enabled ">
<a href="#" class="StepNav-stepLink">
<span class="StepNav-stepIcon">
1
</span>
<span class="StepNav-stepTitle">Completed Step</span>
</a>
</li>
<li class="StepNav-step is-enabled is-active">
<a href="#" class="StepNav-stepLink">
<span class="StepNav-stepIcon">
2
</span>
<span class="StepNav-stepTitle">Current Step</span>
</a>
</li>
<li class="StepNav-step ">
<span class="StepNav-stepLink">
<span class="StepNav-stepIcon">
3
</span>
<span class="StepNav-stepTitle">Next Step</span>
</span>
</li>
</ul>
</div><div class="StepNav StepNav--titled">
<div class="StepNav-title">
<h2 class="StepNav-titleText">Navigation Title</h2>
</div>
<ul class="StepNav-steps">
<li class="StepNav-step is-enabled ">
<a href="#" class="StepNav-stepLink">
<svg viewBox="0 0 960 960" class="Icon StepNav-stepIcon"><path d="M915 178.9c8 6.7 12.3 15.5 13 26.5s-2.3 21.2-9 30.5c-252.7 360.7-389.3 555.3-410 584-21.3 28.7-48.8 43.2-82.5 43.5S365 849.2 343 819.9l-278-391c-6.7-9.3-9.7-19.7-9-31s5-20.3 13-27c34-29.3 72-55.7 114-79 8.7-4.7 18.3-5.3 29-2s19.3 9.7 26 19l188 264 321-456c6.7-9.3 15.2-15.5 25.5-18.5s20.2-2.2 29.5 2.5c44 24 81.7 50 113 78z"/></svg>
<span class="StepNav-stepTitle">Completed Step</span>
</a>
</li>
<li class="StepNav-step is-enabled is-active">
<a href="#" class="StepNav-stepLink">
<svg viewBox="0 0 960 960" class="Icon StepNav-stepIcon"><path d="M480,9Q622.35,9,724,115T825.57,370.29q0,75.59-30.43,160.51T721.51,682.48q-43.2,66.76-86.39,123.21t-73.63,86.88L531.05,923q-32.4,28.47-53.5,28T426,923q-11.78-11.78-31.42-32.4t-70.19-83.45A1182.49,1182.49,0,0,1,235.55,681.5q-38.29-62.83-69.7-149.22t-31.42-162Q134.43,221.06,236,115T480,9Zm0,508.54q67.74,0,115.85-47.61T644,354.58q0-67.74-48.11-115.85T480,190.63q-67.74,0-115.35,48.11T317,354.58q0,67.74,47.61,115.35T480,517.55Z"/></svg>
<span class="StepNav-stepTitle">Current Step</span>
</a>
</li>
<li class="StepNav-step ">
<span class="StepNav-stepLink">
<svg viewBox="0 0 960 960" class="Icon StepNav-stepIcon">
<path d="M829,500.82V843.87A58.74,58.74,0,0,1,813.63,884a69.15,69.15,0,0,1-37.18,22.31A1302.73,1302.73,0,0,1,480,940q-154.67,0-299.43-33.71A63.46,63.46,0,0,1,131,843.87V503.8a76.16,76.16,0,0,1,17.85-49.57q17.85-21.81,43.63-21.81h33.71V273.77q0-114,69.9-183.92T480,20q114,0,183.92,69.9t69.9,183.92V432.41h30.74q25.78,0,45.11,20.82T829,500.82ZM384.82,432.41H575.18V273.77q0-95.18-95.18-95.18t-95.18,95.18Z" />
</svg>
<span class="StepNav-stepTitle">Next Step</span>
</span>
</li>
</ul>
</div><div class="StepNav StepNav--small">
<ul class="StepNav-steps">
<li class="StepNav-step is-enabled ">
<a href="#" class="StepNav-stepLink">
<svg viewBox="0 0 960 960" class="Icon StepNav-stepIcon"><path d="M915 178.9c8 6.7 12.3 15.5 13 26.5s-2.3 21.2-9 30.5c-252.7 360.7-389.3 555.3-410 584-21.3 28.7-48.8 43.2-82.5 43.5S365 849.2 343 819.9l-278-391c-6.7-9.3-9.7-19.7-9-31s5-20.3 13-27c34-29.3 72-55.7 114-79 8.7-4.7 18.3-5.3 29-2s19.3 9.7 26 19l188 264 321-456c6.7-9.3 15.2-15.5 25.5-18.5s20.2-2.2 29.5 2.5c44 24 81.7 50 113 78z"/></svg>
<span class="StepNav-stepTitle">Completed Step</span>
</a>
</li>
<li class="StepNav-step is-enabled is-active">
<a href="#" class="StepNav-stepLink">
<svg viewBox="0 0 960 960" class="Icon StepNav-stepIcon"><path d="M480,9Q622.35,9,724,115T825.57,370.29q0,75.59-30.43,160.51T721.51,682.48q-43.2,66.76-86.39,123.21t-73.63,86.88L531.05,923q-32.4,28.47-53.5,28T426,923q-11.78-11.78-31.42-32.4t-70.19-83.45A1182.49,1182.49,0,0,1,235.55,681.5q-38.29-62.83-69.7-149.22t-31.42-162Q134.43,221.06,236,115T480,9Zm0,508.54q67.74,0,115.85-47.61T644,354.58q0-67.74-48.11-115.85T480,190.63q-67.74,0-115.35,48.11T317,354.58q0,67.74,47.61,115.35T480,517.55Z"/></svg>
<span class="StepNav-stepTitle">Current Step</span>
</a>
</li>
<li class="StepNav-step ">
<span class="StepNav-stepLink">
<svg viewBox="0 0 960 960" class="Icon StepNav-stepIcon">
<path d="M829,500.82V843.87A58.74,58.74,0,0,1,813.63,884a69.15,69.15,0,0,1-37.18,22.31A1302.73,1302.73,0,0,1,480,940q-154.67,0-299.43-33.71A63.46,63.46,0,0,1,131,843.87V503.8a76.16,76.16,0,0,1,17.85-49.57q17.85-21.81,43.63-21.81h33.71V273.77q0-114,69.9-183.92T480,20q114,0,183.92,69.9t69.9,183.92V432.41h30.74q25.78,0,45.11,20.82T829,500.82ZM384.82,432.41H575.18V273.77q0-95.18-95.18-95.18t-95.18,95.18Z" />
</svg>
<span class="StepNav-stepTitle">Next Step</span>
</span>
</li>
<li class="StepNav-step ">
<span class="StepNav-stepLink">
<svg viewBox="0 0 960 960" class="Icon StepNav-stepIcon">
<path d="M829,500.82V843.87A58.74,58.74,0,0,1,813.63,884a69.15,69.15,0,0,1-37.18,22.31A1302.73,1302.73,0,0,1,480,940q-154.67,0-299.43-33.71A63.46,63.46,0,0,1,131,843.87V503.8a76.16,76.16,0,0,1,17.85-49.57q17.85-21.81,43.63-21.81h33.71V273.77q0-114,69.9-183.92T480,20q114,0,183.92,69.9t69.9,183.92V432.41h30.74q25.78,0,45.11,20.82T829,500.82ZM384.82,432.41H575.18V273.77q0-95.18-95.18-95.18t-95.18,95.18Z" />
</svg>
<span class="StepNav-stepTitle">Next Step</span>
</span>
</li>
</ul>
</div>
<div class="StepNav StepNav--small">
<ul class="StepNav-steps">
<li class="StepNav-step is-enabled ">
<a href="#" class="StepNav-stepLink">
<span class="StepNav-stepIcon">
1
</span>
<span class="StepNav-stepTitle">Completed Step</span>
</a>
</li>
<li class="StepNav-step is-enabled is-active">
<a href="#" class="StepNav-stepLink">
<span class="StepNav-stepIcon">
2
</span>
<span class="StepNav-stepTitle">Current Step</span>
</a>
</li>
<li class="StepNav-step ">
<span class="StepNav-stepLink">
<span class="StepNav-stepIcon">
3
</span>
<span class="StepNav-stepTitle">Next Step</span>
</span>
</li>
<li class="StepNav-step ">
<span class="StepNav-stepLink">
<span class="StepNav-stepIcon">
4
</span>
<span class="StepNav-stepTitle">Next Step</span>
</span>
</li>
</ul>
</div><div class="StepNav StepNav--xsmall">
<ul class="StepNav-steps">
<li class="StepNav-step is-enabled ">
<a href="#" class="StepNav-stepLink">
<svg viewBox="0 0 960 960" class="Icon StepNav-stepIcon"><path d="M915 178.9c8 6.7 12.3 15.5 13 26.5s-2.3 21.2-9 30.5c-252.7 360.7-389.3 555.3-410 584-21.3 28.7-48.8 43.2-82.5 43.5S365 849.2 343 819.9l-278-391c-6.7-9.3-9.7-19.7-9-31s5-20.3 13-27c34-29.3 72-55.7 114-79 8.7-4.7 18.3-5.3 29-2s19.3 9.7 26 19l188 264 321-456c6.7-9.3 15.2-15.5 25.5-18.5s20.2-2.2 29.5 2.5c44 24 81.7 50 113 78z"/></svg>
<span class="StepNav-stepTitle">Completed Step</span>
</a>
</li>
<li class="StepNav-step is-enabled is-active">
<a href="#" class="StepNav-stepLink">
<svg viewBox="0 0 960 960" class="Icon StepNav-stepIcon"><path d="M480,9Q622.35,9,724,115T825.57,370.29q0,75.59-30.43,160.51T721.51,682.48q-43.2,66.76-86.39,123.21t-73.63,86.88L531.05,923q-32.4,28.47-53.5,28T426,923q-11.78-11.78-31.42-32.4t-70.19-83.45A1182.49,1182.49,0,0,1,235.55,681.5q-38.29-62.83-69.7-149.22t-31.42-162Q134.43,221.06,236,115T480,9Zm0,508.54q67.74,0,115.85-47.61T644,354.58q0-67.74-48.11-115.85T480,190.63q-67.74,0-115.35,48.11T317,354.58q0,67.74,47.61,115.35T480,517.55Z"/></svg>
<span class="StepNav-stepTitle">Current Step</span>
</a>
</li>
<li class="StepNav-step ">
<span class="StepNav-stepLink">
<svg viewBox="0 0 960 960" class="Icon StepNav-stepIcon">
<path d="M829,500.82V843.87A58.74,58.74,0,0,1,813.63,884a69.15,69.15,0,0,1-37.18,22.31A1302.73,1302.73,0,0,1,480,940q-154.67,0-299.43-33.71A63.46,63.46,0,0,1,131,843.87V503.8a76.16,76.16,0,0,1,17.85-49.57q17.85-21.81,43.63-21.81h33.71V273.77q0-114,69.9-183.92T480,20q114,0,183.92,69.9t69.9,183.92V432.41h30.74q25.78,0,45.11,20.82T829,500.82ZM384.82,432.41H575.18V273.77q0-95.18-95.18-95.18t-95.18,95.18Z" />
</svg>
<span class="StepNav-stepTitle">Next Step</span>
</span>
</li>
<li class="StepNav-step ">
<span class="StepNav-stepLink">
<svg viewBox="0 0 960 960" class="Icon StepNav-stepIcon">
<path d="M829,500.82V843.87A58.74,58.74,0,0,1,813.63,884a69.15,69.15,0,0,1-37.18,22.31A1302.73,1302.73,0,0,1,480,940q-154.67,0-299.43-33.71A63.46,63.46,0,0,1,131,843.87V503.8a76.16,76.16,0,0,1,17.85-49.57q17.85-21.81,43.63-21.81h33.71V273.77q0-114,69.9-183.92T480,20q114,0,183.92,69.9t69.9,183.92V432.41h30.74q25.78,0,45.11,20.82T829,500.82ZM384.82,432.41H575.18V273.77q0-95.18-95.18-95.18t-95.18,95.18Z" />
</svg>
<span class="StepNav-stepTitle">Next Step</span>
</span>
</li>
</ul>
</div>
<div class="StepNav StepNav--xsmall">
<ul class="StepNav-steps">
<li class="StepNav-step is-enabled ">
<a href="#" class="StepNav-stepLink">
<span class="StepNav-stepIcon">
1
</span>
<span class="StepNav-stepTitle">Completed Step</span>
</a>
</li>
<li class="StepNav-step is-enabled is-active">
<a href="#" class="StepNav-stepLink">
<span class="StepNav-stepIcon">
2
</span>
<span class="StepNav-stepTitle">Current Step</span>
</a>
</li>
<li class="StepNav-step ">
<span class="StepNav-stepLink">
<span class="StepNav-stepIcon">
3
</span>
<span class="StepNav-stepTitle">Next Step</span>
</span>
</li>
<li class="StepNav-step ">
<span class="StepNav-stepLink">
<span class="StepNav-stepIcon">
4
</span>
<span class="StepNav-stepTitle">Next Step</span>
</span>
</li>
</ul>
</div>