Unit: Cubic Centimetres

Ready

Notes
HTML
Info
Context

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


        
        <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>

Handle: @unit--cubic-centimetres
Variants (15): Centimetres , Metres , Kilometres , Miles , Square Centimetres , Square Metres , Square Kilometres , Square Miles , Acres , Hectares , Cubic Centimetres , Cubic Metres , Litres , Hectolitres , Megalitres
Preview:
- With layout
- Component only
Filesystem Path: components/02-form-elements/unit/unit.hbs
References (1): @label


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