<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"
}
  • Content:
    @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;
    	}
    }
    
  • URL: /components/raw/archive-link/archive-link.scss
  • Filesystem Path: src/atoms/archive-link/archive-link.scss
  • Size: 831 Bytes

No notes defined.