<a href="#" class="back-button back-button--music">
<span class="back-button__icon">
<svg class="left-chevron" xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark left-chevron__shape" fill="#E84A27" fill-rule="nonzero" d="M7.768 1.65c.346-.419.3-1.05-.104-1.41a.937.937 0 0 0-1.356.11L0 8l6.308 7.65a.937.937 0 0 0 1.356.11c.403-.36.45-.991.104-1.41L2.534 8l5.234-6.35z"/>
</svg>
</span>
<span class="back-button__text">
<span class="back-button__pre">
Back to all
</span>
<span class="back-button__post">
News
</span>
</span>
</a>
<a href="{{ url }}" class="back-button back-button--{{ siteUnit }}">
<span class="back-button__icon">
{% include "bits/icons/left-chevron.twig" %}
</span>
<span class="back-button__text">
<span class="back-button__pre">
Back to all
</span>
<span class="back-button__post">
{{ text }}
</span>
</span>
</a>
{
"siteUnit": "music",
"departmentName": "Music",
"background": "light",
"text": "News",
"url": "#",
"class": "back-button__class"
}
.back-button
--borderRadius 28px
--boxShadowColor illiniOrange
--iconFillColor illiniOrange
--outlineBorder 2px solid illiniOrange
--postColor illiniOrange
&--arch
--borderRadius 0
--boxShadowColor industrialBlue
--iconFillColor industrialBlue
--outlineBorder 2px solid industrialBlue
--postColor industrialBlue
align-items center
background-color transparent
border-radius var(--borderRadius)
border var(--outlineBorder)
display inline-flex
font-family proximaNova
font-size 16px
font-weight 700
padding 8px 14px
text-decoration none
transition all 0.3s ease
&__icon
display flex
margin-right 8px
& svg
& .left-chevron__shape
fill var(--iconFillColor)
&__pre
color charcoalLight
&__post
color var(--postColor)
&:focus
&:hover
&:active
transform translate(0,-2px)
box-shadow 0 4px 0 0 var(--boxShadowColor)
There are no notes for this item.