<div class="a-meta a-meta--lowercase"><svg class="icon">
        <use xlink:href="#icon-read"></use>
    </svg>
    20 min <span class="u-hide-sm">läsning</span></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": "20 min <span class=\"u-hide-sm\">läsning</span>",
  "icon": "read",
  "is_light": false,
  "lowercase": true,
  "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.