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.
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.
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.
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.
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]