<div class="faculty-staff-feed-item">
<div class="faculty-staff-feed-item__media">
<div class="faculty-staff-feed-item__media-container">
<img class="faculty-staff-feed-item__media-image" src="../../img/emmanuel_agba.png" alt="test" loading="lazy">
</div>
</div>
<div class="faculty-staff-feed-item__content text-content">
<h2 class="faculty-staff-feed-item__content-name">Lorem ipsum</h2>
<p class="faculty-staff-feed-item__content-body">Sample Title.</p>
<p><a href="#" class="iastate22-link-secondary">About <span class="arrow"></span></a></p>
<ul class="faculty-staff-feed-item__content-contact">
<li>
<div class="faculty-staff-feed-item__content-icon"><a href="mailto:test@test.com"><i class="fak fa-iastate22-email"></i></a></div>
<div class="faculty-staff-feed-item__contact-field"><a href="mailto:test@test.com">test@test.com</a></div>
</li>
<li>
<div class="faculty-staff-feed-item__content-icon"><i class="fak fa-iastate22-phone"></i></div>
<div class="faculty-staff-feed-item__contact-field">(444) 444-4444</div>
</li>
<li>
<div class="faculty-staff-feed-item__content-key"><strong>Name:</strong></div>
<div class="faculty-staff-feed-item__contact-value">Lorem ipsum</div>
</li>
<li>
<div class="faculty-staff-feed-item__content-key"><strong>Name2:</strong></div>
<div class="faculty-staff-feed-item__contact-value"><a href='#'>Lorem ipsum</a></div>
</li>
<li>
<div class="faculty-staff-feed-item__content-key"><strong>Name3:</strong></div>
<div class="faculty-staff-feed-item__contact-value"><a href='#'>Lorem ipsum</a></div>
</li>
<li>
<div class="faculty-staff-feed-item__content-key"><strong>Name4:</strong></div>
<div class="faculty-staff-feed-item__contact-value">Lorem ipsum</div>
</li>
</ul>
</div>
</div>
<div class="faculty-staff-feed-item">
<div class="faculty-staff-feed-item__media">
<div class="faculty-staff-feed-item__media-container">
<img class="faculty-staff-feed-item__media-image" src="{{ image.src }}" alt="{{ image.alt }}" loading="lazy">
</div>
</div>
<div class="faculty-staff-feed-item__content text-content">
<h2 class="faculty-staff-feed-item__content-name">{{ title }}</h2>
<p class="faculty-staff-feed-item__content-body">{{ body }}</p>
{% if url %}
<p><a href="{{ url }}" class="iastate22-link-secondary">About <span class="arrow"></span></a></p>
{% endif %}
<ul class="faculty-staff-feed-item__content-contact">
{% if email %}
<li>
<div class="faculty-staff-feed-item__content-icon"><a href="mailto:{{ email }}"><i class="fak fa-iastate22-email"></i></a></div>
<div class="faculty-staff-feed-item__contact-field"><a href="mailto:{{ email }}">{{ email }}</a></div>
</li>
{% endif %}
{% if phone %}
<li>
<div class="faculty-staff-feed-item__content-icon"><i class="fak fa-iastate22-phone"></i></div>
<div class="faculty-staff-feed-item__contact-field">{{ phone }}</div>
</li>
{% endif %}
{% for fact in facts %}
<li>
<div class="faculty-staff-feed-item__content-key"><strong>{{ fact.key }}:</strong></div>
<div class="faculty-staff-feed-item__contact-value">{{ fact.value|raw }}</div>
</li>
{% endfor %}
</ul>
</div>
</div>
{
"image": {
"src": "../../img/emmanuel_agba.png",
"alt": "test"
},
"url": "#",
"title": "Lorem ipsum",
"body": "Sample Title.",
"email": "test@test.com",
"phone": "(444) 444-4444",
"facts": [
{
"key": "Name",
"value": "Lorem ipsum"
},
{
"key": "Name2",
"value": "<a href='#'>Lorem ipsum</a>"
},
{
"key": "Name3",
"value": "<a href='#'>Lorem ipsum</a>"
},
{
"key": "Name4",
"value": "Lorem ipsum"
}
]
}
.faculty-staff-feed-item {
display: flex;
flex-direction: column;
gap: rem(20);
@include media-breakpoint-up(lg) {
flex-direction: row;
gap: rem(80);
}
@include media-breakpoint-up(xl) {
margin-right: rem(-50);
}
.faculty-staff-feed-item__media {
.faculty-staff-feed-item__media-container {
@extend %responsive-img;
position: relative;
width: rem(325);
img.faculty-staff-feed-item__media-image {
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
position: absolute;
display: block;
top: 0;
left: 0;
}
&:before {
padding-top: 100%;
}
}
}
.faculty-staff-feed-item__content {
margin: auto 0;
width: 100%;
.faculty-staff-feed-item__content-contact {
min-height: rem(200);
padding-left: 0;
padding-right: 0;
display: block;
@include media-breakpoint-up(sm) {
height: rem(200);
display: flex;
flex-flow: column wrap;
gap: rem(10);
}
li {
color: $iastate-maroon;
margin: 0;
font-weight: 700;
width: 100%;
display: flex;
@include media-breakpoint-up(sm) {
width: 50%;
}
.fa-iastate22-email,
.fa-iastate22-phone {
color: $iastate-maroon;
font-size: rem(30);
}
a {
color: $iastate-maroon;
}
.faculty-staff-feed-item__content-key {
font-weight: 700;
}
.faculty-staff-feed-item__contact-value,
.faculty-staff-feed-item__contact-field {
padding-left: rem(35);
}
&:before {
content: "";
padding: 0;
margin-top: rem(5);
}
}
}
}
}
There are no notes for this item.