Add extra letter spacing modifier for inputs

alphagov · Nov 28, 2022 · d0b634e · d0b634e
1 parent 79f64df
commit d0b634e
Show file tree

Hide file tree

Showing 2 changed files with 12 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;
+  }
+
   // em measurements are based on the point size of the typeface
   // Extra space is added on the right hand side to allow for the Safari prefill icon
 

diff --git a/src/govuk/components/input/input.yaml b/src/govuk/components/input/input.yaml
@@ -307,6 +307,13 @@ examples:
         text: £
       suffix:
         text: per item
+  - name: with extra letter spacing
+    data:
+      id: input-with-extra-letter-spacing
+      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