Steps
steps renders a numbered vertical sequence for procedural documentation. It is useful when each step needs a heading and supporting Markdown, such as paragraphs, lists, callouts, or code blocks.
This page is a placeholder for the fuller shortcode reference. The shortcode already exists in layouts/shortcodes/steps.html; use it sparingly when an ordinary ordered list is not enough.
Example#
Prepare the page#
Decide whether the procedure needs headings, explanations, or examples under each step.
Add the shortcode#
Use percent delimiters so inner Markdown renders.
{{% steps %}}
### Step title
Step detail.
{{% /steps %}}Keep it procedural#
Use steps for ordered work. Use a normal list when the items are short.
Interface manifest
- Kind
- Shortcode
- Category
- Content
- Status
- Implemented
- Implementation
- Shortcode:
layouts/shortcodes/steps.htmlCSS:assets/css/site.css
Accessibility#
- Each step title remains a real heading.
- The visible number is generated with CSS counters and supports the visual scan pattern.
- Do not use the component for decorative lists. The order must matter.