<div class="alumi-card">
<div class="alumni-card__image">
<div class="alumni-card__image-overlay"></div>
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/400?random=1" alt="featured image" width="320" height="400">
</figure>
</div>
<a href="#" class="alumni-card__text">
<h3 class="alumni-card__name">
Nick Offerman
</h3>
<p class="alumni-card__title">
Lecturer in Theater and Berlind Playwright-in-Residence at Princeton University
</p>
</a>
</div>
<div class="alumi-card">
<div class="alumni-card__image">
<div class="alumni-card__image-overlay"></div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
{{ imageMacros.create(card.image, 320, 400, background) }}
</div>
<a href="{{ card.url }}" class="alumni-card__text">
<h3 class="alumni-card__name">
{{ card.name }}
</h3>
<p class="alumni-card__title">
{{ card.title }}
</p>
</a>
</div>
{
"siteUnit": "theatre",
"departmentName": "Theatre",
"background": "dark",
"card": {
"name": "Nick Offerman",
"url": "#",
"image": {
"src": "https://picsum.photos/320/400?random=1",
"altText": "featured image"
},
"title": "Lecturer in Theater and Berlind Playwright-in-Residence at Princeton University"
}
}
.alumni-card
border-radius 8px
&__image
position relative
& img
border-radius 8px 8px 0 0
&__image-overlay
background-color illiniBlue
height 100%
mix-blend-mode lighten
position absolute 0
width 100%
&__text
border-radius 0 0 8px 8px
background-color illiniBlueDark
display block
padding 24px
text-align center
text-decoration none
&:focus
&:hover
background-color illiniOrange
.alumni-card__name
.alumni-card__title
color illiniBlue
&__name
@extends $primaryLead
color white
&__title
@extends $detail
color white
There are no notes for this item.