Avatar and logo

A person and an organisation. Four sizes each, initials when there is no photograph, and logos contained rather than cropped.

Avatar

Four sizes, plus initials

HTML

<div style="display:flex;align-items:flex-end;gap:var(--p234-space-5)">
  <img class="p234-avatar p234-avatar--sm" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 88'%3E%3Crect width='88' height='88' fill='%23c9c3b8'/%3E%3C/svg%3E" alt="" width="88" height="88">
  <img class="p234-avatar" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 88'%3E%3Crect width='88' height='88' fill='%23c9c3b8'/%3E%3C/svg%3E" alt="" width="88" height="88">
  <img class="p234-avatar p234-avatar--lg" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Crect width='160' height='160' fill='%23c9c3b8'/%3E%3C/svg%3E" alt="" width="160" height="160">
  <img class="p234-avatar p234-avatar--xl" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='%23c9c3b8'/%3E%3C/svg%3E" alt="" width="256" height="256">
  <span class="p234-avatar p234-avatar--initials" aria-hidden="true">AO</span>
</div>

In a member row

Senator for Yobe North

APC·Since 2023

HTML

<div style="display:flex;align-items:center;gap:var(--p234-space-4);max-width:26rem">
  <img class="p234-avatar" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 88'%3E%3Crect width='88' height='88' fill='%23c9c3b8'/%3E%3C/svg%3E" alt="" width="88" height="88">
  <div>
    <p style="font-family:var(--p234-type-ui-family);font-weight:600;margin:0">Senator for Yobe North</p>
    <p class="p234-meta" style="margin-top:2px"><span class="p234-results__party">APC</span><span class="p234-meta__dot">&middot;</span><span>Since 2023</span></p>
  </div>
</div>

Initials when there is no photograph

Many legislators have no picture on file, and newly elected members never do at first. Initials in the recessed grey are better than a generic silhouette repeated down a list of 360 people. Mark the initials aria-hidden: the name is right beside them.

Logo

Companies, teams and publishers. Logos are contained, never cropped, because a cropped logo is a different logo and some of these are trademarks.

Two sizes, in a row

UBA 38.50

HTML

<div style="display:flex;align-items:center;gap:var(--p234-space-4)">
  <img class="p234-logo" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23c9c3b8'/%3E%3C/svg%3E" alt="UBA" width="64" height="64">
  <span style="font-family:var(--p234-type-ui-family);font-weight:600">UBA</span>
  <span class="p234-directory__value" style="margin-left:auto">38.50</span>
</div>

Rules

Ask the image service for the drawn size, doubled for phones. A 44px avatar served as a full JPEG was 57KB; through the processor it is about 1.6KB.
Give an avatar an empty alt when the person's name is beside it, and a real one when it stands alone.
Mirror portraits into our own storage rather than hotlinking, which is already the practice for legislator photographs.

Do not crop a logo to a circle.
Do not put a coloured ring round an avatar to signal anything. Status goes in text.

Tokens this component reads

--p234-color-paper-sunk--p234-color-ink-muted--p234-radius-pill--p234-radius-sm--p234-type-ui-*