<% content_for :title, step_by_step.title %>

<script type="application/ld+json">
  <%= raw step_by_step.structured_data.to_json %>
</script>

<% content_for :meta_tags do %>
  <meta name="description" content="<%= step_by_step.description %>">
<% end %>

<div class="grid-row">
  <div class="column-two-thirds">
    <%= render 'govuk_publishing_components/components/title',
        title: step_by_step.title,
        average_title_length: 'long',
        margin_bottom: 0 %>

    <div class="govuk-govspeak"><%= raw(step_by_step.introduction) %></div>
  </div>
</div>
<div class="grid-row">
  <div class="column-two-thirds">
    <%= render "govuk_publishing_components/components/step_by_step_nav", step_by_step.payload_for_component %>
  </div>
</div>

<% content_for :title, step_by_step.title %>

<script type="application/ld+json">
  <%= raw step_by_step.structured_data.to_json %>
</script>

<% content_for :meta_tags do %>
  <meta name="description" content="<%= step_by_step.description %>">
<% end %>

<div class="grid-row">
  <div class="column-two-thirds">
    <%= render 'govuk_publishing_components/components/title',
        title: step_by_step.title,
        average_title_length: 'long',
        margin_bottom: 4 %>

    <%= render "govuk_publishing_components/components/govspeak", {
    } do %>
      <%= raw(step_by_step.introduction) %>
    <% end %>
  </div>
</div>
<div class="grid-row">
  <div class="column-two-thirds">
    <%= render "govuk_publishing_components/components/step_by_step_nav", step_by_step.payload_for_component %>
  </div>
</div>

Increase padding between title and intro text by 30px
Increase padding between title and intro text by 30px

## Changes
- Changes margin_bottom to option 4 for page title which adds margin of $gutter
- Removes raw HTML for govuk-govspeak in favour of component.

### Note
- Changes will require new version of components
- GovSpeak component has additional styling such as larger text and margin bottom. However this makes the page more readable.

## What
The intro text and page title are currently jammed together on the step by step overview page e.g. https://www.gov.uk/report-treasure-step-by-step

We should increase the padding between the two.

## Why
One of our goals this quarter is to optimise the user-facing step by step pattern.

Ticket: https://trello.com/c/rybSrXTF/699-increase-padding-between-title-and-intro-text-by-30px
