Recognition and people

Leader profile

One person in the society’s leadership: a 4:5 portrait beside the name, the role and the biography, or the text alone when no portrait exists.

Block: .hs-leader
CSS: components/leader.css (in /brand.css)
JS: None
Status: Built, open to change
Decided in: Components round 3
Markdown: /components/leader.md

What it is

One person in the society’s leadership. Built: A, 4:5 portrait beside the bio (round 3). Photo on top on a phone; a 15rem column from 48rem, 18rem from 62rem. --no-photo drops the media column when no portrait exists.

When to use

Use it on /society-leadership, one article per leader.
Use it when one person’s biography is the content of the band.

When not to use

A member in a directory: use the Member card.
A member’s own page: use the Recognition plate.
A team of three or more leaders that link to bio pages: a media Card is the planned form.
A short statement from a person: use the Quote.

Rules

Markup: <article class="hs-leader"> with img.hs-leader__photo first, then .hs-leader__body with .hs-leader__head (name, role), the bio in .hs-prose, then the routes.
Use h2 for the name when the band opens with it; otherwise h3, by the outline.
The photo is a 4:5 rectangle (width="400" height="500"), never a circle. House style keeps people photos rectangular.
Put no honor-gold rule under the name. Honor gold marks a member’s recognition, not a job title.
Routes: a .hs-link-list or one .hs-link, each with data-ph-capture-attribute-cta and data-ph-capture-attribute-cta-loc.
No portrait: add hs-leader--no-photo and leave out the img. Without the modifier, the body lands in the 15rem photo column from 48rem.
Never fill the photo’s place with initials, a silhouette or a stock image. The text alone is the calmer form. Switch to the photo form when a real portrait exists.
/society-leadership has no portrait today: it uses --no-photo.

Accessibility

Use <article aria-labelledby> that points to the name id.
The photo alt names the person, because the photo is the first thing in the article. --no-photo has no image, so the name heading opens the article.
Contrast: name navy 12.4:1; role slate 6.2:1; bio ink 13.0:1.
The photo takes loading="lazy".

Variants

Leader profile

The person is a fictional sample; real copy comes from /society-leadership. Use h2 for the name when the band opens with it.

Preview on white

Jordan Example

Chief Executive Officer

Jordan Example is a sample leader whose work has centered on helping students find information, connect with resources, and prepare for what comes next. As CEO, Jordan leads a sample membership organization serving students, graduates, and professionals.

Before this role, Jordan founded two sample companies. A graduate of Example State University, Jordan has also written a sample article series.

Example Business Review, 2010: named to a sample list of young entrepreneurs for work on a first company.
Sample Industry News, 2012: named a sample honoree as founder and CEO of a second company.

View Jordan’s Honor Society profile

<article class="hs-leader" aria-labelledby="leader-jordan">
  <img class="hs-leader__photo" src="/placeholders/portrait.svg" width="400" height="500" alt="Jordan Example" loading="lazy">
  <div class="hs-leader__body">
    <div class="hs-leader__head">
      <h3 class="hs-leader__name" id="leader-jordan">Jordan Example</h3>
      <p class="hs-leader__role">Chief Executive Officer</p>
    </div>
    <div class="hs-prose">
      <p>Jordan Example is a sample leader whose work has centered on helping students find information, connect with resources, and prepare for what comes next. As CEO, Jordan leads a sample membership organization serving students, graduates, and professionals.</p>
      <p>Before this role, Jordan founded two sample companies. A graduate of Example State University, Jordan has also written a sample article series.</p>
      <ul>
        <li><strong>Example Business Review, 2010:</strong> named to a sample list of young entrepreneurs for work on a first company.</li>
        <li><strong>Sample Industry News, 2012:</strong> named a sample honoree as founder and CEO of a second company.</li>
      </ul>
    </div>
    <ul class="hs-link-list">
      <li class="hs-link-list__item"><a class="hs-link-list__link" href="/members/jordan-example" data-ph-capture-attribute-cta="member-profile" data-ph-capture-attribute-cta-loc="leadership">View Jordan&rsquo;s Honor Society profile</a></li>
    </ul>
  </div>
</article>

No photo

--no-photo: no image and no media column. Use it until a real portrait exists; today /society-leadership has none.

Preview on white

Jordan Example

Chief Executive Officer

Before this role, Jordan founded two sample companies. A graduate of Example State University, Jordan has also written a sample article series.

View Jordan’s Honor Society profile

<article class="hs-leader hs-leader--no-photo" aria-labelledby="leader-jordan-text">
  <div class="hs-leader__body">
    <div class="hs-leader__head">
      <h3 class="hs-leader__name" id="leader-jordan-text">Jordan Example</h3>
      <p class="hs-leader__role">Chief Executive Officer</p>
    </div>
    <div class="hs-prose">
      <p>Jordan Example is a sample leader whose work has centered on helping students find information, connect with resources, and prepare for what comes next. As CEO, Jordan leads a sample membership organization serving students, graduates, and professionals.</p>
      <p>Before this role, Jordan founded two sample companies. A graduate of Example State University, Jordan has also written a sample article series.</p>
    </div>
    <ul class="hs-link-list">
      <li class="hs-link-list__item"><a class="hs-link-list__link" href="/members/jordan-example" data-ph-capture-attribute-cta="member-profile" data-ph-capture-attribute-cta-loc="leadership">View Jordan&rsquo;s Honor Society profile</a></li>
    </ul>
  </div>
</article>