<a href="#" class="a-tag">cyberspace</a>
<a href="{{href}}" class="a-tag{{#if is_light}} a-tag--light{{/if}}{{#if background_color}} a-tag--background-{{background_color}}{{/if}}">{{text}}</a>
{
"text": "cyberspace",
"href": "#"
}
@charset 'UTF-8';
/// @group Tags
@include atom(tag) {
@extend %normalize-links;
@extend %tag;
display: inline-block;
position: relative;
z-index: z_index(middleground);
margin-right: rhythm(1);
margin-bottom: rhythm(1);
padding: rhythm(1) rhythm(2);
font-size: $small-text;
line-height: 1;
text-decoration: none;
text-transform: uppercase;
&--background {
@include color_values($colors, 'background-color', $separator: '-');
@include color_values($colors, 'border-color', $separator: '-');
}
@include m(light) {
@extend %tag-light;
}
}
No notes defined.