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" />
  </div>
</div>

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

{% 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 base_path ~ directory ~ bux ~ '/twig/link.twig' with {
             base_class: 'bux-text-link',
             link_url: item.personLink,
             link_text: person_details,
             show_underline: false
         } %}
         {% 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 base_path ~ directory ~ bux ~ '/twig/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 base_path ~ directory ~ bux ~ '/twig/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.