<div class="art-homepage-next-steps">
<div class="art-homepage-next-steps__container">
<div class="art-homepage-next-steps__calls-to-action">
<a href="https://google.com" class="art-homepage-next-steps__cta">
<div class="art-homepage-next-steps__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="24" viewBox="0 0 22 24">
<path fill="#FFF" fill-rule="evenodd" d="M10.621 13.001h.758l.74.008C18.424 13.115 22 14.164 22 17c-2.333 4.667-6 7-11 7s-8.667-2.333-11-7c0-2.945 3.856-3.963 10.621-3.999zM11 0c2.761 0 5 2 5 6 0 3.314-2.239 6-5 6S6 9.314 6 6c0-4 2.239-6 5-6z"/>
</svg>
</div>
<p class="art-homepage-next-steps__text">Get more info</p>
</a>
<a href="https://google.com" class="art-homepage-next-steps__cta">
<div class="art-homepage-next-steps__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="24" viewBox="0 0 26 24">
<path fill="#FFF" fill-rule="nonzero" d="M23 5a1 1 0 0 1-1.993.117L21 5V1a1 1 0 0 1 1.993-.117L23 1v1h3v22H0V2h3V1A1 1 0 0 1 4.993.883L5 1v4a1 1 0 0 1-1.993.117L3 5V4H2v18h22V4h-1v1zM5 19v2H3v-2h2zm3 0v2H6v-2h2zm3 0v2H9v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3-3v2h-2v-2h2zM5 16v2H3v-2h2zm3 0v2H6v-2h2zm3 0v2H9v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm-9-3v2H9v-2h2zm-6 0v2H3v-2h2zm3 0v2H6v-2h2zm6 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zM5 10v2H3v-2h2zm3 0v2H6v-2h2zm3 0v2H9v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm0-3v2h-2V7h2zM11 7v2H9V7h2zm3 0v2h-2V7h2zm3 0v2h-2V7h2zm3 0v2h-2V7h2zm0-5v2H6V2h14z"/>
</svg>
</div>
<p class="art-homepage-next-steps__text">Schedule a visit</p>
</a>
<a href="https://google.com" class="art-homepage-next-steps__cta">
<div class="art-homepage-next-steps__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="#FFF" fill-rule="nonzero" d="M24 0v18H11l-7 6v-6H0V0h24zm-2 2H2v14h4v3.651L10.26 16H22V2z"/>
</svg>
</div>
<p class="art-homepage-next-steps__text">Contact us</p>
</a>
</div>
</div>
</div>
<div class="art-homepage-next-steps">
<div class="art-homepage-next-steps__container">
<div class="art-homepage-next-steps__calls-to-action">
{% for cta in callsToAction %}
<a href="{{ cta.link }}" class="art-homepage-next-steps__cta">
<div class="art-homepage-next-steps__icon">
{% include 'bits/icons/' ~ cta.icon ~ '.twig' %}
</div>
<p class="art-homepage-next-steps__text">{{ cta.text }}</p>
</a>
{% endfor %}
</div>
</div>
</div>
{
"siteUnit": "art",
"departmentName": "School of Art and Design",
"background": "light",
"callsToAction": [
{
"icon": "person",
"text": "Get more info",
"link": "https://google.com"
},
{
"icon": "calendar",
"text": "Schedule a visit",
"link": "https://google.com"
},
{
"icon": "chat",
"text": "Contact us",
"link": "https://google.com"
}
]
}
$nextStepsBreakpoint = 762px
.art-homepage-next-steps
&__calls-to-action
display grid
grid-template-columns 1fr
+above($nextStepsBreakpoint)
grid-template-columns 1fr 1fr 1fr
&__cta
transition all 200ms ease-in-out
width 100%
height 248px
display flex
flex-direction column
justify-content center
align-items center
text-decoration none
+above($nextStepsBreakpoint)
height 288px
&:nth-of-type(1)
background-color archesBlueLightest
&:nth-of-type(2)
background-color archesBlueLighter
&:nth-of-type(3)
background-color archesBlueLight
&:hover
background-color archesBlue
&__icon
transition all 200ms ease-in-out
width 64px
height 64px
border solid 4px heritageOrange
display flex
justify-content center
align-items center
& svg
width 100%
height 32px
& path
fill charcoal
transition all 200ms ease-in-out
&__cta:hover &__icon
border-color white
& path
fill white
&__text
@extends $primaryLead
margin-top 24px
There are no notes for this item.