Internetstiftelsen Styleguide

Tag 

<a href="#" class="a-tag">
    <span class="a-tag__text">cyberspace</span>
</a>
 
<a href="{{href}}" class="a-tag{{#if is_light}} a-tag--light{{/if}}{{#if background_color}}{{/if}}{{#if border}} u-b-solid u-b-{{border_color}} background-{{background_color}}{{/if}}{{#if hover_color}} a-tag--hover-{{hover_color}}{{/if}}{{#if color}} color-{{color}}{{/if}}">
	{{#if icon}}
	{{#if icon_align_left}}
 			{{> @icon id=icon additional_classes="u-m-r-1"}}
		{{/if}}
  	{{/if}}
	<span class="a-tag__text">{{text}}</span>
	{{#if icon}}
		{{#if icon_align_right}}
 			{{> @icon id=icon additional_classes="u-m-l-1"}}
		{{/if}}
  	{{/if}}
</a>
 
{
  "text": "cyberspace",
  "href": "#"
}
  • Content: 
    @charset 'UTF-8';

/// @group Tags
@include atom(tag) {
	@extend %normalize-links;

	@extend %tag;

	display: inline-flex;
	align-items: center;
	position: relative;
	z-index: z_index(middleground);
	margin-right: rhythm(1);
	margin-bottom: rhythm(1);
	padding: rhythm(1) rhythm(2);
	font-size: $small-text;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;

	&--background {
		@include color_values($colors, 'background-color', $separator: '-');
		@include color_values($colors, 'border-color', $separator: '-');
	}

	@include e(text) {
		color: var(--cyberspace-color);
		letter-spacing: 0.025rem;
	}

	@include m(light) {
		@extend %tag-light;

		@include e(text) {
			color: $color-snow;
		}
	}

	> svg {
		width: $icon-size-small;
		height: $icon-size-small;
	}

	@include m(hover-light) {
		&:hover,
		&:focus {
			background-color: currentColor !important;

			[class*=text] {
				color: $color-snow;
			}
		}
	}

	@include m(hover-dark) {
		&:hover,
		&:focus {
			background-color: currentColor !important;

			[class*=text] {
				color: $color-cyberspace;
			}
		}
	}
}
  • URL: /components/raw/tag/_tag.scss
  • Filesystem Path: src/atoms/tag/_tag.scss
  • Size: 1.1 KB

No notes defined.