Statement
A message from the head of an organisation: their portrait beside a short text, their name and role, and a link to the full message. For a minister, a director general, a governor, a chair.
When to use
Once on a home page, under the hero, and on the About page with the full text. It is where the portrait belongs. Do not put the portrait in the hero; the hero is for the service.
When not to use
For quotations inside an article, which are ordinary paragraphs or inset text.
A message from the Director General
Every household should be able to count on clean water and know who to call when it stops. This year we are publishing our inspection results, district by district, so that you can hold us to that.
Dr Amina BelloDirector General, National Water Agency
Show HTML
<section class="ag-statement ag-mb-0" aria-labelledby="statement-example">
<figure class="ag-figure ag-statement__media">
<img
class="ag-figure__image"
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"
/>
</figure>
<div class="ag-statement__body">
<h2 class="ag-statement__title" id="statement-example">A message from the Director General</h2>
<p>
Every household should be able to count on clean water and know who to call when it stops. This year we are
publishing our inspection results, district by district, so that you can hold us to that.
</p>
<p class="ag-statement__by"><strong>Dr Amina Bello</strong>Director General, National Water Agency</p>
<p><a href="#statement-example">Read the full message</a></p>
</div>
</section>A placeholder drawing stands in for the portrait. The markup is the same.
Variant: the full message
On the About page, or a page of its own, the statement carries the whole message. Add
ag-statement--full for a larger portrait that keeps up with the longer text. Sign it off with the name
and role as before.
Message from the Director General
Every household should be able to count on clean water and know who to call when it stops. That is the whole of our job, and this year we are changing how we do it.
We are publishing our inspection results district by district, every quarter, so that you can see where the water is safe and where we still have work to do. Where it is not safe, we will say so and say when it will be.
None of this works without you. Report a broken pipe, a dry tap or a bill that does not add up, and we will answer within five working days.
Yours sincerely,
Dr Amina BelloDirector General, National Water Agency
Show HTML
<section class="ag-statement ag-statement--full ag-mb-0" aria-labelledby="statement-full-example">
<figure class="ag-figure ag-statement__media">
<img
class="ag-figure__image"
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="480"
height="480"
loading="lazy"
/>
</figure>
<div class="ag-statement__body">
<h2 class="ag-statement__title" id="statement-full-example">Message from the Director General</h2>
<p>
Every household should be able to count on clean water and know who to call when it stops. That is the whole of
our job, and this year we are changing how we do it.
</p>
<p>
We are publishing our inspection results district by district, every quarter, so that you can see where the
water is safe and where we still have work to do. Where it is not safe, we will say so and say when it will be.
</p>
<p>
None of this works without you. Report a broken pipe, a dry tap or a bill that does not add up, and we will
answer within five working days.
</p>
<p>Yours sincerely,</p>
<p class="ag-statement__by"><strong>Dr Amina Bello</strong>Director General, National Water Agency</p>
</div>
</section>Variant: primary
ag-statement--primary sets the statement on the primary colour, for a home page where the message is the
main thing on the page.
A message from the Director General
Every household should be able to count on clean water and know who to call when it stops.
Dr Amina BelloDirector General, National Water Agency
Show HTML
<section class="ag-statement ag-statement--primary ag-mb-0" aria-labelledby="statement-primary-example">
<figure class="ag-figure ag-statement__media">
<img
class="ag-figure__image"
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"
/>
</figure>
<div class="ag-statement__body">
<h2 class="ag-statement__title" id="statement-primary-example">A message from the Director General</h2>
<p>Every household should be able to count on clean water and know who to call when it stops.</p>
<p class="ag-statement__by"><strong>Dr Amina Bello</strong>Director General, National Water Agency</p>
<p><a href="#statement-primary-example">Read the full message</a></p>
</div>
</section>How it works
-
The title names the role, not the person: "A message from the Minister". The name and role go under the text in
ag-statement__by, so screen reader users hear who is speaking after what was said, the way a signed letter reads. -
The portrait is decorative because the name is written beside it:
alt="". Square, 320px is enough, under 40 KB. - Keep the text to three sentences. The full message is a page of its own, linked at the end.
- On phones the portrait stacks above the text.
Accessibility
- The section is labelled by its title, so it is a landmark people can jump to.
- The name is in
strongon its own line; the role follows in muted text that still meets AA.