<div class="sidekick-section">
<div class="
college-home-section-template
college-home-section-template--cloudDark
college-home-section-template--right
">
<div class="college-home-section-template__semi-circle" data-college-circle></div>
<div class="college-home-section-template__container">
<div class="college-home-section-template__media">
<div class="college-home-section-template__media-wrap college-home-section-template__media--full-width">
<div class="sidekick-section__images">
<img class="sidekick-section__image" src="https://picsum.photos/412/560?random=1?image=1" alt="alt" width="822" height="840">
<img class="sidekick-section__image" src="https://picsum.photos/412/280?random=1?image=2" alt="alt" width="822" height="420">
<img class="sidekick-section__image" src="https://picsum.photos/412/280?random=1?image=3" alt="alt" width="822" height="420">
</div>
</div>
</div>
<div class="college-home-section-template__info">
<div class="college-home-section-template__info-wrap ">
<div class="sidekick-section__info">
<h2 class="sidekick-section__text">Morbin for 120 years in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in.</h2>
<div class="sidekick-section__cta">
<a href="https://google.com" class="standard-button standard-button--college standard-button--light
standard-button---width standard-button--primary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Button text</span><span class="standard-button__icon"><svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16"><path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/></svg></span></span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sidekick-section">
{% embed 'partials/homepages/college/section-template/section-template.twig' with {
backgroundColor: 'cloudDark',
circleColor: 'white',
leftToRight: true,
} %}
{% block media %}
<div class="sidekick-section__images">
<img class="sidekick-section__image" src="{{ sidekick.image1.src | towebp | resize(822, 840) }}"
alt="{{ sidekick.image1.altText | escape }}" width="822" height="840">
<img class="sidekick-section__image" src="{{ sidekick.image2.src | towebp | resize(822, 420) }}"
alt="{{ sidekick.image2.altText | escape }}" width="822" height="420">
<img class="sidekick-section__image" src="{{ sidekick.image3.src | towebp | resize(822, 420) }}"
alt="{{ sidekick.image3.altText | escape }}" width="822" height="420">
</div>
{% endblock %}
{% block info %}
<div class="sidekick-section__info">
<h2 class="sidekick-section__text">{{ sidekick.text }}</h2>
<div class="sidekick-section__cta">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
icon: 'right-chevron',
text: sidekick.cta.text,
url: sidekick.cta.url,
}
} %}
</div>
</div>
{% endblock %}
{% endembed %}
</div>
{
"siteUnit": "college",
"departmentName": "Landscape Architecture",
"background": "light",
"sidekick": {
"image1": {
"src": "https://picsum.photos/412/560?random=1?image=1",
"altText": "alt"
},
"image2": {
"src": "https://picsum.photos/412/280?random=1?image=2",
"altText": "alt"
},
"image3": {
"src": "https://picsum.photos/412/280?random=1?image=3",
"altText": "alt"
},
"text": "Morbin for 120 years in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in.",
"cta": {
"url": "https://google.com",
"text": "Button text"
}
}
}
.sidekick-section
$imageHeightSmall = 224px
$imageHeight = 280px
&__images
display none
background-color illiniBlueLight
width 100%
height 100%
+above(700px)
display grid
+below(979px)
grid-template-rows 1fr 1fr
+above(980px)
grid-template-areas\
"rightTop"\
"rightBottom"
grid-template-areas\
"leftImg rightTop"\
"leftImg rightBottom"
&__image
height 100%
object-fit cover
object-position center
width 100%
mix-blend-mode lighten
&:nth-child(1)
grid-area leftImg
display none
+above(980px)
display block
&:nth-child(2)
+above(980px)
grid-area rightTop
&:nth-child(3)
+above(980px)
grid-area rightBottom
&__info
display flex
flex-direction column
position relative
z-index 1
height 100%
justify-content center
padding 64px 0
gap 24px
text-align center
+above(700px)
text-align left
padding 0
+above(largeDeviceBreakpoint)
gap 32px
&__text
@extends $primaryLead
There are no notes for this item.