<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
}
@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
);
}
}
}
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.