Skip to main content

afrigov is an open-source project. It is not a government website and is not affiliated with any government.

Previewing neutral core Change

afrigov Accessible government design system

Band

A full-width section with a background: tinted, in the primary colour, or dark. It is how two sites built from the same components stop looking the same.

When to use

On home pages and landing pages, to give one section weight: the services, a message, a call to act. One or two bands a page. A page that is all bands has none.

When not to use

On content pages and in forms. Long reading wants one quiet background.

Popular services

Show HTML
<div class="ag-band ag-band--tint ag-mb-0">
  <div class="ag-container">
    <h2 class="ag-mt-0">Popular services</h2>
    <ul class="ag-cards">
      <li class="ag-card">
        <h3 class="ag-card__title"><a class="ag-card__link" href="#band-example">Report a leak</a></h3>
        <p class="ag-card__text">Tell us where and we will send a crew.</p>
      </li>
      <li class="ag-card">
        <h3 class="ag-card__title"><a class="ag-card__link" href="#band-example">Check your water quality</a></h3>
        <p class="ag-card__text">Inspection results for your district.</p>
      </li>
      <li class="ag-card">
        <h3 class="ag-card__title"><a class="ag-card__link" href="#band-example">Pay a bill</a></h3>
        <p class="ag-card__text">By card, bank transfer or mobile money.</p>
      </li>
    </ul>
  </div>
</div>

Primary

Inspection results, every quarter

Where the water is safe, where it is not, and when it will be. Published district by district. See the latest results.

Find your district
Show HTML
<div class="ag-band ag-band--primary ag-mb-0">
  <div class="ag-container">
    <h2 class="ag-mt-0">Inspection results, every quarter</h2>
    <p class="ag-lead">
      Where the water is safe, where it is not, and when it will be. Published district by district.
      <a href="#band-example">See the latest results</a>.
    </p>
    <div class="ag-button-group"><a class="ag-button" href="#band-example">Find your district</a></div>
  </div>
</div>

Dark

Coming up

Report a dry tap

Call 0800 000 0000, free from any network, or report it online.

Show HTML
<div class="ag-band ag-band--dark ag-mb-0">
  <div class="ag-container">
    <h2 class="ag-mt-0">Coming up</h2>
    <ul class="ag-list">
      <li class="ag-list__item">
        <a class="ag-list__link" href="#band-dark">Water quality week</a>
        <span class="ag-list__meta">12 to 18 October</span>
      </li>
      <li class="ag-list__item">
        <a class="ag-list__link" href="#band-dark">Public hearing on the new tariff</a>
        <span class="ag-list__meta">4 November, Kumasi</span>
      </li>
    </ul>
    <h2>Report a dry tap</h2>
    <p>Call 0800 000 0000, free from any network, or <a href="#band-example">report it online</a>.</p>
  </div>
</div>

Accent

Water quality week, 12 to 18 October

Free testing at every district office. Bring a sample in a clean bottle.

Find your office How to take a sample
Show HTML
<div class="ag-band ag-band--accent ag-mb-0">
  <div class="ag-container">
    <h2 class="ag-mt-0">Water quality week, 12 to 18 October</h2>
    <p class="ag-lead">Free testing at every district office. Bring a sample in a clean bottle.</p>
    <div class="ag-button-group">
      <a class="ag-button" href="#band-accent">Find your office</a>
      <a class="ag-button ag-button--secondary" href="#band-accent">How to take a sample</a>
    </div>
  </div>
</div>

Preview a country at the top of the page. The accent is Ghana's gold, Kenya's red, Morocco's green.

How it works

  • The band spans the viewport, so it sits outside the page container. Put a ag-container inside it for the content.
  • On a page built from bands, add ag-main--flush to the main element. It removes the space at the top and bottom of the page, so the first band meets the header and the last meets the footer.
  • The accent band is the pack's second colour. The build chooses dark or white text for it, whichever is easier to read. Use it once on a page, for the thing that is happening now.
  • A secondary button on a coloured band is an outline in the band's text colour, so the main action is still the solid one.
  • A hero inside a band takes the band's spacing and colour, so a tinted or dark hero is a band with a hero in it.
  • On the primary and dark bands, text and links take the band's colour, and buttons invert so they still stand out.
  • The colours are the pack's: the primary band is the same green, blue or red as the header stripe, and the dark band is the footer's.

Accessibility

  • Text on the primary band uses the pack's on-primary colour, which the build checks for AA contrast against the primary. Dark is the footer pair, checked the same way.
  • Links on a coloured band stay underlined, so colour is never the only thing marking them.
  • Text on the accent band uses the pack's on-accent colour, which the build checks for AA contrast against the accent in every pack.