<div class="archive-link-wrapper">
<a href="#" class="a-archive-link a-archive-link--icon">
<span class="archive-link__text">Fler nyheter</span>
<svg class="icon a-archive-link__icon">
<use xlink:href="#icon-arrow-forwards"></use>
</svg>
</a>
</div>
<div class="archive-link-wrapper">
<{{getelement el "a"}} {{#if url}}href="{{ url }}"{{/if}} class="a-archive-link{{#if icon }} a-archive-link--icon{{/if}}">
<span class="archive-link__text">{{ text }}</span>
{{#if icon}}
{{> @icon id=icon additional_classes="a-archive-link__icon"}}
{{/if}}
</{{getelement el "a"}}>
</div>
{
"text": "Fler nyheter",
"url": "#",
"icon": "arrow-forwards"
}
@charset 'UTF-8';
/// @group Links
@include b(archive-link-wrapper) {
padding: rhythm(2) 0;
border-bottom: 1px solid $color-cyberspace;
}
@include atom(archive-link) {
display: inline-flex;
position: relative;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
border: 0;
color: currentColor;
font-family: $font-family-headings;
text-decoration: none;
hyphens: auto;
&:hover,
&:focus {
text-decoration: underline;
}
@include e(text) {
position: relative;
top: -#{rhythm(0.2)};
color: $color-cyberspace;
}
@include m(icon) {
justify-content: space-between;
max-width: rhythm(50);
padding-right: rhythm(5);
text-align: left;
}
@include e(icon) {
width: $icon-size-small;
height: $icon-size-small;
margin-top: rem(3px);
margin-left: rhythm(1);
fill: currentColor;
}
}
No notes defined.