Lehigh Clutch Style Guide

Profile Section 

<div class="person-top-wrapper row">
    <div class="col-md-3">
        <div class="profile_component">
            <div class="profile-square">
                <img src="/img/silhoutte.jpg" alt="silhoutte profile" />
            </div>
            <div class="profile-details">
                <h3>Person Name</h3>

                <div class="person-email">
                    <span class="fas fa-envelope"><span class="sr-only">Email address:</span></span> <a href="mailto:email@lehigh.edu">email@lehigh.edu</a>
                </div><!-- end person-email -->

                <div class="person-titles">
                    <div class="person-position">
                        <div class="profile_component--profile_title">Position Title</div>
                        <div class="positions">
                            <div class="position_details">
                                <div><span class="fas fa-map-marker-alt"><span class="sr-only">Location:</span></span> Location</div>
                            </div>
                            <div class="position_details">
                                <div><span class="fas fa-phone"><span class="sr-only">Phone number:</span></span> x0000</div>
                            </div>
                            <div class="position_details">
                                <span class="far fa-sitemap"><span class="sr-only">Member of:</span></span> Community Service Office
                            </div>
                            <div class="position_details">
                                <span class="far fa-sitemap"><span class="sr-only">Member of:</span></span> ERAC
                            </div>

                        </div><!-- end positions -->
                    </div><!-- end person-positions -->
                </div><!-- end person-titles -->
            </div><!-- end person-details -->
        </div><!-- end person-profile -->
    </div>
    <div class="col-md-8">
        <p>More information about this user can go here. It will wrap around the component if this gets long enough.</p>
    </div>
</div>
 
<div class="person-top-wrapper row">
  <div class="col-md-3">
    {% block profile_component %}
    {% include "@profile_component" with profile_component %}
    {% endblock profile_component %}
  </div>
  <div class="col-md-8">
    {% block more_information %}{{ more_information }}{% endblock more_information %}
  </div>
</div>
 
{
  "more_information": "<p>More information about this user can go here. It will wrap around the component if this gets long enough.</p>",
  "profile_component": {
    "name": "Person Name",
    "profile_image": {
      "img": "/img/silhoutte.jpg",
      "imgAlt": "silhoutte profile"
    },
    "email": "email@lehigh.edu",
    "credentials": "Credentials",
    "title": [
      "Position Title"
    ],
    "location": "Location",
    "phone": "x0000",
    "member": [
      "Community Service Office",
      "ERAC"
    ]
  }
}
  • Content: 
    .person-top-wrapper {
  margin: 0 0 $spacer 0;

  .fas,
  .far,
  .fal,
  .fad {
    width: 25px;
  }

  .profile_pic_name {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 0 $space_three $spacer 0;

    .profile-square {
      height: 150px;
      width: 150px;
      margin: 0 $spacer 0 0;
    }
  }
}

.right-content {
  .profile_pic_name {
    .person {
      img {
        max-width: 100px;
      }
    }

    .person_info {
      margin: $spacer 0;
      width: 100%;

      a {
        word-wrap: break-word;
        font-size: .875rem;
        margin: 0 $space_neg_one;
      }
    }
  }

  .person-position {
    h3 {
      font-size: 1.25rem;
    }
  }
}
  • URL: /components/raw/profile_section/profile_section.scss
  • Filesystem Path: bits/05-sections/profile_section/profile_section.scss
  • Size: 696 Bytes

Display profile section that provides details for title, location and contact information for the person.