1. Component Guide
  2. Inverse header
  3. For full page width
Inverse header example

For full page width

Used when the header covers the full width of the page, but it’s content is in the grid layout. The left-right padding is removed to make the contents line up with the other items on the page.

How it looks (preview)

Education, Training and Skills

How to call this example

<%= render "govuk_publishing_components/components/inverse_header", {
  full_width: true
} do %>
  <div class="gem-c-title gem-c-title--inverse">
  <h1 class="gem-c-title__text govuk-heading-l">
    Education, Training and Skills
  </h1>
</div>
<% end %>