BUX Component Development Platform

Person 

<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>
 
{% 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 '@image' with vars %}
     </div>
     {% endif %}
 </div>
 {% endfor %}
 
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
items:
  - firstName: First Name
    middleName: Middle Name
    lastName: Last Name
    personLink: '#'
    postNominal: PhD
    pronouns: She/her/hers
    image: /images/placeholders/BUX-person-headshot.jpg
    image_alt_text: Person headshot
    unitName: Primary Unit Name
    titles:
      - Title One
      - Title Two
    contact-info:
      - title: Email
        icon: icon-envelope
        link: mailto:name.#@osu.edu
        info: name.#@osu.edu
      - title: Phone
        icon: icon-phone
        info: 555-123-4567
        link: tel:+15551234567
  • Content: 
    .bux-person {
  position: relative;
  border-bottom: solid 3px $gray-light-90;
  padding-bottom: $sp-16;
  margin-top: $sp-16;
  display: flex;
  flex-direction: column;

  @include breakpoint(md) {
    display: block;
  }

  &__row {
    width: 80%;
    line-height: 1.75rem;
    order: 3;
  }

  &__name {
    width: 80%;
    order: 2;
    margin-bottom: 4px;
    .bux-text-link {
      font-size: $ts-20;
      font-weight: 700;
      &::after {
        font-size: $ts-20;
        position: relative;
      }
    }
  }

  &__details {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    @include breakpoint(md) {
      display: inline-block;
      width: 50%;
      vertical-align: text-top;
      margin-bottom: 0;
    }
  }

  &__contact {
    display: block;
    width: 100%;
    @include breakpoint(md) {
      display: inline-block;
      vertical-align: text-top;
      width: 30%;
    }

    &--row {
      display: flex;
      gap: 0.75rem;
      line-height: 2rem;
      align-items: flex-start;
      margin-bottom: $sp-8;

      span strong {
        margin-right: 4px;
      }

      &__icon {
        color: $scarlet;
        font-size: $ts-md;
        line-height: 0.7;
        margin-top: 4px;
      }
    }
  }

  &__image {
    max-width: 120px;
    display: block;
    position: relative;
    margin-bottom: 1rem;
    order: 1;
    @include breakpoint(md) {
      display: inline-block;
      position: absolute;
      top: 0;
      right: 0;
      margin-bottom: 0;
    }

    .bux-image {
      aspect-ratio: 1/1;
      object-fit: cover;
    }
  }

  &:last-child {
    border-bottom: none;
  }
}

.sm-gray {
  color: $gray-dark-40;
  font-size: $ts-sm;
}

.uppercase-gray {
  text-transform: uppercase;
  color: $gray-dark-40;
  font-size: $ts-sm;
}
  • URL: /components/raw/person/_person.scss
  • Filesystem Path: src/components/person/_person.scss
  • Size: 1.8 KB

No notes defined.