City of Ghent Style Guide


UX & accessibility

A label tells the user what the corresponding input field means.

  • Use short and descriptive labels so users can quickly scan your form.
  • Labels should be top aligned to their corresponding input fields.
  • All form elements must have a label.
  • Labels are visually and syntactically related to the form element.


<label for="{{ for }}">{{ label }}
{% if label_optional %}
  <span class="label-optional">
    {{ label_optional }}
{% endif %}
<label for="form-item">Label
    <span class="label-optional">
  "label": "Label",
  "for": "form-item",
  "label_optional": "Optional"
  • Content:
    label {
      @include theme('color', 'color-tertiary', 'label-color');
      @include bold-text;
      .label-optional {
        @include theme('color', 'color-primary--darken-2', 'label-optional-color');
        @include theme('background-color', 'color-primary--lighten-5', 'label-optional-background');
        padding: 0 .2rem;
        float: right;
        border-top-left-radius: border-radius('radius-1');
        border-top-right-radius: border-radius('radius-1');
        font-size: .6rem;
      display: block;
      //margin: 0 0 .4rem;
      font-size: .8rem;
      line-height: 1.2rem;
  • URL: /components/raw/label/_label.scss
  • Filesystem Path: components/21-atoms/label/_label.scss
  • Size: 553 Bytes