Person

Component status:Ready

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

She/her/hers

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="#">First Name Middle Name Last Name, PhD</a>
  </div>

  <div class="bux-person__row">
    <div class="bux-person__details">
      <div class="sm-gray">She/her/hers</div>
      <div>Title One</div>
      <div>Title Two</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 href="mailto:name.#@osu.edu" class="bux-link" target="_blank">
            name.#@osu.edu
          </a></span
        >
      </div>
      <div class="bux-person__contact--row">
        <span class="icon-phone bux-person__contact--row__icon"></span>

        <span
          ><strong>Phone</strong>
          <a href="tel:+15551234567" class="bux-link" target="_blank">
            555-123-4567
          </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.1.0
Copyright (C) 2025 The Ohio State University
#}

{% for item in items %}
<div class="bux-person">

     <div class="bux-person__name"> 
         <a class="bux-text-link" 
             href="{{item.personLink}}">{{item.firstName}} {{item.middleName}} {{item.lastName}}{% if item.postNominal %}, {{item.postNominal}}{% endif %}</a>
     </div>

     <div class="bux-person__row">
         <div class="bux-person__details">
             <div class="sm-gray">{{ item.pronouns }}</div>
             {% for title in item['titles'] %}
             <div> {{ title }}</div>
             {% endfor %}
             <div class="uppercase-gray">{{ item.unitName }}</div>
        </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>

                 {% if contact.link %}
                <span><strong>{{ contact.title }}</strong> <a href="{{ contact.link }}" class="bux-link" target="_blank"> {{ contact.info }} </a></span>
                {% else %}
                 <span><strong>{{ contact.title }}</strong> {{ contact.info }}</span>
                 {% endif %}
             </div>
         {% endfor %}
         </div>
     </div>

    {% if item.image %}
     <div class="bux-person__image">
      {% set vars = {
        image_url: item.image,
        image_alt_text: item.image_alt_text,
      } %}
        {% include base_path ~ directory ~ bux ~ '/twig/image.twig' with vars %}
     </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.