Steps

Steps display a numbered list of tasks or instructions with a visual timeline connecting them.

Basic Steps

1. 1

   Create a new Grav project:

   BASHCopy

   bin/gpm install helios
   

2. 2

   Configure your site settings in user/config/site.yaml.

3. 3

   Start adding content to the user/pages directory.

[doc-steps]
[doc-step]
Create a new Grav project:
bin/gpm install helios
[/doc-step]
[doc-step]
Configure your site settings in `user/config/site.yaml`.
[/doc-step]
[doc-step]
Start adding content to the `user/pages` directory.
[/doc-step]
[/doc-steps]

Rich Content in Steps

Steps support full markdown including code blocks, lists, and more:

1. 1

   Install dependencies

   Choose your preferred package manager:

   BASHCopy

   npm install
   # or
   yarn install
   

2. 2

   Configure the theme

   Create or edit user/config/themes/helios.yaml:

   YAMLCopy

   appearance:
     mode: system
     color_preset: blue
   navigation:
     sidebar_width: 280
     toc_enabled: true
   

3. 3

   Create your first page

   Add a new file at user/pages/01.home/doc.md:

   MARKDOWNCopy

   ---
   title: Home
   ---
   
   # Welcome
   
   Your documentation starts here.
   

4. 4

   Build and preview

   Run the development server:

   BASHCopy

   bin/grav server
   

   Open http://localhost:8000 to see your site.

Use Cases

Steps work great for:

• Installation guides
• Tutorial walkthroughs
• Setup instructions
• Multi-part processes
• Onboarding flows

Styling

Steps automatically:

• Number each step sequentially
• Connect steps with a vertical timeline
• Highlight step numbers with your theme's primary color
• Support dark mode