Internetstiftelsen Styleguide

Label 

<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"
}
  • Content: 
    @charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;

label,
.label-legend {
	display: inline-block;
	margin-bottom: func.rhythm(0.5);
	font-family: var.$font-family-headings;
	font-size: func.to_rem(16px);
	cursor: pointer;

	&.is-required {
		&::after {
			content: '*';
			color: colors.$color-ruby;
		}
	}
}
  • URL: /components/raw/label/label.scss
  • Filesystem Path: src/atoms/label/label.scss
  • Size: 574 Bytes

Label

Labels can be visually hidden by adding class: u-visuallyhidden. This will not make them inaccessible for screen readers.