Unit: Acres

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

Handle: @unit--acres
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": "Acres",
  "unit": " ac",
  "label_for": "Acres",
  "label_text": "Arable land in acres"
}