Internetstiftelsen Styleguide

Meta: Light 

<div class="a-meta a-meta--light">2018-11-26</div>
 
<div class="a-meta{{#if is_light}} a-meta--light{{/if}}{{#if color}} a-meta--{{color}}{{/if}}{{#if lowercase}} a-meta--lowercase{{/if}}{{#if additional_classes}} {{additional_classes}}{{/if}}">{{#if icon}}{{>@icon id=this.icon}} {{/if}}{{{text}}}</div>
 
{
  "text": "2018-11-26",
  "icon": false,
  "is_light": true,
  "lowercase": false,
  "additional_classes": false
}
  • Content: 
    @charset 'UTF-8';

@include atom(meta) {
	@include plumber(
		$font-size: 1.7,
		$baseline: $mono-baseline,
		$leading-bottom: 0
	);

	@include color_values($colors, 'fill', $prefix: '--', $separator: '-');

	display: flex;
	position: relative;
	align-items: center;
	color: var(--cyberspace-color);
	font-family: $font-family-mono;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;

	span {
		margin-left: rem(3px);
	}

	@include b(icon) {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		width: $icon-size;
		height: $icon-size;
		margin-right: rhythm(1);
		fill: inherit;
		color: var(--color-cyberspace);
		fill: currentColor;
	}

	@include m(light) {
		color: $color-snow;

		@include b(icon) {
			fill: $color-snow;
		}
	}

	@include m(lowercase) {
		text-transform: initial;
	}

	@include m(wrap) {
		white-space: normal;
	}

	@include m(responsive) {
		@include plumber(
			$font-size: 1.4,
			$baseline: $mono-baseline,
			$leading-bottom: 0
		);

		@include bp-up(md) {
			@include plumber(
				$font-size: 1.6,
				$baseline: $mono-baseline,
				$leading-bottom: 0
			);
		}

		@include bp-up(lg) {
			@include plumber(
				$font-size: 1.7,
				$baseline: $mono-baseline,
				$leading-bottom: 0
			);
		}
	}
}
  • URL: /components/raw/meta/_meta.scss
  • Filesystem Path: src/atoms/meta/_meta.scss
  • Size: 1.3 KB

Meta

Icon is optional. Icons support every color in the color scheme. Modifier class for color is set on the parent element and inherited down to the svg icon.