Person

A Person component displays a person’s name, contact details, and optional headshot.

A person component can be used as a single element on a webpage or can be repeated to create a directory.

Examples

Default

First Name Middle Name Last Name, PhD

Title One

Title Two

Primary Unit Name

Email name.#@osu.edu

Phone 555-123-4567

<div class="bux-person">
  <div class="bux-person__name">
    <a class="bux-text-link" href="#" rel="noopener">
      <span class="bux-text-link__text">
        First Name Middle Name Last Name, PhD
      </span>
    </a>
  </div>
  <div class="bux-person__row">
    <div class="bux-person__details">
      <div>
        <span>Title One</span>
      </div>
      <div>
        <span>Title Two</span>
      </div>
      <div class="uppercase-gray">Primary Unit Name</div>
    </div>
    <div class="bux-person__contact">
      <div class="bux-person__contact--row">
        <span class="icon-envelope bux-person__contact--row__icon"></span>
        <span>
          <strong>Email</strong>

          <a
            class="bux-link bux-person__link"
            href="mailto:name.#@osu.edu"
            rel="noopener"
          >
            <span class="bux-link__text bux-person__link__text">
              name.#@osu.edu
            </span>
          </a>
        </span>
      </div>
      <div class="bux-person__contact--row">
        <span class="icon-phone bux-person__contact--row__icon"></span>
        <span>
          <strong>Phone</strong>

          <a
            class="bux-link bux-person__link"
            href="tel:+15551234567"
            rel="noopener"
          >
            <span class="bux-link__text bux-person__link__text">
              555-123-4567
            </span>
          </a>
        </span>
      </div>
    </div>
  </div>
  <div class="bux-person__image">
    <img
      class="bux-image"
      src="/images/placeholders/BUX-person-headshot.jpg"
      alt="Person headshot"
      height=""
      width=""
    />
  </div>
</div>

{#
Buckeye UX - version 1.5.1
Copyright (C) 2026 The Ohio State University
#}

{#

Person

Available Variables:
  - items:  Array of people: firstName, middleName, lastName, personLink, postNominal, image, image_alt_text, unitName, titles, contact_info.

This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.

Last Updated: 04-01-2026 12:05:58
#}

{% for item in items %}
  <div class="bux-person">
    <div class="bux-person__name">
      {% set person_details = item.firstName ~ ' ' ~ item.middleName ~ ' ' ~ item.lastName
        ~ (item.postNominal ? ', ' ~ item.postNominal : '')
      %}
      {% if item.personLink %}
        {% include '@bux/text-link/text-link.twig' with {
          text_link_url: item.personLink,
          text_link_text: person_details
        } %}
      {% else %}
        {{ person_details }}
      {% endif %}
    </div>
    <div class="bux-person__row">
      <div class="bux-person__details">
        {% for title in item['titles'] %}
          <div>
            <span>{{ title }}</span>
          </div>
        {% endfor %}
        {% if item.unitName is iterable %}
          {% for unitName in item.unitName %}
            <div class="uppercase-gray">
              {{ unitName }}
            </div>
          {% endfor %}
        {% else %}
          <div class="uppercase-gray">
            {{ item.unitName }}
          </div>
        {% endif %}
      </div>
      <div class="bux-person__contact">
        {% for contact in item['contact_info'] %}
          <div class="bux-person__contact--row">
            <span class="{{ contact.icon }} bux-person__contact--row__icon"></span>
            <span>
              <strong>{{ contact.title }}</strong>
              {% if contact.link %}
                {% include '@bux/link/link.twig' with {
                  base_class: 'bux-link bux-person__link',
                  link_text: contact.info,
                  link_url: contact.link,
                  show_underline: false
                } %}
              {% else %}
                {{ contact.info }}
              {% endif %}
            </span>
          </div>
        {% endfor %}
      </div>
    </div>
    {% if item.image %}
      <div class="bux-person__image">
        {% include '@bux/image/image.twig' with {
          image_url: item.image,
          image_alt_text: item.image_alt_text
        } %}
      </div>
    {% endif %}
  </div>
{% endfor %}

Usage

Dos

• Honorifics should be included with the first and last name, not within the title(s)
• Crop a headshot image closely to the face and neck, as shown in the example. If displaying multiple Person components on a webpage, ensure the crops among all headshots are consistent.

Don’ts

• If a headshot is not available, do not use a placeholder, such as a Buckeye Leaf or logo. Simply allow the headshot to not display. The placement to the right of the component is intentional to account for unavailable headshots.

Accessibility

• Email addresses and phone numbers should always be links.