Site overview

A site overview is a table of contents for a group of pages: a heading, a few lines of explanation and a grid of links, each with an icon, a title and a description. The front page of this documentation is built from five of them.

Use it as a landing page for a section of a site, where visitors choose where to go next. For the navigation that stays on every page, use a navbar or a sidebar.

Give a wrapper the class site-overview. Inside it go a heading, an optional explainer and a list of links. Each link holds an icon, a title and a description.

<div class="site-overview">
  <h2>Lending</h2>

  <div class="explainer">
    <p>Everything about borrowing from the library.</p>
  </div>

  <ul>
    <li>
      <a href="...">
        <svg class="icon"><use xlink:href="/images/icons.svg#book"></use></svg>
        <div class="title">Loans</div>
        <div class="description">What is out, and when it is due back.</div>
      </a>
    </li>
    ...
  </ul>
</div>

Keep the whole link meaningful: the icon, the title and the description are one link, so a screen reader reads them together. Keep descriptions short, and leave the icon without a text of its own.

Add a color class to tint the heading, the icons and the link that has focus: yellow, red, blue, green, orange, purple or gray. Without a color class the heading is blue and the icons are muted.

<div class="site-overview green">
  ...
</div>

A color class only sets custom properties. Set them yourself for a color that is not in the list.

.site-overview.brand {
  --nausikaa-so-header: #b5179e;
  --nausikaa-so-icon: #f72585;
}