<div class="a-meta a-meta--ruby"><svg class="icon">
        <use xlink:href="#icon-article"></use>
<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": "artikel",
  "icon": "article",
  "is_light": false,
  "lowercase": false,
  "additional_classes": false,
  "color": "ruby"
  • 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


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.