Internetstiftelsen Styleguide

Archive Link 

<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";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;


/// @group Links
@include bem.b(archive-link-wrapper) {
	padding: func.rhythm(2) 0;
	border-bottom: 1px solid colors.$color-cyberspace;
}
@include mixin.atom(archive-link) {
	display: inline-flex;
	position: relative;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	border: 0;
	color: currentColor;
	font-family: var.$font-family-headings;
	text-decoration: none;
	hyphens: auto;

	&:hover,
	&:focus {
		text-decoration: underline;
	}

	@include bem.e(text) {
		position: relative;
		top: -#{func.rhythm(0.2)};
		color: colors.$color-cyberspace;
	}

	@include bem.m(icon) {
		justify-content: space-between;
		max-width: func.rhythm(50);
		padding-right: func.rhythm(5);
		text-align: left;
	}

	@include bem.e(icon) {
		width: var.$icon-size-small;
		height: var.$icon-size-small;
		margin-top: func.to_rem(3px);
		margin-left: func.rhythm(1);
		fill: currentColor;
	}
}
  • URL: /components/raw/archive-link/archive-link.scss
  • Filesystem Path: src/atoms/archive-link/archive-link.scss
  • Size: 1.2 KB

No notes defined.