Step by Step
Demonstration
1. How it Works
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. Justo laoreet sit amet cursus sit amet dictum sit. Eget nulla facilisi etiam dignissim diam. Tempor id eu nisl nunc mi. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis. Et pharetra pharetra massa massa ultricies. Facilisis magna etiam tempor orci eu lobortis elementum. Massa massa ultricies mi quis hendrerit dolor magna. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Urna et pharetra pharetra massa massa ultricies mi. Orci sagittis eu volutpat odio facilisis mauris sit amet. Cras semper auctor neque vitae tempus. Magna fermentum iaculis eu non diam phasellus vestibulum. Imperdiet sed euismod nisi porta lorem. Facilisi etiam dignissim diam quis. Aliquam id diam maecenas ultricies mi. Nisl condimentum id venenatis a. Congue nisi vitae suscipit tellus.
2. Determine your eligibility
Felis donec et odio pellentesque. A erat nam at lectus urna duis convallis convallis. Mi sit amet mauris commodo quis imperdiet. Eget egestas purus viverra accumsan in nisl. Viverra justo nec ultrices dui sapien eget mi proin. Tortor vitae purus faucibus ornare suspendisse sed. Nunc sed blandit libero volutpat sed cras. Nunc scelerisque viverra mauris in aliquam sem fringilla. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Massa sed elementum tempus egestas sed sed risus pretium quam. Dignissim enim sit amet venenatis urna cursus eget nunc. Odio euismod lacinia at quis. Massa id neque aliquam vestibulum morbi blandit.
3. What you need to include
Nisl suscipit adipiscing bibendum est ultricies. Aliquam malesuada bibendum arcu vitae elementum curabitur. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. Purus in massa tempor nec feugiat nisl pretium. Egestas pretium aenean pharetra magna ac. Amet purus gravida quis blandit turpis cursus in. Quis ipsum suspendisse ultrices gravida. Amet aliquam id diam maecenas ultricies mi eget mauris pharetra. Tellus molestie nunc non blandit massa enim nec dui nunc. Urna porttitor rhoncus dolor purus non enim praesent. A lacus vestibulum sed arcu. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Commodo odio aenean sed adipiscing diam donec adipiscing tristique risus. Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Nisl tincidunt eget nullam non nisi est. Diam maecenas sed enim ut sem viverra aliquet eget sit.
4. How to apply
Proin nibh nisl condimentum id venenatis a condimentum vitae. Nibh nisl condimentum id venenatis. Facilisis volutpat est velit egestas dui id ornare. Turpis in eu mi bibendum. Felis bibendum ut tristique et egestas quis. Non curabitur gravida arcu ac tortor dignissim convallis aenean et. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim facilisis. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Consectetur lorem donec massa sapien faucibus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Amet nulla facilisi morbi tempus iaculis urna id. Sit amet nisl purus in mollis nunc. Accumsan tortor posuere ac ut. Nibh cras pulvinar mattis nunc sed.
Code
<!--{ @data-js "step-by-step" instantiates this element as a Step by Step }-->
<section class="tablet:layout-sidebar-small desktop:layout-sidebar" data-js="step-by-step">
<aside class="mb-2">
<div class="wrap py-1 tablet:pie-0">
<!--{ @class "print:hidden" will hide this element when it is printed }-->
<nav aria-label="On this page" class="c-side-navigation print:hidden">
<ol>
<li>
<!--{ @data-step-go-to Indicates this a toggling element for jumping to and revealing a step for the "Step by Step" pattern. The value should match the step region's @data-step attribute }-->
<!--{ @href Used by the "Step by Step" to target the step region by its ID }-->
<a class="active" data-step-go-to="how-it-works" href="#how-it-works">How it works</a>
</li>
<li>
<!--{ @data-step-go-to Indicates this a toggling element for jumping to and revealing a step for the "Step by Step" pattern. The value should match the step region's @data-step attribute }-->
<!--{ @href Used by the "Step by Step" to target the step region by its ID }-->
<a class="active" data-step-go-to="determine-your-eligibility" href="#determine-your-eligibility">Determine your eligibility</a>
</li>
<li>
<!--{ @data-step-go-to Indicates this a toggling element for jumping to and revealing a step for the "Step by Step" pattern. The value should match the step region's @data-step attribute }-->
<!--{ @href Used by the "Step by Step" to target the step region by its ID }-->
<a class="active" data-step-go-to="what-you-need-to-include" href="#what-you-need-to-include">What you need to include</a>
</li>
<li>
<!--{ @data-step-go-to Indicates this a toggling element for jumping to and revealing a step for the "Step by Step" pattern. The value should match the step region's @data-step attribute }-->
<!--{ @href Used by the "Step by Step" to target the step region by its ID }-->
<a class="active" data-step-go-to="how-to-apply" href="#how-to-apply">How to apply</a>
</li>
</ol>
</nav>
</div>
</aside>
<article class="w-full">
<!--{ @id The id of the step region is targeted by the @href attribute of the toggling element }-->
<!--{ @data-step Indicates this as a step region. The value should match the value of @data-step-go-to on the toggling element }-->
<!--{ @aria-hidden "false" reveals the step region content. It will be toggled to "true" when the step is hidden }-->
<!--{ @class "active" indicates the step region is active. This class will be toggled to "hidden" when the step isn't active. "hidden:overflow" provides an alternative hiding mechanism using the overflow property as opposed to the display property to ensure elements within the region display correctly. "print:active" will show the the region when th page is printed }-->
<section aria-hidden="false" class="active hidden:overflow print:active" data-step="how-it-works" id="how-it-works">
<div class="wrap py-1">
<header>
<!--{ @data-step-by-step "focus" indicates this element will receive focus when a user selects an anchor target }-->
<h5 data-step-by-step="focus">1. How it Works</h5>
<span></span>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. Justo laoreet sit amet cursus sit amet dictum sit. Eget nulla facilisi etiam dignissim diam. Tempor id eu nisl nunc mi. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis. Et pharetra pharetra massa massa ultricies. Facilisis magna etiam tempor orci eu lobortis elementum. Massa massa ultricies mi quis hendrerit dolor magna. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Urna et pharetra pharetra massa massa ultricies mi. Orci sagittis eu volutpat odio facilisis mauris sit amet. Cras semper auctor neque vitae tempus. Magna fermentum iaculis eu non diam phasellus vestibulum. Imperdiet sed euismod nisi porta lorem. Facilisi etiam dignissim diam quis. Aliquam id diam maecenas ultricies mi. Nisl condimentum id venenatis a. Congue nisi vitae suscipit tellus.</p>
<p>
<!--{ @data-step-go-to Indicates this a toggling element for jumping to and revealing a step. The value should match the step region's @data-step attribute }-->
<!--{ @href Targets the ID of the step region to toggle }-->
<a class="btn btn-secondary" data-step-go-to="determine-your-eligibility" href="#determine-your-eligibility">
<span>2. Determine Your Eligibility</span>
<!--{ @class "rtl:flip" changes the orientation of the chevron icon based on the reading direction of the page }-->
<!--{ @aria-hidden "true" removes this non-critical icon from screen reader view }-->
<svg aria-hidden="true" class="icon-ui rtl:flip">
<use href="#lucide-arrow-right"></use>
</svg>
</a>
</p>
</div>
</section>
<!--{ @id The id of the step region is targeted by the @href attribute of the toggling element }-->
<!--{ @data-step Indicates this as a step region. The value should match the value of @data-step-go-to on the toggling element }-->
<!--{ @aria-hidden "false" reveals the step region content. It will be toggled to "true" when the step is hidden }-->
<!--{ @class "active" indicates the step region is active. This class will be toggled to "hidden" when the step isn't active. "hidden:overflow" provides an alternative hiding mechanism using the overflow property as opposed to the display property to ensure elements within the region display correctly. "print:active" will show the the region when th page is printed }-->
<section aria-hidden="false" class="active hidden:overflow print:active" data-step="determine-your-eligibility" id="determine-your-eligibility">
<div class="wrap py-1">
<header>
<!--{ @data-step-by-step "focus" indicates this element will receive focus when a user selects an anchor target }-->
<h5 data-step-by-step="focus">2. Determine your eligibility</h5>
<span></span>
</header>
<p>Felis donec et odio pellentesque. A erat nam at lectus urna duis convallis convallis. Mi sit amet mauris commodo quis imperdiet. Eget egestas purus viverra accumsan in nisl. Viverra justo nec ultrices dui sapien eget mi proin. Tortor vitae purus faucibus ornare suspendisse sed. Nunc sed blandit libero volutpat sed cras. Nunc scelerisque viverra mauris in aliquam sem fringilla. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Massa sed elementum tempus egestas sed sed risus pretium quam. Dignissim enim sit amet venenatis urna cursus eget nunc. Odio euismod lacinia at quis. Massa id neque aliquam vestibulum morbi blandit.</p>
<p>
<!--{ @data-step-go-to Indicates this a toggling element for jumping to and revealing a step. The value should match the step region's @data-step attribute }-->
<!--{ @href Targets the ID of the step region to toggle }-->
<a class="btn btn-secondary" data-step-go-to="what-you-need-to-include" href="#what-you-need-to-include">
<span>3. What you need to include</span>
<!--{ @class "rtl:flip" changes the orientation of the chevron icon based on the reading direction of the page }-->
<!--{ @aria-hidden "true" removes this non-critical icon from screen reader view }-->
<svg aria-hidden="true" class="icon-ui rtl:flip">
<use href="#lucide-arrow-right"></use>
</svg>
</a>
</p>
</div>
</section>
<!--{ @id The id of the step region is targeted by the @href attribute of the toggling element }-->
<!--{ @data-step Indicates this as a step region. The value should match the value of @data-step-go-to on the toggling element }-->
<!--{ @aria-hidden "false" reveals the step region content. It will be toggled to "true" when the step is hidden }-->
<!--{ @class "active" indicates the step region is active. This class will be toggled to "hidden" when the step isn't active. "hidden:overflow" provides an alternative hiding mechanism using the overflow property as opposed to the display property to ensure elements within the region display correctly. "print:active" will show the the region when th page is printed }-->
<section aria-hidden="false" class="active hidden:overflow print:active" data-step="what-you-need-to-include" id="what-you-need-to-include">
<div class="wrap py-1">
<header>
<!--{ @data-step-by-step "focus" indicates this element will receive focus when a user selects an anchor target }-->
<h5 data-step-by-step="focus">3. What you need to include</h5>
<span></span>
</header>
<p>Nisl suscipit adipiscing bibendum est ultricies. Aliquam malesuada bibendum arcu vitae elementum curabitur. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. Purus in massa tempor nec feugiat nisl pretium. Egestas pretium aenean pharetra magna ac. Amet purus gravida quis blandit turpis cursus in. Quis ipsum suspendisse ultrices gravida. Amet aliquam id diam maecenas ultricies mi eget mauris pharetra. Tellus molestie nunc non blandit massa enim nec dui nunc. Urna porttitor rhoncus dolor purus non enim praesent. A lacus vestibulum sed arcu. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Commodo odio aenean sed adipiscing diam donec adipiscing tristique risus. Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Nisl tincidunt eget nullam non nisi est. Diam maecenas sed enim ut sem viverra aliquet eget sit.</p>
<p>
<!--{ @data-step-go-to Indicates this a toggling element for jumping to and revealing a step. The value should match the step region's @data-step attribute }-->
<!--{ @href Targets the ID of the step region to toggle }-->
<a class="btn btn-secondary" data-step-go-to="how-to-apply" href="#how-to-apply">
<span>4. How to apply</span>
<!--{ @class "rtl:flip" changes the orientation of the chevron icon based on the reading direction of the page }-->
<!--{ @aria-hidden "true" removes this non-critical icon from screen reader view }-->
<svg aria-hidden="true" class="icon-ui rtl:flip">
<use href="#lucide-arrow-right"></use>
</svg>
</a>
</p>
</div>
</section>
<!--{ @id The id of the step region is targeted by the @href attribute of the toggling element }-->
<!--{ @data-step Indicates this as a step region. The value should match the value of @data-step-go-to on the toggling element }-->
<!--{ @aria-hidden "false" reveals the step region content. It will be toggled to "true" when the step is hidden }-->
<!--{ @class "active" indicates the step region is active. This class will be toggled to "hidden" when the step isn't active. "hidden:overflow" provides an alternative hiding mechanism using the overflow property as opposed to the display property to ensure elements within the region display correctly. "print:active" will show the the region when th page is printed }-->
<section aria-hidden="false" class="active hidden:overflow print:active" data-step="how-to-apply" id="how-to-apply">
<div class="wrap py-1">
<header>
<!--{ @data-step-by-step "focus" indicates this element will receive focus when a user selects an anchor target }-->
<h5 data-step-by-step="focus">4. How to apply</h5>
<span></span>
</header>
<p>Proin nibh nisl condimentum id venenatis a condimentum vitae. Nibh nisl condimentum id venenatis. Facilisis volutpat est velit egestas dui id ornare. Turpis in eu mi bibendum. Felis bibendum ut tristique et egestas quis. Non curabitur gravida arcu ac tortor dignissim convallis aenean et. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim facilisis. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Consectetur lorem donec massa sapien faucibus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Amet nulla facilisi morbi tempus iaculis urna id. Sit amet nisl purus in mollis nunc. Accumsan tortor posuere ac ut. Nibh cras pulvinar mattis nunc sed.</p>
</div>
</section>
</article>
</section>
The Step by Step pattern creates a paginated experience that guides users through a process such as a guide for a public benefit program. The steps are outlined using a Side Navigation and the process is described in the body of the step content region.
The nav element must have a unique aria-label attribute to help screen readers distinguish it from other nav elements. Recommendations for the label from the USWDS include “On this page,” “In this article,” or “Table of contents.”
Global Script
The Step by Step requires JavaScript for pagination, toggling steps, browser history storage, and accessibility. To initialize the Step by Step instance from the global script use the following code:
<script src="https://cdn.jsdelivr.net/gh/nycopportunity/standard@v0.0.19/dist/js/default.js"></script> <script> var Standard = new Default(); Standard.stepByStep(); </script>
This function will attach the main pagination event to the body of the document.
Module Import
For module imports, import the Step by Step module from the source. The Toggle Utility source exists in the Patterns Scripts utility library, which is a dependency of this library.
import Disclaimer from '@nycopportunity/standard/src/objects/step-by-step/step-by-step'; new StepByStep();