Add extra letter spacing modifier for inputs

alphagov · May 18, 2021 · 80e6bc4 · 80e6bc4
1 parent c14d6c9
commit 80e6bc4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/src/govuk/components/input/_index.scss b/src/govuk/components/input/_index.scss
@@ -59,6 +59,11 @@
     }
   }
 
+  .govuk-input--extra-letter-spacing {
+    @include govuk-font(false, $tabular: true);
+    letter-spacing: .05em;
+  }
+
   // The ex measurements are based on the number of W's that can fit inside the input
   // Extra space is left on the right hand side to allow for the Safari prefill icon
   // Linear regression estimation based on visual tests: y = 1.76 + 1.81x

diff --git a/src/govuk/components/input/input.yaml b/src/govuk/components/input/input.yaml
@@ -306,6 +306,12 @@ examples:
         text: £
       suffix:
         text: per item
+  - name: with extra letter spacing
+    data:
+      label:
+        text: National insurance number
+      classes: govuk-input--width-30 govuk-input--extra-letter-spacing
+      value: QQ 12 34 56 C
 
 # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
   - name: classes