Updating to accordions

diff --git a/docs/assets/scss/_accordion-content.scss b/docs/assets/scss/_accordion-content.scss
index f3558de6aa52c6006498958901135fb3666b9c8f..140ea1de54e86662ed6bf979070ad83f0c10370c 100644 (file)
--- a/docs/assets/scss/_accordion-content.scss
+++ b/docs/assets/scss/_accordion-content.scss
@@ -21,7 +21,7 @@
 }
 
 
-.accordion-item {
+.welcome-accordion-item {
   
   &.is-active {
     box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.15);  

diff --git a/docs/pages/index.md b/docs/pages/index.md
index 11042a9bf02cb24b24bb4e6d35ea68fcbaed02e2..f989137723de65f241116c3940275ceb187a553a 100644 (file)
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -19,11 +19,11 @@ There are a number of ways to install Foundation for Sites. Our installatin page
 With an easy to understand syntax and consistent structure, you'll learn your way around Foudnation in no time!
 
 <ul class="accordion" data-accordion>
-  <li class="accordion-item is-active" data-accordion-item>
+  <li class="accordion-item welcome-accordion-item is-active" data-accordion-item>
     <a href="#" class="accordion-title">Intro Videos</a>
-    <div class="accordion-content" data-tab-content>
+    <div class="accordion-content " data-tab-content>
       
-      <div class="row accordion-content-item">
+      <div class="row">
         <div class="medium-4 columns">
           <img src="http://placehold.it/350x250">
         </div>
@@ -44,25 +44,140 @@ With an easy to understand syntax and consistent structure, you'll learn your wa
           <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
         </div>
       </div>
+      
+      <hr class="accordion-content-item-divider">
+      
+      <div class="row">
+        <div class="medium-4 columns">
+          <img src="http://placehold.it/350x250">
+        </div>
+        <div class="medium-8 columns">
+          <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
+          <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+        </div>
+      </div>
+      
     </div>
   </li>
-  <li class="accordion-item" data-accordion-item>
+  <li class="accordion-item welcome-accordion-item" data-accordion-item>
     <a href="#" class="accordion-title">Beginner Lessons</a>
-    <div class="accordion-content" data-tab-content>
-      I would start in the open state, due to using the `is-active` state class.
-    </div>
+      <div class="accordion-content " data-tab-content>
+      
+        <div class="row">
+          <div class="medium-4 columns">
+            <img src="http://placehold.it/350x250">
+          </div>
+          <div class="medium-8 columns">
+            <h4>Foundation 6.3 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
+            <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+          </div>
+        </div>
+
+        <hr class="accordion-content-item-divider">
+
+        <div class="row">
+          <div class="medium-4 columns">
+            <img src="http://placehold.it/350x250">
+          </div>
+          <div class="medium-8 columns">
+            <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
+            <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+          </div>
+        </div>
+
+        <hr class="accordion-content-item-divider">
+
+        <div class="row">
+          <div class="medium-4 columns">
+            <img src="http://placehold.it/350x250">
+          </div>
+          <div class="medium-8 columns">
+            <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
+            <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+          </div>
+        </div>
+
+      </div>
   </li>
-  <li class="accordion-item" data-accordion-item>
+  <li class="accordion-item welcome-accordion-item" data-accordion-item>
     <a href="#" class="accordion-title">Simple Templates</a>
-    <div class="accordion-content" data-tab-content>
-      I would start in the open state, due to using the `is-active` state class.
-    </div>
+      <div class="accordion-content " data-tab-content>
+      
+        <div class="row">
+          <div class="medium-4 columns">
+            <img src="http://placehold.it/350x250">
+          </div>
+          <div class="medium-8 columns">
+            <h4>Foundation 6.3 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
+            <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+          </div>
+        </div>
+
+        <hr class="accordion-content-item-divider">
+
+        <div class="row">
+          <div class="medium-4 columns">
+            <img src="http://placehold.it/350x250">
+          </div>
+          <div class="medium-8 columns">
+            <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
+            <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+          </div>
+        </div>
+
+        <hr class="accordion-content-item-divider">
+
+        <div class="row">
+          <div class="medium-4 columns">
+            <img src="http://placehold.it/350x250">
+          </div>
+          <div class="medium-8 columns">
+            <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
+            <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+          </div>
+        </div>
+
+      </div>
   </li>
-  <li class="accordion-item" data-accordion-item>
+  <li class="accordion-item welcome-accordion-item" data-accordion-item>
     <a href="#" class="accordion-title">Basic Documentation</a>
-    <div class="accordion-content" data-tab-content>
-      I would start in the open state, due to using the `is-active` state class.
-    </div>
+      <div class="accordion-content " data-tab-content>
+      
+        <div class="row">
+          <div class="medium-4 columns">
+            <img src="http://placehold.it/350x250">
+          </div>
+          <div class="medium-8 columns">
+            <h4>Foundation 6.3 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
+            <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+          </div>
+        </div>
+
+        <hr class="accordion-content-item-divider">
+
+        <div class="row">
+          <div class="medium-4 columns">
+            <img src="http://placehold.it/350x250">
+          </div>
+          <div class="medium-8 columns">
+            <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
+            <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+          </div>
+        </div>
+
+        <hr class="accordion-content-item-divider">
+
+        <div class="row">
+          <div class="medium-4 columns">
+            <img src="http://placehold.it/350x250">
+          </div>
+          <div class="medium-8 columns">
+            <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
+            <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+          </div>
+        </div>
+
+      </div>
   </li>
 </ul>
 
@@ -73,31 +188,31 @@ With an easy to understand syntax and consistent structure, you'll learn your wa
 With an easy to understand syntax and consistent structure, you'll learn your way around Foundation in no time!
 
 <ul class="accordion" data-accordion>
-  <li class="accordion-item is-active" data-accordion-item>
+  <li class="accordion-item welcome-accordion-item is-active" data-accordion-item>
     <a href="#" class="accordion-title">Latest updates in Foundation 6.3.0</a>
     <div class="accordion-content" data-tab-content>
       I would start in the open state, due to using the `is-active` state class.
     </div>
   </li>
-  <li class="accordion-item" data-accordion-item>
+  <li class="accordion-item welcome-accordion-item" data-accordion-item>
     <a href="#" class="accordion-title">New Ecommerce Templates</a>
     <div class="accordion-content" data-tab-content>
       I would start in the open state, due to using the `is-active` state class.
     </div>
   </li>
-  <li class="accordion-item" data-accordion-item>
+  <li class="accordion-item welcome-accordion-item" data-accordion-item>
     <a href="#" class="accordion-title">WordPress Themes</a>
     <div class="accordion-content" data-tab-content>
       I would start in the open state, due to using the `is-active` state class.
     </div>
   </li>
-  <li class="accordion-item" data-accordion-item>
+  <li class="accordion-item welcome-accordion-item" data-accordion-item>
     <a href="#" class="accordion-title">New Videos</a>
     <div class="accordion-content" data-tab-content>
       I would start in the open state, due to using the `is-active` state class.
     </div>
   </li>
-  <li class="accordion-item" data-accordion-item>
+  <li class="accordion-item welcome-accordion-item" data-accordion-item>
     <a href="#" class="accordion-title">Advanced Lessons</a>
     <div class="accordion-content" data-tab-content>
       I would start in the open state, due to using the `is-active` state class.