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

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

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

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

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.16/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();