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

Dated list

A list of links with a date or other detail under each. The shape of every news, events and articles page.

Show HTML
<ul class="ag-list ag-mb-0">
  <li class="ag-list__item">
    <a class="ag-list__link" href="#list-example">Minister named 2026 Gates Foundation Goalkeepers Champion</a>
    <span class="ag-list__meta"><time datetime="2026-09-18">18 September 2026</time></span>
  </li>
  <li class="ag-list__item">
    <a class="ag-list__link" href="#list-example">National Digital Cloud Policy launched</a>
    <span class="ag-list__meta"><time datetime="2026-08-17">17 August 2026</time> · Policy</span>
    <p class="ag-list__text">
      A single framework for how government data is stored, shared and protected in the cloud.
    </p>
  </li>
  <li class="ag-list__item">
    <a class="ag-list__link" href="#list-example">ATU Conference of Plenipotentiaries concludes in Abuja</a>
    <span class="ag-list__meta"><time datetime="2026-07-25">25 July 2026</time></span>
  </li>
</ul>

With thumbnails

News and articles often have a photograph each. Add ag-list__item--media to the item and put the image in ag-list__media before the text, wrapped in ag-list__body. The image is decorative, alt="", because the headline is the link. Keep thumbnails to 240px wide and under 15 KB; a page of ten should cost less than one hero image.

Show HTML
<ul class="ag-list ag-mb-0">
  <li class="ag-list__item ag-list__item--media">
    <div class="ag-list__media">
      <img
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23c7d6e3'/%3E%3C/svg%3E"
        alt=""
        width="240"
        height="160"
        loading="lazy"
      />
    </div>
    <div class="ag-list__body">
      <a class="ag-list__link" href="#list-example">Inspection results published for every district</a>
      <span class="ag-list__meta"><time datetime="2026-09-18">18 September 2026</time></span>
    </div>
  </li>
  <li class="ag-list__item ag-list__item--media">
    <div class="ag-list__media">
      <img
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23d9e4ec'/%3E%3C/svg%3E"
        alt=""
        width="240"
        height="160"
        loading="lazy"
      />
    </div>
    <div class="ag-list__body">
      <a class="ag-list__link" href="#list-example">New treatment works opens in the north</a>
      <span class="ag-list__meta"><time datetime="2026-08-17">17 August 2026</time></span>
      <p class="ag-list__text">Clean water for 40,000 households, and the first of six planned this year.</p>
    </div>
  </li>
</ul>

How it works

  • Each item is the link, then the meta line. An optional one-line summary goes in ag-list__text.
  • Wrap dates in time with a datetime attribute, so tools and translations can read them.
  • Separate several meta facts with a middle dot, not a comma, so each reads as its own fact.
  • Six to ten items a page, then pagination.

Accessibility

  • The link text is the headline on its own. Do not add "Read more".
  • Rows are at least 48px tall, so the link is easy to tap even though it is inline.