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."
        }
      ]
    }
  ]
} %>