Step by step navigation example

Default

How it looks (preview)

1. Step 1: Do a thing

   This is a paragraph of text.

   This is also a paragraph of text that intentionally contains lots of words in order to fill the width of the page successfully to check layout and so forth.

2. and Do another thing

   Some more text.

3. Step 2: Do something else

   This is yet another paragraph.

How to call this example

<%= render "govuk_publishing_components/components/step_by_step_nav", {
  steps: [
    {
      title: "Do a thing",
      contents: [
        {
          type: "paragraph",
          text: "This is a paragraph of text."
        },
        {
          type: "paragraph",
          text: "This is also a paragraph of text that intentionally contains lots of words in order to fill the width of the page successfully to check layout and so forth."
        }
      ]
    },
    {
      title: "Do another thing",
      logic: "and",
      contents: [
        {
          type: "paragraph",
          text: "Some more text."
        }
      ]
    },
    {
      title: "Do something else",
      contents: [
        {
          type: "paragraph",
          text: "This is yet another paragraph."
        }
      ]
    }
  ]
} %>