Step by step navigation header example

With margin bottom

The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale. It defaults to having a margin bottom of 30px.

How it looks (preview)

How to call this example

<%= render "govuk_publishing_components/components/step_by_step_nav_header", {
  title: "Learn to practice flexible spacing: step by step",
  margin_bottom: 9
} %>

With margin bottom

How it looks (preview)

Part of Learn to practice flexible spacing: step by step

How to call this example