Component

Inverse header

A wrapper to contain header content

This component can be passed a block of template code and will wrap it in a light blue header. Implemented to accommodate topic and list page headings but unopinionated about its contents.

If passing links to the block make sure to add the inverse link style, or in the case of the html publication header variant, the inverse modifier.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Education, Training and Skills

How to call this component

<%= render "govuk_publishing_components/components/inverse_header", {} do %>
  <!-- example content -->
  <%= render "govuk_publishing_components/components/heading", {
    text: "Education, Training and Skills",
    font_size: "xl",
    padding: true,
  } %>
  <!-- end of example content -->
<% end %>

Accessibility acceptance criteria

The component must:

  • be used in conjunction with content that renders a text contrast ratio higher than 4.5:1 against the header colour to meet WCAG AA.

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

  • id - accepts a string for the element ID attribute
  • data_attributes - accepts a hash of data attributes
  • aria - accepts a hash of aria attributes
  • classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
  • margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale
  • role - accepts a space separated string of roles
  • lang - accepts a language attribute value
  • open - accepts an open attribute value (true or false)
  • hidden - accepts an empty string, ‘hidden’, or ‘until-found’
  • tabindex - accepts an integer. The integer can also be passed as a string
  • dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
  • type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
  • rel - accepts any valid rel attribute e.g. ‘nofollow’
  • target - accepts a valid target attribute e.g. ‘_blank’
  • title - accepts any string
  • draggable - accepts a draggable attribute value (“true” or “false”)

With custom padding (preview)

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

Education, Training and Skills 

<%= 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",
    margin_bottom: 0
  } %>
  <!-- end of example content -->
<% end %>

For full page width (preview)

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.

Education, Training and Skills 

<%= 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",
    padding: true,
  } %>
  <!-- end of example content -->
<% end %>

Html publication header (preview)

The html publication header with a blue background is used on HTML publications and CSV previews. See example of a HTML publication on GOV.UK here, and an example of a CSV preview on GOV.UK here

Notice

LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application

Published 22 April 2016

<%= render "govuk_publishing_components/components/inverse_header", {
  html_publication_header: true
} do %>
  <!-- example content -->
  <%= render "govuk_publishing_components/components/heading", {
    text: "LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application",
    inverse: true,
    context: "Notice",
    padding: true,
    font_size: "xl"
  } %>
  <p class="publication-header__last-changed">Published 22 April 2016</p>
  <!-- end of example content -->
<% end %>

Html publication header with subtext (preview)

The white subtext can be used with the html publication header variant. We don’t currently support black subtext to be used with the default variant as it’s not in use on GOV.UK. If you need this please add it as a variant to the component.

Education, Training and Skills

This is some text

<%= render "govuk_publishing_components/components/inverse_header", {
  subtext: "This is some text",
  html_publication_header: true
} do %>
  <!-- example content -->
  <%= render "govuk_publishing_components/components/heading", {
    text: "Education, Training and Skills",
    inverse: true,
    margin_bottom: 0
  } %>
  <!-- end of example content -->
<% end %>