Internetstiftelsen Styleguide

Meta: Default 

<div class="a-meta">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": false,
  "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: $color-cyberspace;
	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;
	}

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

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

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

	@include m(wrap) {
		white-space: normal;
	}
}
  • URL: /components/raw/meta/_meta.scss
  • Filesystem Path: src/atoms/meta/_meta.scss
  • Size: 807 Bytes

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.