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 %>
  <!-- example content -->
  <%= render "govuk_publishing_components/components/heading", {
    text: "Education, Training and Skills",
    font_size: "xl",
    inverse: true,
    padding: true,
  } %>
  <!-- end of example content -->
<% end %>