<a class="link-box" href="#">
<div class="link-box__title">www.lorem-ipsum.de</div>
<div class="link-box__text">Hier steht eine Subline mit zusätzlichen Informationen</div>
<svg class="icon link-box__icon icon--internal-link" id="icon-7501" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>
</a>
//- Render link
#{tag || 'a'}.link-box(href=link && link)
if title
.link-box__title #{title}
if text
.link-box__text #{text}
!= include('@icon', {icon: 'internal-link', attr: { class: 'link-box__icon'} })
{
"title": "www.lorem-ipsum.de",
"text": "Hier steht eine Subline mit zusätzlichen Informationen",
"icon": "arrow-right",
"link": "#"
}
.link-box {
background-color: $color-blue;
border-radius: 3px;
color: #fff;
display: block;
padding: 1.5rem 4rem 1.5rem 2rem;
position: relative;
&:hover,
&:focus {
text-decoration: none;
}
&:hover .link-box__title,
&:focus .link-box__title {
text-decoration: underline;
}
@include mq($from: m) {
padding: 2.5rem 3rem;
}
}
.link-box__icon {
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-50%);
@include mq($from: m) {
right: 3rem;
}
}
.link-box__title {
font-weight: bold;
}
There are no notes for this item.