<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-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 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><!-- 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-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 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><!-- 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-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 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><!-- 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-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 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><!-- 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-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 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><!-- 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-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 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><!-- 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"
}
}
}
.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;
}
}
}
}
Display the grid section for people components.