Inverse header example

With breadcrumbs and paragraph

How it looks (preview)

Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early years.

How to call this example

<%= render "govuk_publishing_components/components/inverse_header", {
  padding_top: false
} do %>
  <div class="gem-c-breadcrumbs govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile gem-c-breadcrumbs--inverse">
  <ol class="govuk-breadcrumbs__list">
    <li class="govuk-breadcrumbs__list-item">
      <a href="/section" class="govuk-breadcrumbs__link">Section</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a href="/section/sub-section" class="govuk-breadcrumbs__link">Education of disadvantaged children</a>
    </li>
  </ol>
</div>
<p class="gem-c-lead-paragraph gem-c-lead-paragraph--inverse">
  Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early years.
</p>
<% end %>