name: Inverse header
description: A wrapper to contain header content in white text
body: |
  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 overridden where unwanted. Implemented to accommodate topic and list page headings and breadcrumbs but unopinionated about its contents.

  If passing links to the block make sure to add [the inverse modifier](https://design-system.service.gov.uk/styles/typography/#links-on-dark-backgrounds).

accessibility_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.

accessibility_excluded_rules:
  - skip-link # Examples of this component contain breadcrumbs, creating a reference to #content which is part of the layout
examples:
  default:
    data:
      block: |
        <div class="gem-c-title gem-c-title--inverse">
          <h1 class="gem-c-title__text govuk-heading-l">
            Education, Training and Skills
          </h1>
        </div>
  for_full_page_width:
    description: "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."
    data:
      full_width: true
      block: |
        <div class="gem-c-title gem-c-title--inverse">
          <h1 class="gem-c-title__text govuk-heading-l">
            Education, Training and Skills
          </h1>
        </div>
  html_publication_header:
    description: "The inverse header component is used on HTML publications. [See example on GOV.UK here](https://www.gov.uk/government/publications/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application-advertisement/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application)"
    data:
      block: |
        <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>
  with_breadcrumbs_and_paragraph:
    data:
      padding_top: false
      block: |
        <div class="gem-c-breadcrumbs govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile gem-c-breadcrumbs--inverse">
          <ol class="govuk-breadcrumbs__list">
            <li class="govuk-breadcrumbs__list-item">
              <a href="/section" class="govuk-breadcrumbs__link">Section</a>
            </li>
            <li class="govuk-breadcrumbs__list-item">
              <a href="/section/sub-section" class="govuk-breadcrumbs__link">Education of disadvantaged children</a>
            </li>
          </ol>
        </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>
  with_link:
    data:
      block: |
        <p class="gem-c-lead-paragraph gem-c-lead-paragraph--inverse">
          Schools and academies, further and higher education, apprenticeships and <a href="#other-skills" class="govuk-link govuk-link--inverse">other skills</a> training, student funding, early years.
        </p>