<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-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:email@lehigh.edu">email@lehigh.edu</a>
</div>
<!-- end person-email -->
<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"
]
}
}
.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;
}
}
}
Display profile section that provides details for title, location and contact information for the person.