<div class="personal-profile-info-card">
<div class="personal-profile-info-card__media">
<img src="../../img/faculty-bio-photo_fpo.jpg" alt="" loading="lazy" width="450" height="450">
</div>
<div class="personal-profile-info-card__content">
<h1 class="personal-profile-info-card__name">FirstName LastName</h1>
<ul class="personal-profile-info-card__titles">
<li>
Medium Title 1 Lorem Ipsum Dolor Sit Amet
</li>
<li>
Short Title 2 Lorem
</li>
<li>
Long Title 3 Lorem Ipsum Dolor Sit Amet, Consecteteur Lorem Ipsum Dolor Sit Amet
</li>
</ul>
<div class="link-set">
<ul>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Department/Unit Name Lorem Ipsum<span class="arrow"></span></a>
</li>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Department/Unit Name Lorem Ipsum Dolor Sit Amet<span class="arrow"></span></a>
</li>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-external">External Link Name Lorem Ipsum<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
<div class="personal-profile-info-card__contact-box">
<h2>Contact</h2>
<div class="personal-profile-info-card__contact-box-columns-wrap">
<div class="personal-profile-info-card__contact-box-column">
<p><a href="mailto:smryan@iastate.edu">smryan@iastate.edu</a></p>
<p>(515) 294-4347</p>
</div>
<div class="personal-profile-info-card__contact-box-column">
<p>3017 Black Engr.<br> 2529 Union Dr.<br> Ames, IA 50011-2030</p>
</div>
</div>
<ul class="personal-profile-info-card__contact-box-social">
<li>
<a href="#" target="_blank">
<i class="fak fa-iastate22-instagram" aria-hidden="true"></i>
<span class="visible-for-screen-readers">Instagram</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa-brands fa-youtube" aria-hidden="true"></i>
<span class="visible-for-screen-readers">YouTube</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa-brands fa-facebook-f" aria-hidden="true"></i>
<span class="visible-for-screen-readers">Facebook</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa-brands fa-twitter" aria-hidden="true"></i>
<span class="visible-for-screen-readers">Twitter</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa-brands fa-linkedin-in" aria-hidden="true"></i>
<span class="visible-for-screen-readers">LinkedIn</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fak fa-iastate22-flickr" aria-hidden="true"></i>
<span class="visible-for-screen-readers">Flickr</span>
</a>
</li>
</ul>
</div>
</div>
<div class="personal-profile-info-card{% if not image %} personal-profile-info-card--no-image{% endif %}">
{% if image %}
<div class="personal-profile-info-card__media">
<img src="{{ image }}" alt="" loading="lazy" width="450" height="450">
</div>
{% endif %}
<div class="personal-profile-info-card__content">
<h1 class="personal-profile-info-card__name">{{ name }}</h1>
{% if titles %}
<ul class="personal-profile-info-card__titles">
{% for title in titles %}
<li>
{{ title }}
</li>
{% endfor %}
</ul>
{% endif %}
{% if link_set %}
{% include "@link-set" with link_set %}
{% endif %}
</div>
<div class="personal-profile-info-card__contact-box">
<h2>{{ contact_box.label }}</h2>
<div class="personal-profile-info-card__contact-box-columns-wrap">
<div class="personal-profile-info-card__contact-box-column">
{% if contact_box.email %}<p><a href="mailto:{{ contact_box.email }}">{{ contact_box.email }}</a></p>{% endif %}
{% if contact_box.phone %}<p>{{ contact_box.phone }}</p>{% endif %}
</div>
<div class="personal-profile-info-card__contact-box-column">
{% if contact_box.address %}
<p>{{ contact_box.address.building }}<br>
{{ contact_box.address.street }}<br>
{{ contact_box.address.city_state_zip }}</p>
{% endif %}
</div>
</div>
{% if contact_box.social_links %}
<ul class="personal-profile-info-card__contact-box-social">
{% if contact_box.social_links.instagram %}
<li>
<a href="{{ contact_box.social_links.instagram }}" target="_blank">
<i class="fak fa-iastate22-instagram" aria-hidden="true"></i>
<span class="visible-for-screen-readers">Instagram</span>
</a>
</li>
{% endif %}
{% if contact_box.social_links.youtube %}
<li>
<a href="{{ contact_box.social_links.youtube }}" target="_blank">
<i class="fa-brands fa-youtube" aria-hidden="true"></i>
<span class="visible-for-screen-readers">YouTube</span>
</a>
</li>
{% endif %}
{% if contact_box.social_links.facebook %}
<li>
<a href="{{ contact_box.social_links.facebook }}" target="_blank">
<i class="fa-brands fa-facebook-f" aria-hidden="true"></i>
<span class="visible-for-screen-readers">Facebook</span>
</a>
</li>
{% endif %}
{% if contact_box.social_links.twitter %}
<li>
<a href="{{ contact_box.social_links.twitter }}" target="_blank">
<i class="fa-brands fa-twitter" aria-hidden="true"></i>
<span class="visible-for-screen-readers">Twitter</span>
</a>
</li>
{% endif %}
{% if contact_box.social_links.linkedin %}
<li>
<a href="{{ contact_box.social_links.linkedin }}" target="_blank">
<i class="fa-brands fa-linkedin-in" aria-hidden="true"></i>
<span class="visible-for-screen-readers">LinkedIn</span>
</a>
</li>
{% endif %}
{% if contact_box.social_links.flickr %}
<li>
<a href="{{ contact_box.social_links.flickr }}" target="_blank">
<i class="fak fa-iastate22-flickr" aria-hidden="true"></i>
<span class="visible-for-screen-readers">Flickr</span>
</a>
</li>
{% endif %}
</ul>
{% endif %}
</div>
</div>
{
"image": "../../img/faculty-bio-photo_fpo.jpg",
"name": "FirstName LastName",
"titles": [
"Medium Title 1 Lorem Ipsum Dolor Sit Amet",
"Short Title 2 Lorem",
"Long Title 3 Lorem Ipsum Dolor Sit Amet, Consecteteur Lorem Ipsum Dolor Sit Amet"
],
"link_set": {
"links": [
{
"url": "https://iastate.edu",
"text": "Department/Unit Name Lorem Ipsum",
"variant": "iastate22-link-secondary"
},
{
"url": "https://iastate.edu",
"text": "Department/Unit Name Lorem Ipsum Dolor Sit Amet",
"variant": "iastate22-link-secondary"
},
{
"url": "https://iastate.edu",
"text": "External Link Name Lorem Ipsum",
"variant": "iastate22-link-external"
}
]
},
"contact_box": {
"label": "Contact",
"email": "smryan@iastate.edu",
"phone": "(515) 294-4347",
"address": {
"building": "3017 Black Engr.",
"street": "2529 Union Dr.",
"city_state_zip": "Ames, IA 50011-2030"
},
"social_links": {
"instagram": "#",
"youtube": "#",
"facebook": "#",
"twitter": "#",
"linkedin": "#",
"flickr": "#"
}
}
}
.personal-profile-info-card_wrap {
margin-bottom: rem(50);
margin-top: rem(50);
@include media-breakpoint-up(xl) {
margin-left: rem(-158);
margin-right: rem(-268);
}
@include media-breakpoint-up(xxl) {
margin-left: rem(-108);
margin-right: rem(-215);
}
}
.personal-profile-info-card {
@include media-breakpoint-up(md) {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
}
.personal-profile-info-card__media {
@extend %responsive-img;
margin: 0 auto;
@include media-breakpoint-up(sm) {
max-width: rem(304);
}
@include media-breakpoint-up(md) {
flex: 0 0 auto;
width: rem(304);
margin-bottom: rem(34);
}
@include media-breakpoint-up(xl) {
margin-bottom: 0;
}
&:before {
padding-top: 100%;
}
}
.personal-profile-info-card__content {
padding: rem(38) 0;
@include media-breakpoint-up(md) {
flex: 1 1 0;
padding: 0 rem(38) rem(38) rem(38);
}
.personal-profile-info-card--no-image & {
padding-left: 0;
}
}
.personal-profile-info-card__name {
position: relative;
font-size: rem(30);
font-weight: 700;
padding-bottom: rem(20);
margin-top: rem(48);
margin-bottom: rem(22);
@extend %h2-yellow-border;
}
.personal-profile-info-card__titles {
margin-bottom: rem(30);
li {
margin-bottom: rem(12);
}
}
.personal-profile-info-card__contact-box {
background-color: $off-white;
margin: rem(20) 0 0;
padding: rem(38);
position: relative;
@include media-breakpoint-up(md) {
flex: 0 1 auto;
width: 100%;
margin: 0;
}
@include media-breakpoint-up(xl) {
padding: rem(50) rem(60);
flex: 0 0 auto;
width: rem(412);
}
&:before {
content: "";
border-bottom: rem(8) solid $iastate-gold;
top: rem(-4);
left: 50%;
margin-left: rem(-28);
width: rem(56);
height: rem(8);
position: absolute;
}
h2 {
@extend %h3;
padding-bottom: 0;
}
p {
font-weight: 700;
a {
color: $grey;
text-decoration-thickness: rem(1);
text-underline-offset: rem(1);
transition: 0.2s color ease-in-out;
&:hover {
color: $iastate-red;
}
}
}
}
.personal-profile-info-card__contact-box-columns-wrap {
@include media-breakpoint-up(md) {
display: flex;
justify-content: space-between;
align-items: flex-start;
max-width: rem(625);
}
@include media-breakpoint-up(xl) {
display: block;
max-width: none;
}
}
.personal-profile-info-card__contact-box-column {
padding-bottom: rem(14);
p {
@include media-breakpoint-up(md) {
margin: 0;
}
}
}
.personal-profile-info-card__contact-box-social {
display: flex;
flex-wrap: wrap;
li {
margin-right: rem(10);
a {
border-radius: 50%;
border: rem(2) solid $iastate-red;
display: inline-block;
width: rem(30);
height: rem(30);
display: flex;
align-items: center;
justify-content: center;
color: $iastate-red;
font-size: rem(13);
transition: 0.2s border-color ease-in-out, 0.2s color ease-in-out;
&:hover {
border-color: $iastate-maroon;
color: $iastate-maroon;
}
}
}
}
This is a custom component (no class prefix in place as it does not conflict with bootstrap)
index.scss file as @import "../components/personal-profile-info-card/personal-profile-info-card";