1. Component Guide
  2. Inverse header
  3. With breadcrumbs and paragraph
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 %>
  <!-- example content -->
  <%= render "govuk_publishing_components/components/breadcrumbs", {
    collapse_on_mobile: true,
    breadcrumbs: [
      {
        title: "Section",
        url: "/section"
      },
      {
        title: "Education of disadvantaged children",
        url: "/section/sub-section"
      }
    ],
    inverse: true
  } %>
  <%= render "govuk_publishing_components/components/lead_paragraph", {
    text: "Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early years.",
    inverse: true
  } %>
  <!-- end of example content -->
<% end %>