Switch to WilmingtonStep Guide
The step guide pattern takes the user through a series of steps in order to complete a particular task. It is similar in structure to a modal, and the fullscreen container always usurps control of the window. The required elements are the "Close" action, the guide title, the step title, body content and a customized version of the persistent action group pattern, which allows the user to navigate forward and backward in the step order. Body content will vary depending on the task. Add a guide description to briefly summarize the body content when necessary. A divider may be used to separate the description from body content.
Variations
Step Title: Step 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget purus vel ligula euismod feugiat. Curabitur quis dolor at purus laoreet varius. Vestibulum sagittis orci et dictum condimentum. Ut quis tortor ultrices orci convallis auctor ut ut massa. Nunc sollicitudin ultricies tellus at ullamcorper. Praesent auctor dolor eu rhoncus commodo. Curabitur scelerisque cursus nibh, a venenatis libero elementum at. Integer vel mauris ligula. Proin pulvinar turpis diam, at lobortis ligula auctor nec. Vivamus id elit dolor. Quisque porta justo pulvinar augue maximus, eget luctus neque malesuada. Nunc a lacinia sem. Sed nibh augue, sodales eget porttitor ultrices, facilisis in velit. Maecenas egestas nulla vitae est commodo dignissim. Nulla sed massa molestie, venenatis dui sed, congue justo. Quisque auctor lacus et tortor venenatis viverra. In ac enim sed nulla pharetra suscipit eget et mi. Duis ac mollis sem. Duis elementum ex sit amet ligula vehicula, vitae malesuada justo congue. Donec ac nisi dignissim, tincidunt nibh id, fringilla ligula. Nulla et tellus porta lectus fringilla hendrerit. Nulla consequat aliquam efficitur. Suspendisse non odio non dui tincidunt volutpat. Morbi congue pharetra ornare. Nulla eu turpis non mi porta eleifend. Nam et elementum mauris. Maecenas eget vehicula tellus. Curabitur quam tellus, pulvinar ac suscipit blandit, tincidunt eget ligula. Ut sit amet orci id felis vehicula interdum eget suscipit ipsum. Maecenas eget interdum urna, eu ornare tortor. Pellentesque blandit mauris at augue dignissim ullamcorper. Sed imperdiet diam mauris, eu sagittis diam fermentum nec. Donec hendrerit mi non placerat sollicitudin. Proin eu dolor eu sapien eleifend hendrerit eu id mi. Etiam sed interdum eros. Suspendisse feugiat odio non aliquam lacinia. Curabitur sit amet eros ac augue aliquam porta. Cras at condimentum ante. Curabitur efficitur eget massa non elementum. Aenean blandit, lacus at convallis suscipit, urna elit sollicitudin arcu, vel facilisis diam orci a quam. Aliquam mi velit, pharetra ut malesuada eu, convallis eget ex. Aenean ut tincidunt felis. Nulla facilisi. Cras laoreet quam nulla, at vestibulum metus tristique sit amet. Praesent non ipsum vitae enim consequat blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer convallis volutpat turpis, a consectetur mi commodo non. Nam quis dolor cursus augue aliquet tempor. Vivamus a mi fermentum ex consequat tristique. Integer risus lectus, egestas id est vel, sagittis ullamcorper leo. Aenean sed ligula et sapien vulputate vulputate. Phasellus sed ante scelerisque ipsum tincidunt volutpat. Sed aliquam molestie elementum. Morbi venenatis varius lorem accumsan vehicula. Curabitur id enim et mauris pellentesque scelerisque. Suspendisse luctus convallis nisi vel iaculis. Maecenas egestas leo sed magna mollis, at tincidunt dui faucibus. Nullam vitae lorem feugiat, luctus elit ac, auctor libero. Donec elementum ullamcorper velit, at facilisis ipsum. Curabitur semper sagittis diam, non mattis massa molestie eget. Quisque mollis viverra dapibus. Nunc ultrices leo et arcu gravida, sed consequat dui aliquet. Morbi interdum est id ligula ornare, at posuere tellus pulvinar. Pellentesque a ligula placerat, vestibulum leo eu, consectetur eros. Nulla vitae nunc sit amet ante hendrerit interdum. Sed mattis iaculis bibendum. Integer viverra felis sed erat mattis, sed dignissim lectus pellentesque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget purus vel ligula euismod feugiat. Curabitur quis dolor at purus laoreet varius. Vestibulum sagittis orci et dictum condimentum. Ut quis tortor ultrices orci convallis auctor ut ut massa. Nunc sollicitudin ultricies tellus at ullamcorper. Praesent auctor dolor eu rhoncus commodo. Curabitur scelerisque cursus nibh, a venenatis libero elementum at. Integer vel mauris ligula. Proin pulvinar turpis diam, at lobortis ligula auctor nec. Vivamus id elit dolor. Quisque porta justo pulvinar augue maximus, eget luctus neque malesuada. Nunc a lacinia sem. Sed nibh augue, sodales eget porttitor ultrices, facilisis in velit. Maecenas egestas nulla vitae est commodo dignissim. Nulla sed massa molestie, venenatis dui sed, congue justo. Quisque auctor lacus et tortor venenatis viverra. In ac enim sed nulla pharetra suscipit eget et mi. Duis ac mollis sem. Duis elementum ex sit amet ligula vehicula, vitae malesuada justo congue. Donec ac nisi dignissim, tincidunt nibh id, fringilla ligula. Nulla et tellus porta lectus fringilla hendrerit. Nulla consequat aliquam efficitur. Suspendisse non odio non dui tincidunt volutpat. Morbi congue pharetra ornare. Nulla eu turpis non mi porta eleifend. Nam et elementum mauris. Maecenas eget vehicula tellus. Curabitur quam tellus, pulvinar ac suscipit blandit, tincidunt eget ligula. Ut sit amet orci id felis vehicula interdum eget suscipit ipsum. Maecenas eget interdum urna, eu ornare tortor. Pellentesque blandit mauris at augue dignissim ullamcorper. Sed imperdiet diam mauris, eu sagittis diam fermentum nec. Donec hendrerit mi non placerat sollicitudin. Proin eu dolor eu sapien eleifend hendrerit eu id mi. Etiam sed interdum eros. Suspendisse feugiat odio non aliquam lacinia. Curabitur sit amet eros ac augue aliquam porta. Cras at condimentum ante. Curabitur efficitur eget massa non elementum. Aenean blandit, lacus at convallis suscipit, urna elit sollicitudin arcu, vel facilisis diam orci a quam. Aliquam mi velit, pharetra ut malesuada eu, convallis eget ex. Aenean ut tincidunt felis. Nulla facilisi. Cras laoreet quam nulla, at vestibulum metus tristique sit amet. Praesent non ipsum vitae enim consequat blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer convallis volutpat turpis, a consectetur mi commodo non. Nam quis dolor cursus augue aliquet tempor. Vivamus a mi fermentum ex consequat tristique. Integer risus lectus, egestas id est vel, sagittis ullamcorper leo. Aenean sed ligula et sapien vulputate vulputate. Phasellus sed ante scelerisque ipsum tincidunt volutpat. Sed aliquam molestie elementum. Morbi venenatis varius lorem accumsan vehicula. Curabitur id enim et mauris pellentesque scelerisque. Suspendisse luctus convallis nisi vel iaculis. Maecenas egestas leo sed magna mollis, at tincidunt dui faucibus. Nullam vitae lorem feugiat, luctus elit ac, auctor libero. Donec elementum ullamcorper velit, at facilisis ipsum. Curabitur semper sagittis diam, non mattis massa molestie eget. Quisque mollis viverra dapibus. Nunc ultrices leo et arcu gravida, sed consequat dui aliquet. Morbi interdum est id ligula ornare, at posuere tellus pulvinar. Pellentesque a ligula placerat, vestibulum leo eu, consectetur eros. Nulla vitae nunc sit amet ante hendrerit interdum. Sed mattis iaculis bibendum. Integer viverra felis sed erat mattis, sed dignissim lectus pellentesque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget purus vel ligula euismod feugiat. Curabitur quis dolor at purus laoreet varius. Vestibulum sagittis orci et dictum condimentum. Ut quis tortor ultrices orci convallis auctor ut ut massa. Nunc sollicitudin ultricies tellus at ullamcorper. Praesent auctor dolor eu rhoncus commodo. Curabitur scelerisque cursus nibh, a venenatis libero elementum at. Integer vel mauris ligula. Proin pulvinar turpis diam, at lobortis ligula auctor nec. Vivamus id elit dolor. Quisque porta justo pulvinar augue maximus, eget luctus neque malesuada. Nunc a lacinia sem. Sed nibh augue, sodales eget porttitor ultrices, facilisis in velit. Maecenas egestas nulla vitae est commodo dignissim. Nulla sed massa molestie, venenatis dui sed, congue justo. Quisque auctor lacus et tortor venenatis viverra. In ac enim sed nulla pharetra suscipit eget et mi. Duis ac mollis sem. Duis elementum ex sit amet ligula vehicula, vitae malesuada justo congue. Donec ac nisi dignissim, tincidunt nibh id, fringilla ligula. Nulla et tellus porta lectus fringilla hendrerit. Nulla consequat aliquam efficitur. Suspendisse non odio non dui tincidunt volutpat. Morbi congue pharetra ornare. Nulla eu turpis non mi porta eleifend. Nam et elementum mauris. Maecenas eget vehicula tellus. Curabitur quam tellus, pulvinar ac suscipit blandit, tincidunt eget ligula. Ut sit amet orci id felis vehicula interdum eget suscipit ipsum. Maecenas eget interdum urna, eu ornare tortor. Pellentesque blandit mauris at augue dignissim ullamcorper. Sed imperdiet diam mauris, eu sagittis diam fermentum nec. Donec hendrerit mi non placerat sollicitudin. Proin eu dolor eu sapien eleifend hendrerit eu id mi. Etiam sed interdum eros. Suspendisse feugiat odio non aliquam lacinia. Curabitur sit amet eros ac augue aliquam porta. Cras at condimentum ante. Curabitur efficitur eget massa non elementum. Aenean blandit, lacus at convallis suscipit, urna elit sollicitudin arcu, vel facilisis diam orci a quam. Aliquam mi velit, pharetra ut malesuada eu, convallis eget ex. Aenean ut tincidunt felis. Nulla facilisi. Cras laoreet quam nulla, at vestibulum metus tristique sit amet. Praesent non ipsum vitae enim consequat blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer convallis volutpat turpis, a consectetur mi commodo non. Nam quis dolor cursus augue aliquet tempor. Vivamus a mi fermentum ex consequat tristique. Integer risus lectus, egestas id est vel, sagittis ullamcorper leo. Aenean sed ligula et sapien vulputate vulputate. Phasellus sed ante scelerisque ipsum tincidunt volutpat. Sed aliquam molestie elementum. Morbi venenatis varius lorem accumsan vehicula. Curabitur id enim et mauris pellentesque scelerisque. Suspendisse luctus convallis nisi vel iaculis. Maecenas egestas leo sed magna mollis, at tincidunt dui faucibus. Nullam vitae lorem feugiat, luctus elit ac, auctor libero. Donec elementum ullamcorper velit, at facilisis ipsum. Curabitur semper sagittis diam, non mattis massa molestie eget. Quisque mollis viverra dapibus. Nunc ultrices leo et arcu gravida, sed consequat dui aliquet. Morbi interdum est id ligula ornare, at posuere tellus pulvinar. Pellentesque a ligula placerat, vestibulum leo eu, consectetur eros. Nulla vitae nunc sit amet ante hendrerit interdum. Sed mattis iaculis bibendum. Integer viverra felis sed erat mattis, sed dignissim lectus pellentesque.
Step Title: Step 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget purus vel ligula euismod feugiat. Curabitur quis dolor at purus laoreet varius. Vestibulum sagittis orci et dictum condimentum. Ut quis tortor ultrices orci convallis auctor ut ut massa. Nunc sollicitudin ultricies tellus at ullamcorper. Praesent auctor dolor eu rhoncus commodo. Curabitur scelerisque cursus nibh, a venenatis libero elementum at. Integer vel mauris ligula. Proin pulvinar turpis diam, at lobortis ligula auctor nec. Vivamus id elit dolor. Quisque porta justo pulvinar augue maximus, eget luctus neque malesuada. Nunc a lacinia sem. Sed nibh augue, sodales eget porttitor ultrices, facilisis in velit. Maecenas egestas nulla vitae est commodo dignissim. Nulla sed massa molestie, venenatis dui sed, congue justo. Quisque auctor lacus et tortor venenatis viverra. In ac enim sed nulla pharetra suscipit eget et mi. Duis ac mollis sem. Duis elementum ex sit amet ligula vehicula, vitae malesuada justo congue. Donec ac nisi dignissim, tincidunt nibh id, fringilla ligula. Nulla et tellus porta lectus fringilla hendrerit. Nulla consequat aliquam efficitur. Suspendisse non odio non dui tincidunt volutpat. Morbi congue pharetra ornare. Nulla eu turpis non mi porta eleifend. Nam et elementum mauris. Maecenas eget vehicula tellus. Curabitur quam tellus, pulvinar ac suscipit blandit, tincidunt eget ligula. Ut sit amet orci id felis vehicula interdum eget suscipit ipsum. Maecenas eget interdum urna, eu ornare tortor. Pellentesque blandit mauris at augue dignissim ullamcorper. Sed imperdiet diam mauris, eu sagittis diam fermentum nec. Donec hendrerit mi non placerat sollicitudin. Proin eu dolor eu sapien eleifend hendrerit eu id mi. Etiam sed interdum eros. Suspendisse feugiat odio non aliquam lacinia. Curabitur sit amet eros ac augue aliquam porta. Cras at condimentum ante. Curabitur efficitur eget massa non elementum. Aenean blandit, lacus at convallis suscipit, urna elit sollicitudin arcu, vel facilisis diam orci a quam. Aliquam mi velit, pharetra ut malesuada eu, convallis eget ex. Aenean ut tincidunt felis. Nulla facilisi. Cras laoreet quam nulla, at vestibulum metus tristique sit amet. Praesent non ipsum vitae enim consequat blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer convallis volutpat turpis, a consectetur mi commodo non. Nam quis dolor cursus augue aliquet tempor. Vivamus a mi fermentum ex consequat tristique. Integer risus lectus, egestas id est vel, sagittis ullamcorper leo. Aenean sed ligula et sapien vulputate vulputate. Phasellus sed ante scelerisque ipsum tincidunt volutpat. Sed aliquam molestie elementum. Morbi venenatis varius lorem accumsan vehicula. Curabitur id enim et mauris pellentesque scelerisque. Suspendisse luctus convallis nisi vel iaculis. Maecenas egestas leo sed magna mollis, at tincidunt dui faucibus. Nullam vitae lorem feugiat, luctus elit ac, auctor libero. Donec elementum ullamcorper velit, at facilisis ipsum. Curabitur semper sagittis diam, non mattis massa molestie eget. Quisque mollis viverra dapibus. Nunc ultrices leo et arcu gravida, sed consequat dui aliquet. Morbi interdum est id ligula ornare, at posuere tellus pulvinar. Pellentesque a ligula placerat, vestibulum leo eu, consectetur eros. Nulla vitae nunc sit amet ante hendrerit interdum. Sed mattis iaculis bibendum. Integer viverra felis sed erat mattis, sed dignissim lectus pellentesque.
Step Title: Step 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget purus vel ligula euismod feugiat. Curabitur quis dolor at purus laoreet varius. Vestibulum sagittis orci et dictum condimentum. Ut quis tortor ultrices orci convallis auctor ut ut massa. Nunc sollicitudin ultricies tellus at ullamcorper. Praesent auctor dolor eu rhoncus commodo. Curabitur scelerisque cursus nibh, a venenatis libero elementum at. Integer vel mauris ligula. Proin pulvinar turpis diam, at lobortis ligula auctor nec. Vivamus id elit dolor. Quisque porta justo pulvinar augue maximus, eget luctus neque malesuada. Nunc a lacinia sem. Sed nibh augue, sodales eget porttitor ultrices, facilisis in velit. Maecenas egestas nulla vitae est commodo dignissim. Nulla sed massa molestie, venenatis dui sed, congue justo. Quisque auctor lacus et tortor venenatis viverra. In ac enim sed nulla pharetra suscipit eget et mi. Duis ac mollis sem. Duis elementum ex sit amet ligula vehicula, vitae malesuada justo congue. Donec ac nisi dignissim, tincidunt nibh id, fringilla ligula. Nulla et tellus porta lectus fringilla hendrerit. Nulla consequat aliquam efficitur. Suspendisse non odio non dui tincidunt volutpat. Morbi congue pharetra ornare. Nulla eu turpis non mi porta eleifend. Nam et elementum mauris. Maecenas eget vehicula tellus. Curabitur quam tellus, pulvinar ac suscipit blandit, tincidunt eget ligula. Ut sit amet orci id felis vehicula interdum eget suscipit ipsum. Maecenas eget interdum urna, eu ornare tortor. Pellentesque blandit mauris at augue dignissim ullamcorper. Sed imperdiet diam mauris, eu sagittis diam fermentum nec. Donec hendrerit mi non placerat sollicitudin. Proin eu dolor eu sapien eleifend hendrerit eu id mi. Etiam sed interdum eros. Suspendisse feugiat odio non aliquam lacinia. Curabitur sit amet eros ac augue aliquam porta. Cras at condimentum ante. Curabitur efficitur eget massa non elementum. Aenean blandit, lacus at convallis suscipit, urna elit sollicitudin arcu, vel facilisis diam orci a quam. Aliquam mi velit, pharetra ut malesuada eu, convallis eget ex. Aenean ut tincidunt felis. Nulla facilisi. Cras laoreet quam nulla, at vestibulum metus tristique sit amet. Praesent non ipsum vitae enim consequat blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer convallis volutpat turpis, a consectetur mi commodo non. Nam quis dolor cursus augue aliquet tempor. Vivamus a mi fermentum ex consequat tristique. Integer risus lectus, egestas id est vel, sagittis ullamcorper leo. Aenean sed ligula et sapien vulputate vulputate. Phasellus sed ante scelerisque ipsum tincidunt volutpat. Sed aliquam molestie elementum. Morbi venenatis varius lorem accumsan vehicula. Curabitur id enim et mauris pellentesque scelerisque. Suspendisse luctus convallis nisi vel iaculis. Maecenas egestas leo sed magna mollis, at tincidunt dui faucibus. Nullam vitae lorem feugiat, luctus elit ac, auctor libero. Donec elementum ullamcorper velit, at facilisis ipsum. Curabitur semper sagittis diam, non mattis massa molestie eget. Quisque mollis viverra dapibus. Nunc ultrices leo et arcu gravida, sed consequat dui aliquet. Morbi interdum est id ligula ornare, at posuere tellus pulvinar. Pellentesque a ligula placerat, vestibulum leo eu, consectetur eros. Nulla vitae nunc sit amet ante hendrerit interdum. Sed mattis iaculis bibendum. Integer viverra felis sed erat mattis, sed dignissim lectus pellentesque.
<div class="p-step-guide">
<div class="p-step-guide__close-bar">
<h1 class="p-step-guide__close-bar-title">Header</h1>
<button class="p-step-guide__close-bar-button" onClick="toggleDefault()" onKeyDown="toggleDefault()">
<i class="icon icon--x p-step-guide__close-bar-button-icon"></i>
<span class="p-step-guide__close-bar-button-text">Close</span>
</button>
</div>
<!--Step 1-->
<div class="p-step-guide__content scrollModalContent">
<div class="p-step-guide__header">
<div class="p-step-guide__eyebrow">Step Description: This is Step 1</div>
<h1 class="p-step-guide__header-title">Step Title: Step 1</h1>
</div>
<p class="l-margin-bottom--medium">
Step 1 Content
</p>
<hr class="c-divider l-margin-vertical--large" />
</div>
<!--Step 2-->
<div class="p-step-guide__content scrollModalContent">
<div class="p-step-guide__header">
<div class="p-step-guide__eyebrow">Step Description: This is Step 2</div>
<h1 class="p-step-guide__header-title">Step Title: Step 2</h1>
</div>
<p>Step 2 Content</p>
<hr class="c-divider l-margin-vertical--large" />
</div>
<!--Step 3-->
<div class="p-step-guide__content scrollModalContent">
<div class="p-step-guide__header">
<div class="p-step-guide__eyebrow">Step Description: This is Step 3</div>
<h1 class="p-step-guide__header-title">Step Title: Step 3</h1>
</div>
<p>Step 3 Content</p>
<hr class="c-divider l-margin-vertical--large" />
</div>
<div class="p-step-guide__footer">
<div class="c-progress-bar--step-guide">
<progress id="progress" value="33" max="100"> 33% </progress>
</div>
<div class="p-step-guide__footer--left">
<button id="prevBtn" class="p-step-guide__footer--left-button icon icon--arrow-with-tail-left p-step-guide__footer--left-button-icon" onclick="nextPrev(-1)">
<span class="p-step-guide__footer--left-button-text">Back</span></button>
<span class="p-step-guide__footer-vertical-border"></span>
<div class="p-step-guide__pagination">
<span class="p-step-guide__pagination--first-number">1</span> of <span class="p-step-guide__pagination--last-number">3</span>
</div>
</div>
<div class="p-step-guide__footer--right">
<button id="nextBtn" onclick="nextPrev(1)" class="p-step-guide__button--primary">Next</button>
</div>
</div>
</div> Design Environment
The primary button will always drive the user forward in the flow, and the left arrow button will always bring the user back to the previous step.The progress bar and step label communicate to the user where they are in the step order. If the only purpose of the final step is confirmation, remove it and use a success notification instead. Step guides take over the entire screen in all environments, so they can only be dismissed with the "Close" action.
Design Environment
The primary button will always drive the user forward in the flow, and the left arrow button will always bring the user back to the previous step.The progress bar and step label communicate to the user where they are in the step order. If the only purpose of the final step is confirmation, remove it and use a success notification instead. Step guides take over the entire screen in all environments, so they can only be dismissed with the "Close" action.
Microcopy
The guide description should be as brief as possible, ideally one or two sentences. Try to keep text content in the body concise to avoid scrolling if possible. The primary button will usually be "Next" or "Submit," depending on the step. Do not duplicate the "Close" action with a "Close" button in the last step. Otherwise, follow guidelines for the title and button components.