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 %>