# 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 class: `.hs-leader`
- CSS: `components/leader.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: built, open to change
- Decision record: https://brand.honorsociety.org/decisions/components-round-3.html
- Variants: Leader profile, No photo
- HTML page: https://brand.honorsociety.org/components/leader/

## What it is

One person in the society’s leadership. Built: A, 4:5 portrait beside the bio ([round 3](/decisions/components-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](/components/member-card/).
- A member’s own page: use the [Recognition plate](/components/plate/).
- A team of three or more leaders that link to bio pages: a media [Card](/components/card/) is the planned form.
- A short statement from a person: use the [Quote](/components/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.

```html
<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.

```html
<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>
```