Flag stripe

A thin line in the country's flag colours, taken from the pack. It tells a visitor whose site this is before they read a word.

When to use

Under the header, in place of its bottom border. That is the one place most sites need it. It can also sit above the footer or between two sections of a home page.

When not to use

More than twice on a page, or as a border around boxes and cards. One line is enough.

Under the header

National Water Agency The Government

Show HTML

<div class="ag-header ag-header--striped">
  <div class="ag-container ag-header__inner">
    <a class="ag-header__brand" href="#stripe-example">
      <span>
        <span class="ag-header__org">National Water Agency</span>
        <span class="ag-header__sub" data-docs-string="government">The Government</span>
      </span>
    </a>
    <nav class="ag-header__nav" aria-label="Stripe example">
      <ul class="ag-nav">
        <li><a class="ag-nav__link" href="#stripe-example" aria-current="page">Services</a></li>
        <li><a class="ag-nav__link" href="#stripe-example">News</a></li>
        <li><a class="ag-nav__link" href="#stripe-example">Contact</a></li>
      </ul>
    </nav>
  </div>
</div>

With the primary header

National Water Agency The Government

Show HTML

<div class="ag-header ag-header--primary ag-header--striped">
  <div class="ag-container ag-header__inner">
    <a class="ag-header__brand" href="#stripe-primary">
      <span>
        <span class="ag-header__org">National Water Agency</span>
        <span class="ag-header__sub" data-docs-string="government">The Government</span>
      </span>
    </a>
    <nav class="ag-header__nav" aria-label="Stripe example, primary">
      <ul class="ag-nav">
        <li><a class="ag-nav__link" href="#stripe-primary" aria-current="page">Services</a></li>
        <li><a class="ag-nav__link" href="#stripe-primary">News</a></li>
      </ul>
    </nav>
  </div>
</div>

On its own

Show HTML

<div class="ag-stripe" aria-hidden="true"></div>

Preview a country at the top of the page to see its colours.

How it works

ag-header--striped swaps the header's bottom border for the stripe. It works with every other header variant.
ag-stripe is the same line as an element of its own. Give it aria-hidden="true"; it has no content.
The colours are the pack's flag colours, in the order the pack lists them, in three equal parts. With no pack the line is the primary colour.
The stripe is the flag's colours and is not the flag. A flag with a white band, such as Nigeria's, shows as two coloured parts on a white page, which is correct.

Accessibility

The stripe is decoration. It carries no information that is not also in the banner and the header text.
Nothing is ever written on it, so the flag colours do not need to pass contrast against text.

Pack fields

flag, the list of colours. The same list paints the small flag in the banner.