Steps

The shortcodes stepgroup and step can be used to display an ordered list of steps for users to follow. Use the number attribute for the step element to set the step number.

Steps are displayed as special labels for drawers. We recommend getting familiar with how to add drawers to your website before reading this section. Each individual step can be displayed as closed (default) or open.

Here’s an example implementation of content placed within steps.

Step 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida dignissim porta. Etiam sollicitudin mattis erat, vitae volutpat risus dictum et. Praesent nisi dolor, suscipit sed enim non, tincidunt auctor ex. Phasellus tempus augue dolor, ut porta justo ultrices pellentesque. Nam ut ante vitae nisl mollis aliquam. Nullam nec dolor sapien. Vestibulum tempor sapien non pretium varius. Fusce vulputate nibh nec mauris pellentesque posuere.

Step 2

Step 3

Stepgroup Attributes

The stepgroup shortcode has no attributes.

Step Attributes

Name	Possible Values	Required	Notes
number	a number	Yes	The step number

Code Samples

[stepgroup][step number="1"][drawer label="Do This First" open="true"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

[/drawer][/step][step number="2"][drawer label="Do This Next"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

[/drawer][/step][step number="3"][drawer label="Do This Last"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

[/drawer][/step][/stepgroup]