<label for="name" class="is-required">Namn</label>
<label for="{{for}}" {{#if labelClasses}}class="{{labelClasses}}"{{/if}}>{{label}}</label>
{
"label": "Namn",
"for": "name",
"labelClasses": "is-required"
}
@charset 'UTF-8';
label,
.label-legend {
display: inline-block;
margin-bottom: rhythm(0.5);
font-family: $font-family-headings;
font-size: rem(16px);
cursor: pointer;
&.is-required {
&::after {
content: '*';
color: $color-ruby;
}
}
}
Labels can be visually hidden by adding class: u-visuallyhidden. This will not make them inaccessible for screen readers.