Inverse header example

With custom padding

Custom padding can be applied as shown, using the Design System spacing scale.

How it looks (preview)

Education, Training and Skills

How to call this example

<%= render "govuk_publishing_components/components/inverse_header", {
  padding_top: 6,
  padding_bottom: 1
} do %>
  <!-- example content -->
  <%= render "govuk_publishing_components/components/heading", {
    text: "Education, Training and Skills",
    inverse: true,
    margin_bottom: 0
  } %>
  <!-- end of example content -->
<% end %>