1. Component Guide
  2. Inverse header
  3. Html publication header
Inverse header example

Html publication header

The inverse header component is used on HTML publications. See example on GOV.UK here

How it looks (preview)

Notice

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

Published 22 April 2016

How to call this example

<%= 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 govuk-caption-m">Notice</p>
  <h1 class="gem-c-title__text govuk-heading-l">
    LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application
  </h1>
</div>
<p class="publication-header__last-changed">Published 22 April 2016</p>
<% end %>