Add small form controls example

app/views/examples/small-form-controls/index.njk

@@ -0,0 +1,137 @@
+{% extends "layout.njk" %}
+
+{% from "back-link/macro.njk" import govukBackLink %}
+{% from "checkboxes/macro.njk" import govukCheckboxes %}
+{% from "radios/macro.njk" import govukRadios %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    "href": "/"
+  }) }}
+{% endblock %}
+
+{% block content %}
+<h1 class="govuk-heading-xl">Small form controls</h1>
+
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-one-third">
+    {{ govukCheckboxes({
+      fieldset: {
+        legend: {
+          text: "Display",
+          classes: "govuk-fieldset__legend--s"
+        }
+      },
+      idPrefix: "display",
+      name: "sort",
+      classes: "govuk-checkboxes--small",
+      items: [
+        {
+          value: "consultations",
+          text: "Consultations"
+        },
+        {
+          value: "guidance",
+          text: "Guidance"
+        },
+        {
+          value: "notices",
+          text: "Notices"
+        },
+        {
+          value: "reports",
+          text: "Reports"
+        }
+      ]
+    }) }}
+
+    {{ govukRadios({
+      fieldset: {
+        legend: {
+          text: "Include",
+          classes: "govuk-fieldset__legend--s"
+        }
+      },
+      idPrefix: "include",
+      name: "include",
+      classes: "govuk-radios--small",
+      items: [
+        {
+          value: "everything",
+          text: "Everything"
+        },
+        {
+          value: "something",
+          text: "Something"
+        },
+        {
+          value: "nothing",
+          text: "Nothing"
+        }
+      ]
+    }) }}
+  </div>
+  <div class="govuk-grid-column-two-thirds">
+      {{ govukRadios({
+        fieldset: {
+          legend: {
+            text: "Sort by",
+            classes: "govuk-fieldset__legend--s"
+          }
+        },
+        formGroup: {
+          classes: "govuk-!-margin-bottom-0"
+        },
+        idPrefix: "sort",
+        name: "sort",
+        classes: "govuk-radios--small govuk-radios--inline",
+        items: [
+          {
+            value: "relevance",
+            text: "Relevance"
+          },
+          {
+            value: "created",
+            text: "Created"
+          },
+          {
+            value: "title",
+            text: "Title"
+          }
+        ]
+      }) }}
+
+      {{ govukCheckboxes({
+        name: "grobulate",
+        classes: "govuk-checkboxes--small",
+        formGroup: {
+          classes: "govuk-!-margin-bottom-0"
+        },
+        items: [
+          {
+            value: "grobulate",
+            text: "Grobulate results"
+          }
+        ]
+      }) }}
+
+    <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible" style="clear: both;">
+
+    <h2 class="govuk-heading-m">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit</h2>
+
+    <p class="govuk-body">Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus.</p>
+
+    <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
+
+    <h2 class="govuk-heading-m">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh</h2>
+
+    <p class="govuk-body">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
+
+    <h2 class="govuk-heading-m">Bibendum Commodo Ullamcorper Vulputate</h2>
+
+    <p class="govuk-body">Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.</p>
+  </div>
+</div>
+{% endblock %}

src/objects/_form-group.scss

@@ -5,6 +5,7 @@
 @include govuk-exports("govuk/objects/form-group") {
 
   .govuk-form-group {
+    @include govuk-clearfix;
     @include govuk-responsive-margin(6, "bottom");
 
     .govuk-form-group:last-of-type {