From: Nicolas Coden <nicolas@ncoden.fr>
Date: Sat, 20 Oct 2018 21:02:35 +0000 (+0200)
Subject: docs: make Callout closable in the first Close Button example
X-Git-Tag: v6.6.0~3^2~80^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=7cffc5266f883693ee91a8de3aff1e02e44b37e5;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

docs: make Callout closable in the first Close Button example

People could get confused with the example showing a close button that have not effect. This commit makes the Callout closable in the first Close Button example.
---

diff --git a/docs/pages/close-button.md b/docs/pages/close-button.md
index 87a0510a9..bda003280 100644
--- a/docs/pages/close-button.md
+++ b/docs/pages/close-button.md
@@ -14,12 +14,12 @@ The button is also labeled with `aria-label` to clarify what the button's purpos
 </p>
 
 <div class="docs-codepen-container">
-  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/xdjEgO?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+  <a class="codepen-logo-link" href="https://codepen.io/ncoden/pen/vVrrjG?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>
 
 ```html_example
-<div class="callout">
-  <button class="close-button" aria-label="Close alert" type="button">
+<div class="callout" data-closable>
+  <button class="close-button" aria-label="Close alert" type="button" data-close>
     <span aria-hidden="true">&times;</span>
   </button>
   <p>Look at this close button!</p>