Step by step navigation example

With a different heading level

Steps have a h2 by default, but this can be changed. The heading level does not change any styling.

How it looks (preview)

1. Step 1: This is a heading 3

   This is yet another paragraph.

2. Step 2: This is also a heading 3

   This is yet another paragraph.

How to call this example

<%= render "govuk_publishing_components/components/step_by_step_nav", {
  heading_level: 3,
  steps: [
    {
      title: "This is a heading 3",
      contents: [
        {
          type: "paragraph",
          text: "This is yet another paragraph."
        }
      ]
    },
    {
      title: "This is also a heading 3",
      contents: [
        {
          type: "paragraph",
          text: "This is yet another paragraph."
        }
      ]
    }
  ]
} %>