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';

/// @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.