<div class="profile_component">
              <div class="profile-square">
                  <img src="/img/silhoutte.jpg" alt="silhoutte profile" />
              </div>
              <div class="profile-details">
                  <h2>Homer Simpson</h2>

                  <div class="pronouns">
                      he/him/his
                  </div><!-- end pronouns -->

                  <div class="person-titles">
                      <div class="person-position">
                          <div class="profile_component--profile_title">Future CEO</div>
                          <div class="positions">
                              <div class="person-email">
                                  <span class="fas fa-envelope">
                                      <span class="sr-only">Email address:</span>
                                  </span>
                                  <a href="mailto:student227@lehigh.edu">student227@lehigh.edu</a>
                              </div>
                              <!-- end person-email -->

                              <div class="position_details">
                                  <span class="fas fa-graduation-cap"><span class="sr-only">Degree Path:</span></span> B.S. Psychology
                              </div>
                              <div class="position_details">
                                  <span class="fas fa-graduation-cap"><span class="sr-only">Degree Path:</span></span> M.S. Computer Science
                              </div>

                          </div><!-- end positions -->
                      </div><!-- end person-positions -->
                  </div><!-- end person-titles -->
              </div><!-- end person-details -->
          </div><!-- end person-profile -->
{% set heading_level = heading_level|default('h3') %}
{% if title is iterable %}
  {% set titles = title %}
{% else %}
  {% set titles = title is defined ? [title] : [] %}
{% endif %}
{% set websites = website is defined ? website : [] %}
{% if member is iterable %}
  {% set members = member %}
{% else %}
  {% set members = member is defined ? [member] : [] %}
{% endif %}
{% if degrees is not iterable %}
  {% set degrees = degrees is defined ? [degrees] : [] %}
{% endif %}
{% if phone is iterable %}
  {% set phones = phone %}
{% else %}
  {% set phones = phone ? [phone] : [] %}
{% endif %}
{% if fax is iterable %}
  {% set faxes = fax %}
{% else %}
  {% set faxes = fax ? [fax] : [] %}
{% endif %}
{% if location is iterable %}
  {% set locations = location %}
{% else %}
  {% set locations = location ? [location] : [] %}
{% endif %}
<div class="profile_component">
  {% block profile_image %}
  {% if profile_image %}
  {% include "@profile_image" %}
  {% endif %}
  {% endblock profile_image %}
  <div class="profile-details">
    {% block profile_name %}
    {% if name %}
      {% if name_link %}
      <{{ heading_level}}><a href="{{ name_link }}">{{ name }}</a></{{ heading_level}}>
      {% else %}
      <{{ heading_level}}>{{ name }}</{{ heading_level}}>
      {% endif %}
    {% endif %}
    {% endblock profile_name %}

    {% block pronouns %}
    {% if pronouns %}
    <div class="pronouns">
      {{ pronouns }}
    </div><!-- end pronouns -->
    {% endif %}
    {% endblock pronouns %}

    {% block person_positions %}
    <div class="person-titles">
      <div class="person-position">
        {% for title in titles %}
        <div class="profile_component--profile_title">{{ title }}</div>
        {% endfor %}
        <div class="positions">
          {% if additional_info %}
            <div class="position_details additional_info">{{ additional_info }}</div>
          {% endif %}
          {% for location in locations %}
          <div class="position_details">
            <div><span class="fas fa-map-marker-alt"><span class="sr-only">Location:</span></span> {{ location }}</div>
          </div>
          {% endfor %}
          {% block person_info %}
            {% if email %}
              <div class="person-email">
                <span class="fas fa-envelope">
                  <span class="sr-only">Email address:</span>
                </span>
                <a href="mailto:{{ email }}">{{ email }}</a>
              </div>
              <!-- end person-email -->
            {% endif %}
          {% endblock person_info %}

          {% for phone in phones %}
          <div class="position_details">
            <div><span class="fas fa-phone"><span class="sr-only">Phone number:</span></span> {{ phone }}</div>
          </div>
          {% endfor %}
          {% for fax in faxes %}
          <div class="position_details">
            <div><span class="fas fa-fax"><span class="sr-only">Fax number:</span></span> {{ fax }}</div>
          </div>
          {% endfor %}
          {% for website in websites %}
            <div class="position_details">
              <span class="far fa-link"><span class="sr-only">Website:</span></span> <a href="{{ website.url }}"> {% if website.title %}{{ website.title }}{% else %}{{ website.url }}{% endif %}</a>
            </div>
          {% endfor %}
          {% for member in members %}
            <div class="position_details">
              <span class="far fa-sitemap"><span class="sr-only">Member of:</span></span> {{ member }}
            </div>
          {% endfor %}
          {% for degree in degrees %}
          <div class="position_details">
            <span class="fas fa-graduation-cap"><span class="sr-only">Degree Path:</span></span> {{ degree }}
          </div>
          {% endfor %}
          {% if grad_year %}
            <div class="position_details">
              <span class="fas fa-user-graduate"><span class="sr-only">Graduation Year:</span></span>
              {{ grad_year }}
            </div>
          {% endif %}

        </div><!-- end positions -->
      </div><!-- end person-positions -->
    </div><!-- end person-titles -->
    {% endblock person_positions %}
  </div><!-- end person-details -->
</div><!-- end person-profile -->
{
  "profile_image": {
    "img": "/img/silhoutte.jpg",
    "imgAlt": "silhoutte profile"
  },
  "name": "Homer Simpson",
  "heading_level": "h2",
  "pronouns": "he/him/his",
  "email": "student227@lehigh.edu",
  "title": "Future CEO",
  "degrees": [
    "B.S. Psychology",
    "M.S. Computer Science"
  ]
}
  • Content:
    .right-content {
      .node--view-mode-person-teaser {
        margin: $spacer 0;
      }
    }
    
    .node--type-person {
      overflow: hidden;
    }
    
    .profile_component {
      margin: 0 0 $space_two 0;
    
      @include media-breakpoint-up(sm) {
        margin: 0 $space_two $space_two 0;
      }
    
      img {
        max-width: 100%;
        height: auto !important;
      }
    
      h2, h3 {
        a {
          font-weight: normal;
          color: $lehigh_brown;
          color: var(--lehigh_brown, $lehigh_brown);
          border-bottom: 2px solid $lehigh_brown;
          border-bottom: 2px solid var(--lehigh_brown, $lehigh_brown);
    
          .color-scheme-dark & {
            color: $lehigh_brown_darkmode;
            color: var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
            border-bottom: 2px solid $lehigh_brown_darkmode;
            border-bottom: 2px solid var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
          }
    
          &:hover,
          &:focus {
            color: $hyperlink;
            color: var(--hyperlink, $hyperlink);
    
            .color-scheme-dark & {
              color: $hyperlink_darkmode;
              color: var(--hyperlink_darkmode, $hyperlink_darkmode);
            }
          }
        }
        & + .person-titles > .person-position > .profile_component--profile_title {
          border-top: unset;
        }
      }
    
      .pronouns {
        font-style: italic;
      }
    
      .person-email {
        @extend %person-attribute;
    
        a {
          font-weight: normal;
    
          &:hover,
          &:focus {
            .color-scheme-dark & {
              color: $white;
              color: var(--white, $white);
            }
          }
    
          .extlink {
            display: none;
          }
        }
      }
    
      %person-attribute {
        border-top: 1px solid $grey_light;
        border-top: 1px solid var(--grey_light, $grey_light);
        margin: $space_one_half 0;
        padding: $space_one_half 0 0 0;
      }
    
      .position_details {
        @extend %person-attribute;
      }
    }
    
    .profile_component--profile_title {
      @extend %person-attribute;
      font-size: 1.25rem;
      line-height: 1.2;
      font-weight: 700;
    }
    
    .person_category {
      clear: both;
    }
    
    .right-content {
      .profile_pic_name {
        img {
          max-width: 75%;
        }
    
        .sidebar_information {
          h2 {
            font-size: 1.3rem;
    
            a {
              color: $base_font;
              color: var(--base_font, $base_font);
              border-bottom: 2px solid $base_font;
              border-bottom: 2px solid var(--base_font, $base_font);
    
              &:hover {
                color: $hyperlink;
                color: var(--hyperlink, $hyperlink);
              }
            }
          }
    
          .person-position {
            padding-right: 0;
            padding-left: 0;
            flex: unset;
            max-width: unset;
    
            h3 {
              font-size: 1.1rem;
            }
          }
        }
      }
    }
    
  • URL: /components/raw/profile_component/profile_component.scss
  • Filesystem Path: bits/04-components/profile_component/profile_component.scss
  • Size: 2.6 KB

No notes defined.