SDC Pattern Library

Unit

Rationale

Unit consist of Length, Area and Volume. All units are localized for ‘en_GB’.

Variants

Adding units is done in the unit.config.js by adding variants.

Collated

All units are collated onto one page.

Context

Units consist of two context items; label and unit.

Label

Label is the full name of the unit and must be human readable.

Unit

Unit is the localized symbol for each unit.

Scope

Global

Dependencies

  • /components/02-form-elements/input/_input.scss
  • /components/02-form-elements/input-type/_input-type.scss
  • assets/sass/partials/vars/_forms.sccs
<!-- Centimetres -->
<div class="field">
    <label class="label venus " for="Centimetres">
      Length in centimetres
      <br/>
      <span class="label__description pluto">For example enter 1250 for 12.5m</span>
  </label>
    <div class="input-type input-type--unit">
        <input data-qa="input-number" id="Centimetres" class="input input--number input-type__input" name="Centimetres" value="" pattern="[0-9]*">
        <abbr title="Centimetres" class="input-type__type" id="Centimetres-type"> cm</abbr>
    </div>
</div>


<!-- Metres -->
<div class="field">
    <label class="label venus " for="Metres">
      Length in metres
  </label>
    <div class="input-type input-type--unit">
        <input data-qa="input-number" id="Metres" class="input input--number input-type__input" name="Metres" value="" pattern="[0-9]*">
        <abbr title="Metres" class="input-type__type" id="Metres-type"> m</abbr>
    </div>
</div>


<!-- Kilometres -->
<div class="field">
    <label class="label venus " for="Kilometres">
      Distance in kilometres
  </label>
    <div class="input-type input-type--unit">
        <input data-qa="input-number" id="Kilometres" class="input input--number input-type__input" name="Kilometres" value="" pattern="[0-9]*">
        <abbr title="Kilometres" class="input-type__type" id="Kilometres-type"> km</abbr>
    </div>
</div>


<!-- Miles -->
<div class="field">
    <label class="label venus " for="Miles">
      Distance in miles
  </label>
    <div class="input-type input-type--unit">
        <input data-qa="input-number" id="Miles" class="input input--number input-type__input" name="Miles" value="" pattern="[0-9]*">
        <abbr title="Miles" class="input-type__type" id="Miles-type"> mi</abbr>
    </div>
</div>


<!-- Square Centimetres -->
<div class="field">
    <label class="label venus " for="Square-centimetres">
      Area in square centimetres
  </label>
    <div class="input-type input-type--unit">
        <input data-qa="input-number" id="Square-centimetres" class="input input--number input-type__input" name="Square-centimetres" value="" pattern="[0-9]*">
        <abbr title="Square-centimetres" class="input-type__type" id="Square-centimetres-type"> cm²</abbr>
    </div>
</div>


<!-- Square Metres -->
<div class="field">
    <label class="label venus " for="Square-metres">
      Area in square metres
  </label>
    <div class="input-type input-type--unit">
        <input data-qa="input-number" id="Square-metres" class="input input--number input-type__input" name="Square-metres" value="" pattern="[0-9]*">
        <abbr title="Square-metres" class="input-type__type" id="Square-metres-type"> m²</abbr>
    </div>
</div>


<!-- Square Kilometres -->
<div class="field">
    <label class="label venus " for="Square-kilometres">
      Area in square kilometres
  </label>
    <div class="input-type input-type--unit">
        <input data-qa="input-number" id="Square-kilometres" class="input input--number input-type__input" name="Square-kilometres" value="" pattern="[0-9]*">
        <abbr title="Square-kilometres" class="input-type__type" id="Square-kilometres-type"> km²</abbr>
    </div>
</div>


<!-- Square Miles -->
<div class="field">
    <label class="label venus " for="Square-miles">
      Area in square miles
  </label>
    <div class="input-type input-type--unit">
        <input data-qa="input-number" id="Square-miles" class="input input--number input-type__input" name="Square-miles" value="" pattern="[0-9]*">
        <abbr title="Square-miles" class="input-type__type" id="Square-miles-type"> sq mi</abbr>
    </div>
</div>


<!-- Acres -->
<div class="field">
    <label class="label venus " for="Acres">
      Arable land in acres
  </label>
    <div class="input-type input-type--unit">
        <input data-qa="input-number" id="Acres" class="input input--number input-type__input" name="Acres" value="" pattern="[0-9]*">
        <abbr title="Acres" class="input-type__type" id="Acres-type"> ac</abbr>
    </div>
</div>


<!-- Hectares -->
<div class="field">
    <label class="label venus " for="Hectares">
      Area in hectares
  </label>
    <div class="input-type input-type--unit">
        <input data-qa="input-number" id="Hectares" class="input input--number input-type__input" name="Hectares" value="" pattern="[0-9]*">
        <abbr title="Hectares" class="input-type__type" id="Hectares-type"> ha</abbr>
    </div>
</div>


<!-- Cubic Centimetres -->
<div class="field">
    <label class="label venus " for="Cubic-centimetres">
      Volume in cubic centimetres
  </label>
    <div class="input-type input-type--unit">
        <input data-qa="input-number" id="Cubic-centimetres" class="input input--number input-type__input" name="Cubic-centimetres" value="" pattern="[0-9]*">
        <abbr title="Cubic-centimetres" class="input-type__type" id="Cubic-centimetres-type"> cm³</abbr>
    </div>
</div>


<!-- Cubic Metres -->
<div class="field">
    <label class="label venus " for="Cubic-metres">
      Volume in cubic metres
  </label>
    <div class="input-type input-type--unit">
        <input data-qa="input-number" id="Cubic-metres" class="input input--number input-type__input" name="Cubic-metres" value="" pattern="[0-9]*">
        <abbr title="Cubic-metres" class="input-type__type" id="Cubic-metres-type"> m³</abbr>
    </div>
</div>


<!-- Litres -->
<div class="field">
    <label class="label venus " for="Litres">
      Volume in litres
  </label>
    <div class="input-type input-type--unit">
        <input data-qa="input-number" id="Litres" class="input input--number input-type__input" name="Litres" value="" pattern="[0-9]*">
        <abbr title="Litres" class="input-type__type" id="Litres-type"> l</abbr>
    </div>
</div>


<!-- Hectolitres -->
<div class="field">
    <label class="label venus " for="Hectolitres">
      Volume in hectolitres
  </label>
    <div class="input-type input-type--unit">
        <input data-qa="input-number" id="Hectolitres" class="input input--number input-type__input" name="Hectolitres" value="" pattern="[0-9]*">
        <abbr title="Hectolitres" class="input-type__type" id="Hectolitres-type"> hl</abbr>
    </div>
</div>


<!-- Megalitres -->
<div class="field">
    <label class="label venus " for="Megalitres">
      Volume in megalitres
  </label>
    <div class="input-type input-type--unit">
        <input data-qa="input-number" id="Megalitres" class="input input--number input-type__input" name="Megalitres" value="" pattern="[0-9]*">
        <abbr title="Megalitres" class="input-type__type" id="Megalitres-type"> Ml</abbr>
    </div>
</div>


/* Centimetres */
{
  "label": "Centimetres",
  "unit": " cm",
  "label_for": "Centimetres",
  "label_text": "Length in centimetres",
  "label_description": "For example enter 1250 for 12.5m"
}


/* Metres */
{
  "label": "Metres",
  "unit": " m",
  "label_for": "Metres",
  "label_text": "Length in metres"
}


/* Kilometres */
{
  "label": "Kilometres",
  "unit": " km",
  "label_for": "Kilometres",
  "label_text": "Distance in kilometres"
}


/* Miles */
{
  "label": "Miles",
  "unit": " mi",
  "label_for": "Miles",
  "label_text": "Distance in miles"
}


/* Square Centimetres */
{
  "label": "Square-centimetres",
  "unit": " cm²",
  "label_for": "Square-centimetres",
  "label_text": "Area in square centimetres"
}


/* Square Metres */
{
  "label": "Square-metres",
  "unit": " m²",
  "label_for": "Square-metres",
  "label_text": "Area in square metres"
}


/* Square Kilometres */
{
  "label": "Square-kilometres",
  "unit": " km²",
  "label_for": "Square-kilometres",
  "label_text": "Area in square kilometres"
}


/* Square Miles */
{
  "label": "Square-miles",
  "unit": " sq mi",
  "label_for": "Square-miles",
  "label_text": "Area in square miles"
}


/* Acres */
{
  "label": "Acres",
  "unit": " ac",
  "label_for": "Acres",
  "label_text": "Arable land in acres"
}


/* Hectares */
{
  "label": "Hectares",
  "unit": " ha",
  "label_for": "Hectares",
  "label_text": "Area in hectares"
}


/* Cubic Centimetres */
{
  "label": "Cubic-centimetres",
  "unit": " cm³",
  "label_for": "Cubic-centimetres",
  "label_text": "Volume in cubic centimetres"
}


/* Cubic Metres */
{
  "label": "Cubic-metres",
  "unit": " m³",
  "label_for": "Cubic-metres",
  "label_text": "Volume in cubic metres"
}


/* Litres */
{
  "label": "Litres",
  "unit": " l",
  "label_for": "Litres",
  "label_text": "Volume in litres"
}


/* Hectolitres */
{
  "label": "Hectolitres",
  "unit": " hl",
  "label_for": "Hectolitres",
  "label_text": "Volume in hectolitres"
}


/* Megalitres */
{
  "label": "Megalitres",
  "unit": " Ml",
  "label_for": "Megalitres",
  "label_text": "Volume in megalitres"
}