Adjust dividers with small radios

alphagov · Apr 11, 2019 · b645ac1 · b645ac1
1 parent 384f272
commit b645ac1
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss
@@ -290,6 +290,11 @@
       clear: both;
     }
 
+    .govuk-radios__divider {
+      width: $govuk-small-radios-size;
+      margin-bottom: govuk-spacing(1);
+    }
+
     // Hover state for small radios.
     //
     // We use a hover state for small radios because the touch target size

diff --git a/src/components/radios/radios.yaml b/src/components/radios/radios.yaml
@@ -590,3 +590,20 @@ examples:
         text: happiness
       - value: funkiness
         text: funkiness
+
+- name: small with a divider
+  data:
+    idPrefix: example-small-divider
+    name: example
+    fieldset:
+      legend:
+        text: How do you want to sign in?
+    classes: govuk-radios--small
+    items:
+      - value: governement-gateway
+        text: Use Government Gateway
+      - value: govuk-verify
+        text: Use GOV.UK Verify
+      - divider: or
+      - value: create-account
+        text: Create an account