Updating accordion content items

diff --git a/docs/assets/scss/_accordion-content.scss b/docs/assets/scss/_accordion-content.scss
new file mode 100644 (file)
index 0000000..c41bb83
--- /dev/null
+++ b/docs/assets/scss/_accordion-content.scss
@@ -0,0 +1,14 @@
+.accordion-content-item {
+  margin-bottom: 1rem;
+}
+
+.accordion-content-item-divider {
+  border-bottom: 1px dashed #e5e5e5;
+}
+
+.accordion-content-item-cta {
+  
+  img {
+    margin-right: 0.5rem;
+  }
+}
\ No newline at end of file

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 48929cd602f182b29f14ebee6c8c64e480cfc3f8..bcaa00c6b5215e19f1d57fb9967ec528f13fb567 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -28,6 +28,7 @@
 
 @import 'course-callout';
 @import 'component-list';
+@import 'accordion-content';
 
 $topbar-background: #2c3840;
 $topbar-hover-color: lighten($topbar-background, 10%);

diff --git a/docs/pages/index.md b/docs/pages/index.md
index 542fa0ad2ae1116806598e14fcf3f80cba625a4b..9890098dcdcf07af6d18c56da4c19b994c5ab8f2 100644 (file)
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -22,7 +22,28 @@ With an easy to understand syntax and consistent structure, you'll learn your wa
   <li class="accordion-item is-active" data-accordion-item>
     <a href="#" class="accordion-title">Intro 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 class="row accordion-content-item">
+        <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>
     </div>
   </li>
   <li class="accordion-item" data-accordion-item>

diff --git a/docs/partials/component-list.html b/docs/partials/component-list.html
index bd20d9d0eebaef8d0e0712f46a9e0c905b1c3a76..c3cc11f31db076a7e79b230a3662ee126214737f 100644 (file)
--- a/docs/partials/component-list.html
+++ b/docs/partials/component-list.html
@@ -125,21 +125,6 @@
       </div>
     </li>
     
-    <li class="accordion-item" data-accordion-item>
-      <a href="#" class="accordion-title">Media</a>
-      <div class="accordion-content" data-tab-content>
-        <ul class="docs-nav-subcategory">
-          <li{{#ifpage 'badge'}} class="current"{{/ifpage}}><a href="badge.html">Badge</a></li>
-          <li{{#ifpage 'responsive-embed'}} class="current"{{/ifpage}}><a href="responsive-embed.html">Responsive Embed</a></li>
-          <li{{#ifpage 'label'}} class="current"{{/ifpage}}><a href="label.html">Label</a></li>
-          <li{{#ifpage 'orbit'}} class="current"{{/ifpage}}><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
-          <li{{#ifpage 'progress-bar'}} class="current"{{/ifpage}}><a href="progress-bar.html">Progress Bar</a></li>
-          <li{{#ifpage 'thumbnail'}} class="current"{{/ifpage}}><a href="thumbnail.html">Thumbnail</a></li>
-          <li{{#ifpage 'tooltip'}} class="current"{{/ifpage}}><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-        </ul>
-      </div>
-    </li>
-    
     <li class="accordion-item" data-accordion-item>
       <a href="#" class="accordion-title">Plugins</a>
       <div class="accordion-content" data-tab-content>