Component

Inverse header

A wrapper to contain header content in white text

This component can be passed a block of template code and will wrap it in a blue header. This is as light-touch as possible and doesn’t attempt to deal with the margins and paddings of its content. White text is enforced on content and would need to be overriden where unwanted. Implemented to accomodate topic and list page headings and breadcrumbs but unopinionated about its contents.

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 %>
  <div class="gem-c-title gem-c-title--inverse">
  <h1 class="gem-c-title__text ">
    Education, Training and Skills
  </h1>
</div>
<% 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

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 %>
  <div class="gem-c-title gem-c-title--inverse">
  <h1 class="gem-c-title__text ">
    Education, Training and Skills
  </h1>
</div>
<% end %>

Html publication header (preview)

The inverse header component is used on HTMl publications. See example 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", {
} do %>
  <div class="gem-c-title gem-c-title--inverse gem-c-title--bottom-margin">
  <p class="gem-c-title__context">Notice</p>
  <h1 class="gem-c-title__text">
    LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application
  </h1>
</div>
<p class="publication-header__last-changed">Published 22 April 2016</p>
<% end %>

With breadcrumbs and paragraph (preview)

1. Section

Education, Training and Skills

Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early years.

<%= render "govuk_publishing_components/components/inverse_header", {
  padding_top: false
} do %>
  <div class="gem-c-breadcrumbs " data-module="gem-track-click">
  <ol>
    <li class="">
        <a data-track-category="breadcrumbClicked" data-track-action="1" data-track-label="/section" data-track-options="{&quot;dimension28&quot;:&quot;2&quot;,&quot;dimension29&quot;:&quot;Section&quot;}" class="gem-c-breadcrumbs--inverse" aria-current="false" href="/section">Section</a>
    </li>
    <li class="">
        <a data-track-category="breadcrumbClicked" data-track-action="2" data-track-label="#content" data-track-options="{&quot;dimension28&quot;:&quot;2&quot;,&quot;dimension29&quot;:&quot;Education of disadvantaged children&quot;}" class="gem-c-breadcrumbs--inverse gem-c-breadcrumbs--current " aria-current="page" href="#content">Education of disadvantaged children</a>
    </li>
  </ol>
</div>
<div class="gem-c-title gem-c-title--inverse">
  <h1 class="gem-c-title__text ">
    Education, Training and Skills
  </h1>
</div>
<p class="gem-c-lead-paragraph gem-c-lead-paragraph--inverse">
  Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early years.
</p>
<% end %>