Merge pull request #262 from alphagov/add-markup-requirements-for-det…

…ails-polyfill

Add an extra panel to describe how details summary is used

app/views/guide_typography.html

@@ -32,7 +32,7 @@ <h2 class="heading-small heading-contents">Contents:</h2>
         <li><a href="#typography-lists">Lists</a></li>
         <li><a href="#typography-inset-text">Inset text</a></li>
         <li><a href="#typography-legal-text">Legal text</a></li>
-        <li><a href="#typography-hidden-text">Hidden text</a></li>
+        <li><a href="#typography-hidden-text">Hidden text (progressive disclosure)</a></li>
         <li><a href="#examples">Examples</a></li>
       </ul>
     </div>
@@ -200,6 +200,19 @@ <h3 class="heading-medium" id="typography-hidden-text">Hidden text (progressive
 </code>
 </pre>
 
+  <div class="panel panel-border-wide text">
+    <p>
+      If you're using the HTML5 details and summary elements, you'll need a polyfill for <a href="http://caniuse.com/#feat=details" rel="external">not-so-modern browsers</a>.
+    </p>
+    <p>
+      You'll need to ensure that your markup matches the example above.
+      <a href="https://github.com/alphagov/govuk_elements/blob/master/public/javascripts/vendor/details.polyfill.js">GOV.UK elements uses this polyfill</a>.
+    </p>
+    <p>
+      <a href="/typography/example-details-summary/">Take a look at example page</a> which demonstrates conditionally revealing information, using the HTML5 details and summary elements.
+    </p>
+  </div>
+
 
   <h3 class="heading-medium" id="examples">Examples</h3>
   <ul class="list list-bullet">
@@ -208,11 +221,6 @@ <h3 class="heading-medium" id="examples">Examples</h3>
         an example typography page
       </a>
     </li>
-    <li>
-      <a href="/typography/example-details-summary/">
-        the HTML details and summary elements (an example of progressive disclosure)
-      </a>
-    </li>
   </ul>
 
 </main><!-- / #content -->