BUX Component Development Platform

Person 

<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>
 
{% 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 '@link' 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 '@link' 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 '@image' with {
            image_url: item.image,
            image_alt_text: item.image_alt_text,
        } %}
     </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
    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;
  min-height: 140px;

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

  &__row {
    width: 100%;
    line-height: 1.75rem;
    order: 3;
    @include breakpoint(md) {
      width: 80%;
    }
  }

  @mixin name-fonts {
    font-size: $ts-20;
    font-weight: 700;
  }

  &__name {
    @include name-fonts();
    width: 80%;
    order: 2;
    margin-bottom: 4px;
    .bux-text-link {
      @include name-fonts();
      &::after {
        font-size: $ts-20;
        position: relative;
      }
    }
  }

  &__details {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    padding-right: $sp-12;
    @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: 40%;
    }

    &--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;
      }

      .bux-person__link {
        @include link-base;
        border-bottom: none;
      }
    }
  }

  &__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: 2.1 KB

No notes defined.