Lehigh Clutch Style Guide

Profile Listing 

<div class="person_profile">
    <div class="profile-circle">
        <img src="/img/silhoutte.jpg" alt="silhoutte profile" />
    </div>
    <div class="person_profile_details">
        <h3 class="name">Full Name</h3>
        <h4 class="job_title">Job Title</h4>
        <div class="email"><a href="mailto:email@lehigh.edu">email@lehigh.edu</a></div>
        <div class="phone"><a href="tel:+1610-758-0000">610-758-0000</a></div>
    </div>
</div>
 
<div class="person_profile">
  {% include "@profile_image--circle" %}
  <div class="person_profile_details">
    <h3 class="name">{{ name }}</h3>
    <h4 class="job_title">{{ job_title }}</h4>
    <div class="email"><a href="mailto:{{ email }}">{{ email }}</a></div>
    <div class="phone"><a href="tel:+1{{ phone }}">{{ phone }}</a></div>
  </div>
</div>
 
{
  "profile_image": {
    "img": "/img/silhoutte.jpg",
    "imgAlt": "silhoutte profile"
  },
  "name": "Full Name",
  "job_title": "Job Title",
  "email": "email@lehigh.edu",
  "phone": "610-758-0000"
}
  • Content: 
    .person_profile {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  .profile-circle {
    margin: 0 $spacer 0 0;
    height: 125px;
    width: 125px;

    img {
      height: unset;
      width: unset;
    }
  }

  &_details {
    .name {
      font-size: 1.25rem;
      font-weight: bold;
      color: $grey_darkest;
      margin: 0 0 $space_one_quarter 0;

      .color-scheme-dark & {
        color: $white;
      }
    }

    .job_title {
      font-weight: normal;
      font-size: 1rem;
      font-style: italic;
      margin: 0 0 $space_one_quarter 0;
    }
  }
}
  • URL: /components/raw/profile_listing/profile_listing.scss
  • Filesystem Path: bits/04-components/_profile_listing/profile_listing.scss
  • Size: 585 Bytes

No notes defined.