People

The people who lead an organisation: a portrait, a name and a role for each. A governing board, a management team, the ministers of a ministry.

When to use

On an About or leadership page, for three people or thirty. Group them under headings: the board, then management.

When not to use

For one person with a message, use the statement. For a staff directory with phone numbers and departments, use a table.

Dr Amina Bello

Director General
Mr Kofi Mensah

Deputy Director General, Operations
Ms Wanjiru Kamau

Director, Finance
Mr Ousmane Diallo

Director, Inspections

Show HTML

<ul class="ag-people ag-mb-0">
  <li class="ag-person">
    <img
      class="ag-person__photo"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' fill='%23c7d6e3'/%3E%3Ccircle cx='0.5' cy='0.38' r='0.17' fill='%23ffbf47'/%3E%3Cpath d='M0.18 1 C0.18 0.68 0.32 0.62 0.5 0.62 C0.68 0.62 0.82 0.68 0.82 1 Z' fill='%231f4e79'/%3E%3C/svg%3E"
      alt=""
      width="320"
      height="320"
      loading="lazy"
    />
    <h3 class="ag-person__name"><a href="#people-example">Dr Amina Bello</a></h3>
    <p class="ag-person__role">Director General</p>
  </li>
  <li class="ag-person">
    <img
      class="ag-person__photo"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' fill='%23d9e4ec'/%3E%3Ccircle cx='0.5' cy='0.38' r='0.17' fill='%231f4e79'/%3E%3Cpath d='M0.18 1 C0.18 0.68 0.32 0.62 0.5 0.62 C0.68 0.62 0.82 0.68 0.82 1 Z' fill='%23ffbf47'/%3E%3C/svg%3E"
      alt=""
      width="320"
      height="320"
      loading="lazy"
    />
    <h3 class="ag-person__name">Mr Kofi Mensah</h3>
    <p class="ag-person__role">Deputy Director General, Operations</p>
  </li>
  <li class="ag-person">
    <img
      class="ag-person__photo"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' fill='%23c7d6e3'/%3E%3Ccircle cx='0.5' cy='0.38' r='0.17' fill='%23ffbf47'/%3E%3Cpath d='M0.18 1 C0.18 0.68 0.32 0.62 0.5 0.62 C0.68 0.62 0.82 0.68 0.82 1 Z' fill='%231f4e79'/%3E%3C/svg%3E"
      alt=""
      width="320"
      height="320"
      loading="lazy"
    />
    <h3 class="ag-person__name">Ms Wanjiru Kamau</h3>
    <p class="ag-person__role">Director, Finance</p>
  </li>
  <li class="ag-person">
    <img
      class="ag-person__photo"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' fill='%23d9e4ec'/%3E%3Ccircle cx='0.5' cy='0.38' r='0.17' fill='%231f4e79'/%3E%3Cpath d='M0.18 1 C0.18 0.68 0.32 0.62 0.5 0.62 C0.68 0.62 0.82 0.68 0.82 1 Z' fill='%23ffbf47'/%3E%3C/svg%3E"
      alt=""
      width="320"
      height="320"
      loading="lazy"
    />
    <h3 class="ag-person__name">Mr Ousmane Diallo</h3>
    <p class="ag-person__role">Director, Inspections</p>
  </li>
</ul>

A fixed number per row

By default as many people as fit sit in a row. ag-people--2, ag-people--3, ag-people--4 and ag-people--6 fix the number. Every person is the same size whatever the number: two or three are the size they would be in four columns and sit in the middle of the page, so a chair and a chief executive above the members match them. Six are narrower and fill the row, from laptop width up.

Leadership

Dr Amina Bello

Chair
Mr Kofi Mensah

Director General

Members

Ms Wanjiru Kamau

Member
Mr Ousmane Diallo

Member
Dr Thabo Nkosi

Member
Mrs Fatou Sow

Member

Show HTML

<h3 class="ag-mt-0">Leadership</h3>
<ul class="ag-people ag-people--2">
  <li class="ag-person">
    <img
      class="ag-person__photo"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' fill='%23c7d6e3'/%3E%3Ccircle cx='0.5' cy='0.38' r='0.17' fill='%23ffbf47'/%3E%3Cpath d='M0.18 1 C0.18 0.68 0.32 0.62 0.5 0.62 C0.68 0.62 0.82 0.68 0.82 1 Z' fill='%231f4e79'/%3E%3C/svg%3E"
      alt=""
      width="320"
      height="320"
      loading="lazy"
    />
    <h4 class="ag-person__name">Dr Amina Bello</h4>
    <p class="ag-person__role">Chair</p>
  </li>
  <li class="ag-person">
    <img
      class="ag-person__photo"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' fill='%23d9e4ec'/%3E%3Ccircle cx='0.5' cy='0.38' r='0.17' fill='%231f4e79'/%3E%3Cpath d='M0.18 1 C0.18 0.68 0.32 0.62 0.5 0.62 C0.68 0.62 0.82 0.68 0.82 1 Z' fill='%23ffbf47'/%3E%3C/svg%3E"
      alt=""
      width="320"
      height="320"
      loading="lazy"
    />
    <h4 class="ag-person__name">Mr Kofi Mensah</h4>
    <p class="ag-person__role">Director General</p>
  </li>
</ul>
<h3>Members</h3>
<ul class="ag-people ag-people--4 ag-mb-0">
  <li class="ag-person">
    <img
      class="ag-person__photo"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' fill='%23c7d6e3'/%3E%3Ccircle cx='0.5' cy='0.38' r='0.17' fill='%23ffbf47'/%3E%3Cpath d='M0.18 1 C0.18 0.68 0.32 0.62 0.5 0.62 C0.68 0.62 0.82 0.68 0.82 1 Z' fill='%231f4e79'/%3E%3C/svg%3E"
      alt=""
      width="320"
      height="320"
      loading="lazy"
    />
    <h4 class="ag-person__name">Ms Wanjiru Kamau</h4>
    <p class="ag-person__role">Member</p>
  </li>
  <li class="ag-person">
    <img
      class="ag-person__photo"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' fill='%23d9e4ec'/%3E%3Ccircle cx='0.5' cy='0.38' r='0.17' fill='%231f4e79'/%3E%3Cpath d='M0.18 1 C0.18 0.68 0.32 0.62 0.5 0.62 C0.68 0.62 0.82 0.68 0.82 1 Z' fill='%23ffbf47'/%3E%3C/svg%3E"
      alt=""
      width="320"
      height="320"
      loading="lazy"
    />
    <h4 class="ag-person__name">Mr Ousmane Diallo</h4>
    <p class="ag-person__role">Member</p>
  </li>
  <li class="ag-person">
    <img
      class="ag-person__photo"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' fill='%23c7d6e3'/%3E%3Ccircle cx='0.5' cy='0.38' r='0.17' fill='%23ffbf47'/%3E%3Cpath d='M0.18 1 C0.18 0.68 0.32 0.62 0.5 0.62 C0.68 0.62 0.82 0.68 0.82 1 Z' fill='%231f4e79'/%3E%3C/svg%3E"
      alt=""
      width="320"
      height="320"
      loading="lazy"
    />
    <h4 class="ag-person__name">Dr Thabo Nkosi</h4>
    <p class="ag-person__role">Member</p>
  </li>
  <li class="ag-person">
    <img
      class="ag-person__photo"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' fill='%23d9e4ec'/%3E%3Ccircle cx='0.5' cy='0.38' r='0.17' fill='%231f4e79'/%3E%3Cpath d='M0.18 1 C0.18 0.68 0.32 0.62 0.5 0.62 C0.68 0.62 0.82 0.68 0.82 1 Z' fill='%23ffbf47'/%3E%3C/svg%3E"
      alt=""
      width="320"
      height="320"
      loading="lazy"
    />
    <h4 class="ag-person__name">Mrs Fatou Sow</h4>
    <p class="ag-person__role">Member</p>
  </li>
</ul>

Variant: rows

For a long list, each person takes one row, with a small round portrait at the start.

Dr Amina Bello

Chair
Mr Kofi Mensah

Member
Ms Wanjiru Kamau

Member

Show HTML

<ul class="ag-people ag-people--rows ag-mb-0">
  <li class="ag-person">
    <img
      class="ag-person__photo"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' fill='%23c7d6e3'/%3E%3Ccircle cx='0.5' cy='0.38' r='0.17' fill='%23ffbf47'/%3E%3Cpath d='M0.18 1 C0.18 0.68 0.32 0.62 0.5 0.62 C0.68 0.62 0.82 0.68 0.82 1 Z' fill='%231f4e79'/%3E%3C/svg%3E"
      alt=""
      width="128"
      height="128"
      loading="lazy"
    />
    <div>
      <h3 class="ag-person__name">Dr Amina Bello</h3>
      <p class="ag-person__role">Chair</p>
    </div>
  </li>
  <li class="ag-person">
    <img
      class="ag-person__photo"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' fill='%23d9e4ec'/%3E%3Ccircle cx='0.5' cy='0.38' r='0.17' fill='%231f4e79'/%3E%3Cpath d='M0.18 1 C0.18 0.68 0.32 0.62 0.5 0.62 C0.68 0.62 0.82 0.68 0.82 1 Z' fill='%23ffbf47'/%3E%3C/svg%3E"
      alt=""
      width="128"
      height="128"
      loading="lazy"
    />
    <div>
      <h3 class="ag-person__name">Mr Kofi Mensah</h3>
      <p class="ag-person__role">Member</p>
    </div>
  </li>
  <li class="ag-person">
    <img
      class="ag-person__photo"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' fill='%23c7d6e3'/%3E%3Ccircle cx='0.5' cy='0.38' r='0.17' fill='%23ffbf47'/%3E%3Cpath d='M0.18 1 C0.18 0.68 0.32 0.62 0.5 0.62 C0.68 0.62 0.82 0.68 0.82 1 Z' fill='%231f4e79'/%3E%3C/svg%3E"
      alt=""
      width="128"
      height="128"
      loading="lazy"
    />
    <div>
      <h3 class="ag-person__name">Ms Wanjiru Kamau</h3>
      <p class="ag-person__role">Member</p>
    </div>
  </li>
</ul>

How it works

A list, so a screen reader says how many people there are. One list for each group, under its own heading.
The portrait is square and cropped to fit. Use photographs taken the same way, with the face in the middle.
The name is a heading at the level the page needs. Make it a link only if the person has a page of their own.
Titles such as Dr, Hon. and Alhaji are part of the name. Write the role in full: "Deputy Director General, Operations", never an abbreviation.
If you have no photograph for some people, leave the portrait out for all of them and use the rows variant.

Accessibility

The portrait's alt is empty, because the name is beside it. A screen reader would otherwise say every name twice.
The role is real text under the name, never part of the image.