<div class="az-profile">
<div class="az-profile-image">
<a href="">
<img src="/images/headshot@2x.png" alt="John Smith headshot" />
</a>
</div>
<div class="az-profile-info">
<h3><a href="">John Smith</a></h3>
<p>
Space Invader<br /> NASA<br /> <a href="mailto:jsmith@lehigh.edu">jsmith@lehigh.edu</a><br /> <a href="tel:+1-123-456-7890">123-456-7890</a> </p>
</div><!-- end az-profile-info -->
</div><!-- az-profile -->
<div class="az-profile">
<div class="az-profile-image">
<a href="{{ profile_url }}">
{% block cms_override_image %}
<img src="{{ img_src }}" alt="{{ name }} headshot" />
{% endblock cms_override_image %}
</a>
</div>
<div class="az-profile-info">
{% if name|remove_html_comments_as_string|trim %}<h3><a href="{{ profile_url }}">{{ name }}</a></h3>{% endif %}
<p>
{% block cms_override_details %}
{% if job_title %}{{ job_title }}<br />{% endif %}
{% if department %}{{ department }}<br />{% endif %}
{% if email %}<a href="mailto:{{ email|replace({' ': ''}) }}">{{ email }}</a><br />{% endif %}
{% if phone %}<a href="tel:+1-{{ phone|replace({' ': ''}) }}">{{ phone }}</a>{% endif %}
{% endblock cms_override_details %}
</p>
</div><!-- end az-profile-info -->
</div><!-- az-profile -->
{
"img_src": "/images/headshot@2x.png",
"name": "John Smith",
"job_title": "Space Invader",
"department": "NASA",
"email": "jsmith@lehigh.edu",
"phone": "123-456-7890"
}
.az-profile {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
&-image {
img {
border-radius: 100px;
height: 100px;
width: 100px;
max-width: inherit;
}
}
&-info {
margin: 0 0 0 $space;
color: $grey_darkest;
h3 {
color: $grey_dark;
font-size: 1.1rem;
font-weight: bold;
}
a {
color: $grey_darkest;
&:hover {
text-decoration: underline;
}
}
}
}
No notes defined.