Lehigh Clutch Style Guide

People Grid 

<section class="people-grid ">
    <div class="profile_component">
        <div class="profile-square">
            <img src="/img/silhoutte.jpg" alt="silhoutte profile" />
        </div>
        <div class="profile-details">
            <h3>Staff Member 1</h3>

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

                    </div><!-- end positions -->
                </div><!-- end person-positions -->
            </div><!-- end person-titles -->
        </div><!-- end person-details -->
    </div><!-- end person-profile -->
    <div class="profile_component">
        <div class="profile-square">
            <img src="/img/silhoutte.jpg" alt="silhoutte profile" />
        </div>
        <div class="profile-details">
            <h3>Staff Member 2</h3>

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

                    </div><!-- end positions -->
                </div><!-- end person-positions -->
            </div><!-- end person-titles -->
        </div><!-- end person-details -->
    </div><!-- end person-profile -->
    <div class="profile_component">
        <div class="profile-square">
            <img src="/img/silhoutte.jpg" alt="silhoutte profile" />
        </div>
        <div class="profile-details">
            <h3>Staff Member 3</h3>

            <div class="person-titles">
                <div class="person-position">
                    <div class="profile_component--profile_title">Position Title Position 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="person-email">
                            <span class="fas fa-envelope">
                                <span class="sr-only">Email address:</span>
                            </span>
                            <a href="mailto:emailxx@lehigh.edu">emailxx@lehigh.edu</a>
                        </div>
                        <!-- end person-email -->

                    </div><!-- end positions -->
                </div><!-- end person-positions -->
            </div><!-- end person-titles -->
        </div><!-- end person-details -->
    </div><!-- end person-profile -->
    <div class="profile_component">
        <div class="profile-square">
            <img src="/img/silhoutte.jpg" alt="silhoutte profile" />
        </div>
        <div class="profile-details">
            <h3>Staff Member 4</h3>

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

                    </div><!-- end positions -->
                </div><!-- end person-positions -->
            </div><!-- end person-titles -->
        </div><!-- end person-details -->
    </div><!-- end person-profile -->
    <div class="profile_component">
        <div class="profile-square">
            <img src="/img/silhoutte.jpg" alt="silhoutte profile" />
        </div>
        <div class="profile-details">
            <h3>Staff Member 5</h3>

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

                    </div><!-- end positions -->
                </div><!-- end person-positions -->
            </div><!-- end person-titles -->
        </div><!-- end person-details -->
    </div><!-- end person-profile -->
    <div class="profile_component">
        <div class="profile-square">
            <img src="/img/silhoutte.jpg" alt="silhoutte profile" />
        </div>
        <div class="profile-details">
            <h3>Staff Member 6</h3>

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

                    </div><!-- end positions -->
                </div><!-- end person-positions -->
            </div><!-- end person-titles -->
        </div><!-- end person-details -->
    </div><!-- end person-profile -->
</section>
 
<section class="people-grid {{ list_style }}">
{% block cms_override %}
  {% for person in persons %}
    {% include "@profile_component" with person only %}
  {% endfor %}
{% endblock cms_override %}
</section>
 
{
  "persons": {
    "1": {
      "name": "Staff Member 1",
      "profile_image": {
        "img": "/img/silhoutte.jpg",
        "imgAlt": "silhoutte profile"
      },
      "email": "emailxx@lehigh.edu",
      "title": "Position Title",
      "location": "Location"
    },
    "2": {
      "name": "Staff Member 2",
      "profile_image": {
        "img": "/img/silhoutte.jpg",
        "imgAlt": "silhoutte profile"
      },
      "email": "emailxx@lehigh.edu",
      "title": "Position Title",
      "location": "Location"
    },
    "3": {
      "name": "Staff Member 3",
      "profile_image": {
        "img": "/img/silhoutte.jpg",
        "imgAlt": "silhoutte profile"
      },
      "email": "emailxx@lehigh.edu",
      "title": "Position Title Position Title Position Title",
      "location": "Location"
    },
    "4": {
      "name": "Staff Member 4",
      "profile_image": {
        "img": "/img/silhoutte.jpg",
        "imgAlt": "silhoutte profile"
      },
      "email": "emailxx@lehigh.edu",
      "title": "Position Title",
      "location": "Location"
    },
    "5": {
      "name": "Staff Member 5",
      "profile_image": {
        "img": "/img/silhoutte.jpg",
        "imgAlt": "silhoutte profile"
      },
      "email": "emailxx@lehigh.edu",
      "title": "Position Title",
      "location": "Location"
    },
    "6": {
      "name": "Staff Member 6",
      "profile_image": {
        "img": "/img/silhoutte.jpg",
        "imgAlt": "silhoutte profile"
      },
      "email": "emailxx@lehigh.edu",
      "title": "Position Title",
      "location": "Location"
    }
  }
}
  • Content: 
    .people-grid {
  &.grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2em;
    margin-top: $space_and_half;
    .person-profile {
      width: 300px;
      margin: unset;
      padding: 0;
    }
  }
  &.list {
    .profile_component {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 2em;
      .profile-details {
        max-width: calc(100% - 200px - 2em);
      }
    }
    .person-profile {
      padding: 0;
    }
  }
  &.list-legacy {
    .person-profile {
      padding: 0;
    }
  }

  .person-profile {
    h2 {
      font-size: 2rem;

      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);

        .color-scheme-dark & {
          color: $white;
          color: var(--white, $white);
          border-bottom: 2px solid $white;
          border-bottom: 2px solid var(--white, $white);
        }

        &:hover,
        &:focus {
          color: $hyperlink;
          color: var(--hyperlink, $hyperlink);

          .color-scheme-dark & {
            color: $hyperlink_darkmode;
            color: var(--hyperlink_darkmode, $hyperlink_darkmode);
          }
        }
      }
    }

    .person-details {
      flex-direction: column;
      .person-name {
        h3 {
          font-size: 1.25rem;
        }
      }

      .person-profile_left,
      .person-profile_right {
        flex: unset;
        max-width: unset;
      }
    }
  }
}
  • URL: /components/raw/people_grid/people_grid.scss
  • Filesystem Path: bits/05-sections/people_grid/people_grid.scss
  • Size: 1.6 KB

Display the grid section for people components.