add example of overiding widths

src/components/data-list/template.njk

@@ -217,3 +217,66 @@
  </div>
 
 </dl>
+
+
+
+
+<h2 class="govuk-heading-m">DL - govuk-data-list with overridden widths</h2>
+
+
+<dl class="govuk-data-list">
+
+ <div class="govuk-data-list__row">
+  <dt class="govuk-data-list__item govuk-data-list__item--definition govuk-!-width-one-half">Name</dt>
+  <dd class="govuk-data-list__item govuk-!-width-one-quarter">
+    <span>
+      Firstname Lastname
+    </span>
+  </dd>
+  <dd class="govuk-data-list__action govuk-!-width-one-quarter">
+    <ul class="govuk-data-list__action-list">
+      <li class="govuk-data-list__action-list-item"><a class="govuk-link" href="#">Edit</a></li>
+      <li class="govuk-data-list__action-list-item"><a class="govuk-link" href="#">Delete</a></li>
+    </ul>
+  </dd>
+ </div>
+
+
+  <div class="govuk-data-list__row">
+  <dt class="govuk-data-list__item govuk-data-list__item--definition">Date of birth</dt>
+  <dd class="govuk-data-list__item">
+    <span>
+      13/08/1980
+    </span>
+  </dd>
+  <dd class="govuk-data-list__action">
+    <ul class="govuk-data-list__action-list">
+      <li class="govuk-data-list__action-list-item"><a class="govuk-link" href="#">Change</a></li>
+    </ul>
+  </dd>
+ </div>
+
+
+ <div class="govuk-data-list__row">
+  <dt class="govuk-data-list__item govuk-data-list__item--definition">Contact information</dt>
+  <dd class="govuk-data-list__item">
+    <span>
+      email@email.com
+    </span>
+    <span>
+      Address line 1<br>
+      Address line 2<br>
+      Address line 3<br>
+      Address line 4<br>
+      Address line 5
+    </span>
+  </dd>
+  <dd class="govuk-data-list__action">
+    <ul class="govuk-data-list__action-list">
+      <li class="govuk-data-list__action-list-item"><a class="govuk-link" href="#">Edit</a></li>
+      <li class="govuk-data-list__action-list-item"><a class="govuk-link" href="#">Delete</a></li>
+    </ul>
+  </dd>
+ </div>
+
+</dl>