<div class="music-feature">
<div class="music-feature__bg-image">
<picture class="simple-image">
<source srcset="
https://i.picsum.photos/id/327/412/212.jpg?hmac=-a9Iym33CoxDGPbn3_j-sRD0L1lSiQ6d9TF4exKjg38 412w,
https://i.picsum.photos/id/255/824/424.jpg?hmac=RtPPT1rLk3D4SXD-RetSgeCsQuPDiNQRSnfwA0ok-1M 824w,
https://i.picsum.photos/id/42/1236/636.jpg?hmac=hEMU2zvmtineGtblQiD56C4dBRTd3i4E_3vx2iaPJwI 1236w,
https://i.picsum.photos/id/229/1648/848.jpg?hmac=xIoimkK2aKkx-cWAu0t3WubDFMPvraqfOGCRBOU9_74 1648w
" type="image/webp">
<img class="simple-image__image" src="https://i.picsum.photos/id/327/412/212.jpg?hmac=-a9Iym33CoxDGPbn3_j-sRD0L1lSiQ6d9TF4exKjg38" alt="alt text">
</picture>
</div>
<div class="music-feature__wrapper">
<div class="music-feature__container">
<div class="music-feature__info" data-sal="slide-up" data-sal-delay="100" data-sal-easing="ease-in-out" data-sal-duration="700">
<h2 class="music-feature__title">Take the stage</h2>
<div class="music-feature__description">The Krannert Center for the Performing Arts nec <em>justo</em> eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.</div>
<div class="music-feature__ctas">
<div class="music-feature__cta">
<a href="#" class="standard-button standard-button--music 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 one</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="16" height="16" viewBox="0 0 16 16"><path class="icon-fill" fill="#E84A27" fill-rule="evenodd" d="M12.586 2H10a1 1 0 1 1 0-2h6v6a1 1 0 0 1-2 0V3.414l-8.293 8.293a1 1 0 1 1-1.414-1.414L12.586 2zM2 14h10V9a1 1 0 0 1 2 0v7H0V2h7a1 1 0 1 1 0 2H2v10z"/></svg></span></span>
</div>
</a>
</div>
<div class="music-feature__cta">
<a href="#" class="standard-button standard-button--music 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 Two</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="8" height="16" viewBox="0 0 8 16"><path class="icon-fill" fill="#E84A27" 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 class="music-feature">
<div class="music-feature__bg-image">
{% include 'bits/simple-image/simple-image.twig' with {image: feature.image} %}
</div>
<div class="music-feature__wrapper">
<div class="music-feature__container">
<div class="music-feature__info" data-sal="slide-up" data-sal-delay="100" data-sal-easing="ease-in-out" data-sal-duration="700">
<h2 class="music-feature__title">{{ feature.title }}</h2>
<div class="music-feature__description">{{ feature.description | raw }}</div>
<div class="music-feature__ctas">
{% for cta in feature.ctas %}
<div class="music-feature__cta">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
text: cta.text,
url: cta.url,
type: 'primary',
icon: cta.type|default('internal') ~ '-link',
}
} %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{
"siteUnit": "music",
"departmentName": "Music",
"background": "light",
"feature": {
"title": "Take the stage",
"description": "The Krannert Center for the Performing Arts nec <em>justo</em> eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.",
"ctas": [
{
"text": "Button one",
"url": "#",
"type": "external"
},
{
"text": "Button Two",
"url": "#",
"type": "internal"
}
],
"image": {
"srcset": [
{
"src": "https://i.picsum.photos/id/327/412/212.jpg?hmac=-a9Iym33CoxDGPbn3_j-sRD0L1lSiQ6d9TF4exKjg38",
"width": "412"
},
{
"src": "https://i.picsum.photos/id/255/824/424.jpg?hmac=RtPPT1rLk3D4SXD-RetSgeCsQuPDiNQRSnfwA0ok-1M",
"width": "824"
},
{
"src": "https://i.picsum.photos/id/42/1236/636.jpg?hmac=hEMU2zvmtineGtblQiD56C4dBRTd3i4E_3vx2iaPJwI",
"width": "1236"
},
{
"src": "https://i.picsum.photos/id/229/1648/848.jpg?hmac=xIoimkK2aKkx-cWAu0t3WubDFMPvraqfOGCRBOU9_74",
"width": "1648"
}
],
"altText": "alt text"
}
}
}
There are no notes for this item.