<div class="news-landing-back-button__back">
<a href="#">News</a>
</div>
<div class="news-landing-back-button__line"></div>
No notes defined.
{
"title": "News"
}
.news-landing-back-button {
background-size: 100% 100%;
background-color: $grey-light;
&__back {
display: flex;
align-items: center;
padding-left: 0.2rem;
padding-top: 0.8rem;
& > a {
display: flex;
align-items: center;
text-decoration: none;
font-family: $heading-font;
font-size: 3rem;
line-height: 4rem;
letter-spacing: 0.01em;
color: $color-interface-light;
position: relative;
padding-left: 4rem;
&::before {
content: '';
background: url('./assets/images/view-all-arrow.svg') no-repeat center;
width: 3.8rem;
height: 3.8rem;
display: inline-block;
position: absolute;
left: 0;
transform: rotate(180deg);
}
&:hover {
color: $blue;
}
}
}
&__line {
background: $color-interface-light;
opacity: 0.1;
height: 0.1rem;
display: block;
margin: 0.4rem 1.6rem;
}
@media screen and (min-width: $mq-medium) {
&__back {
padding-left: 1.7rem;
padding-top: 1.2rem;
}
&__line {
margin: 1.2rem 3.2rem;
}
}
}
<div class="news-landing-back-button__back">
<a href="#">{{title}}</a>
</div>
<div class="news-landing-back-button__line"></div>