From 7cffc5266f883693ee91a8de3aff1e02e44b37e5 Mon Sep 17 00:00:00 2001
From: Nicolas Coden <nicolas@ncoden.fr>
Date: Sat, 20 Oct 2018 23:02:35 +0200
Subject: [PATCH] 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.
---
 docs/pages/close-button.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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>
-- 
2.47.2