1. Collections Component Guide
  2. Inverse header
  3. With breadcrumbs and paragraph
Inverse header example

With breadcrumbs and paragraph

How it looks (preview)

Education, Training and Skills

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 " data-module="gem-track-click">
  <ol>
    <li class="">
        <a data-track-category="breadcrumbClicked" data-track-action="1" data-track-label="/section" data-track-options="{&quot;dimension28&quot;:&quot;2&quot;,&quot;dimension29&quot;:&quot;Section&quot;}" class="gem-c-breadcrumbs--inverse" aria-current="false" href="/section">Section</a>
    </li>
    <li class="">
        <a data-track-category="breadcrumbClicked" data-track-action="2" data-track-label="#content" data-track-options="{&quot;dimension28&quot;:&quot;2&quot;,&quot;dimension29&quot;:&quot;Education of disadvantaged children&quot;}" class="gem-c-breadcrumbs--inverse gem-c-breadcrumbs--current " aria-current="page" href="#content">Education of disadvantaged children</a>
    </li>
  </ol>
</div>
<div class="gem-c-title gem-c-title--inverse">
  <h1 class="gem-c-title__text ">
    Education, Training and Skills
  </h1>
</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 %>