@ulu/frontend 0.1.0-beta.24 → 0.1.0-beta.25

package/docs-dev/demos/card/index.html

@@ -241,6 +241,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+          
+    
+    <span class="nav-tree__text">
+      Card Grid
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/css-icons/">
@@ -2697,6 +2712,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+          
+    
+    <span class="nav-tree__text">
+      Card Grid
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/css-icons/">
@@ -4982,14 +5012,7 @@
 </header>
 		
 			<div class="page__toc page-toc">
-				<h2>Jump To:</h2>
-<div class="toc">
-                <ol>
-                    
-                    <li><a href="#card-defaults">Card Defaults</a>
-            		</li>
-                </ol>
-            </div>
+				
 			</div>
 		
 		<main id="main" class="page__body">
@@ -5007,428 +5030,432 @@
 
   <hr class="rule rule--light rule--margin-large">
 
-    <h2 id="card-defaults" tabindex="-1">Card Defaults</h2>
-<!-- setup for loop to give a card-grid of identical cards -->
-<h3>Default<h3>
-<p></p><article class="card" data-ulu-proxy-click="">
-<div class="card__body">
-<h5 class="card__title">
-<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card with Image</a>
-</h5>
-<div>
-This is a card with an upper image using a containing div with the &quot;card__image&quot; class.
-</div>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-<div class="card__footer">
-My first Card Footer
-</div>
-</article><p></p>
-<h4>Default setup using card-grid<h4>
-<ul class="card-grid">
-  <li>
-<p></p><article class="card" data-ulu-proxy-click="">
-<div class="card__body">
-<h5 class="card__title">
-<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card with Image</a>
-</h5>
-<div>
-This is a card with an upper image using a containing div with the &quot;card__image&quot; class.
-</div>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-<div class="card__footer">
-My first Card Footer
-</div>
-</article><p></p>
-  </li>
-  <li>
-<p></p><article class="card" data-ulu-proxy-click="">
-<div class="card__body">
-<h5 class="card__title">
-<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card with Image</a>
-</h5>
-<div>
-This is a card with an upper image using a containing div with the &quot;card__image&quot; class.
-</div>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-<div class="card__footer">
-My first Card Footer
-</div>
-</article><p></p>
-  </li>
-</ul>
-<h3>Card with Icon<h3>
-<p></p><article class="card" data-ulu-proxy-click="">
-<div class="card__body">
-<h5 class="card__title">
-<a class="card__title-link" href="#" data-ulu-proxy-click-source="">Card with icon</a>
-</h5>
-<div>
-This is a card with an upper image using a containing div with the &quot;card__image--icon&quot; class. This maintains the card's padding, so it will line up properly to the text.
-</div>
-</div>
-<div class="card__image card__image--icon">
-<span class="css-icon css-icon--square"></span>
-</div>
-<div class="card__footer">
-My first Card Footer
-</div>
-</article><p></p>
-<h4>Card with Icon setup using card-grid<h4>
-<ul class="card-grid">
-  <li>
-<p></p><article class="card" data-ulu-proxy-click="">
-<div class="card__body">
-<h5 class="card__title">
-<a class="card__title-link" href="#" data-ulu-proxy-click-source="">Card with icon</a>
-</h5>
-<div>
-This is a card with an upper image using a containing div with the &quot;card__image--icon&quot; class. This maintains the card's padding, so it will line up properly to the text.
-</div>
-</div>
-<div class="card__image card__image--icon">
-<span class="css-icon css-icon--square"></span>
-</div>
-<div class="card__footer">
-My first Card Footer
-</div>
-</article><p></p>
-  </li>
-  <li>
-<p></p><article class="card" data-ulu-proxy-click="">
-<div class="card__body">
-<h5 class="card__title">
-<a class="card__title-link" href="#" data-ulu-proxy-click-source="">Card with icon</a>
-</h5>
-<div>
-This is a card with an upper image using a containing div with the &quot;card__image--icon&quot; class. This maintains the card's padding, so it will line up properly to the text.
-</div>
-</div>
-<div class="card__image card__image--icon">
-<span class="css-icon css-icon--square"></span>
-</div>
-<div class="card__footer">
-My first Card Footer
-</div>
-</article><p></p>
-  </li>
-</ul>
-<h3>Card with Full Background Image<h3>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__body">
-<h5 class="card__title">
-<a class="card__title-link" href="#" data-ulu-proxy-click-source="">Card with background image dasdf</a>
-</h5>
-<div>
-Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.
-</div>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-<div class="card__footer">
-My first Card Footer
-</div>
-</article><p></p>
-<h4>Card with Full Background Image setup using card-grid<h4>
-<ul class="card-grid">
-  <li>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__body">
-<h5 class="card__title">
-<a class="card__title-link" href="#" data-ulu-proxy-click-source="">Card with background image dasdf</a>
-</h5>
-<div>
-Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.
-</div>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-<div class="card__footer">
-My first Card Footer
-</div>
-</article><p></p>
-  </li>
-  <li>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__body">
-<h5 class="card__title">
-<a class="card__title-link" href="#" data-ulu-proxy-click-source="">Card with background image dasdf</a>
-</h5>
-<div>
-Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.
-</div>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-<div class="card__footer">
-My first Card Footer
-</div>
-</article><p></p>
-  </li>
-</ul>
-<h3>overlay Card without Body Content<h3>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__body">
-<h5 class="card__title">
-<a class="card__title-link" href="#" data-ulu-proxy-click-source="">Card with background image</a>
-</h5>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-<div class="card__footer">
-My first Card Footer
-</div>
-</article><p></p>
-<h4>overlay Card without Body Content setup using card-grid<h4>
-<ul class="card-grid">
-  <li>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__body">
-<h5 class="card__title">
-<a class="card__title-link" href="#" data-ulu-proxy-click-source="">Card with background image</a>
-</h5>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-<div class="card__footer">
-My first Card Footer
-</div>
-</article><p></p>
-  </li>
-  <li>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__body">
-<h5 class="card__title">
-<a class="card__title-link" href="#" data-ulu-proxy-click-source="">Card with background image</a>
-</h5>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-<div class="card__footer">
-My first Card Footer
-</div>
-</article><p></p>
-  </li>
-</ul>
-<h3>overlay Card without Title<h3>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__body">
-<div>
-Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.
-</div>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-<div class="card__footer">
-My first Card Footer
-</div>
-</article><p></p>
-<h4>overlay Card without Title setup using card-grid<h4>
-<ul class="card-grid">
-  <li>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__body">
-<div>
-Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.
-</div>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-<div class="card__footer">
-My first Card Footer
-</div>
-</article><p></p>
-  </li>
-  <li>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__body">
-<div>
-Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.
-</div>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-<div class="card__footer">
-My first Card Footer
-</div>
-</article><p></p>
-  </li>
-</ul>
-<h3>overlay Card without Footer<h3>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__body">
-<h5 class="card__title">
-<a class="card__title-link" href="#" data-ulu-proxy-click-source="">Card with background image</a>
-</h5>
-<div>
-Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.
-</div>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-</article><p></p>
-<h4>overlay Card without Footer setup using card-grid<h4>
-<ul class="card-grid">
-  <li>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__body">
-<h5 class="card__title">
-<a class="card__title-link" href="#" data-ulu-proxy-click-source="">Card with background image</a>
-</h5>
-<div>
-Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.
-</div>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-</article><p></p>
-  </li>
-  <li>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__body">
-<h5 class="card__title">
-<a class="card__title-link" href="#" data-ulu-proxy-click-source="">Card with background image</a>
-</h5>
-<div>
-Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.
-</div>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-</article><p></p>
-  </li>
-</ul>
-<h3>overlay Card with only Title<h3>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__body">
-<h5 class="card__title">
-<a class="card__title-link" href="#" data-ulu-proxy-click-source="">Card with background image</a>
-</h5>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-</article><p></p>
-<h4>overlay Card with only Title setup using card-grid<h4>
-<ul class="card-grid">
-  <li>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__body">
-<h5 class="card__title">
-<a class="card__title-link" href="#" data-ulu-proxy-click-source="">Card with background image</a>
-</h5>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-</article><p></p>
-  </li>
-  <li>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__body">
-<h5 class="card__title">
-<a class="card__title-link" href="#" data-ulu-proxy-click-source="">Card with background image</a>
-</h5>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-</article><p></p>
-  </li>
-</ul>
-<h3>overlay Card with only Body<h3>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__body">
-<div>
-Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.
-</div>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-</article><p></p>
-<h4>overlay Card with only Body setup using card-grid<h4>
-<ul class="card-grid">
-  <li>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__body">
-<div>
-Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.
-</div>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-</article><p></p>
-  </li>
-  <li>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__body">
-<div>
-Adding &quot;card--overlay&quot; to the parent card to have the image cover the entire background. Text will be displayed over a semi-transparent gradient.
-</div>
-</div>
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-</article><p></p>
-  </li>
-</ul>
-<h3>overlay Card with only Footer<h3>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-<div class="card__footer">
-My first Card Footer
-</div>
-</article><p></p>
-<h4>overlay Card with only Footer setup using card-grid<h4>
-<ul class="card-grid">
-  <li>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-<div class="card__footer">
-My first Card Footer
-</div>
-</article><p></p>
-  </li>
-  <li>
-<p></p><article class="card card--overlay" data-ulu-proxy-click="">
-<div class="card__image">
-<img src="/frontend/assets/placeholder/image-1.jpg">
-</div>
-<div class="card__footer">
-My first Card Footer
+    <div id="icd" class="interactive-demo">
+  <div id="icd-display" class="interactive-demo__display">
+  </div>
+  <form id="icdForm" class="interactive-demo__form form-theme">
+    <div class="form-theme__item">
+      <input type="checkbox" id="fieldBody" name="fieldBody" checked="">
+      <label for="fieldBody">Body</label>
+    </div>
+    <div class="form-theme__item">
+      <input type="checkbox" id="fieldFooter" name="fieldFooter" checked="">
+      <label for="fieldFooter">Footer</label>
+    </div>
+    <div class="form-theme__item">
+      <input type="checkbox" id="fieldHorizontal" name="fieldHorizontal">
+      <label for="fieldHorizontal">Horizontal</label>
+    </div>
+    <div class="form-theme__item">
+      <label for="fieldImage">Image:</label>
+      <select id="fieldImage" name="fieldImage">
+        <option value="none">No Image</option>
+        <option value="image" selected="">Image</option>
+        <option value="icon">Icon</option>
+      </select>
+    </div>
+    <div class="form-theme__actions">
+      <button type="button" id="icdSubmit" class="button">Refresh</button>
+    </div>
+  </form>
 </div>
-</article><p></p>
-  </li>
-</ul>
-  <!-- title can be above card or in card -->
-  <!-- there can be a label -->
-  </h4></h4></h3></h3></h4></h4></h3></h3></h4></h4></h3></h3></h4></h4></h3></h3></h4></h4></h3></h3></h4></h4></h3></h3></h4></h4></h3></h3></h4></h4></h3></h3></h4></h4></h3></h3></div>
+<script>
+  (() => {
+    const display = document.getElementById("icd-display");
+    const submit = document.getElementById("icdSubmit");
+    const form = document.getElementById("icdForm");
+    const defaults = {
+      // Add default options
+    };
+
+  
+    // Run initially
+    update(defaults);
+
+    // Update on submit click
+    submit.addEventListener("click", (event) => {
+      event.preventDefault();
+      const formData = new FormData(form);
+      const values = { ...defaults };
+      formData.forEach((value, key) => {
+        values[key] = value;
+      });
+      console.log("values:\n", values);
+      update(values);
+    });
+
+    function update(options) {
+      display.innerHTML = cardTemplate(options);
+    }
+
+    // Template for update
+    function cardTemplate(options) {
+      return `
+<article class="card" data-proxy-click>
+  <div class="card__body">
+    <h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card Title</a>
+    </h5>
+    <p>
+      This is the card content. It can contain around 2-3 sentences.
+    </p>
+  </div>
+  <div class="card__image">
+    <img src="/assets/placeholder/image-1.jpg">
+  </div>
+  <div class="card__image card__image--icon">
+    <span aria-hidden class="css-icon css-icon--circle-question"></span>
+  </div>
+  <div class="card__footer">
+    <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+  </div>
+</article>      
+      `;
+    }
+  })();
+</script>
+<!-- card short code parameter order is -->
+<!-- <article class="card " data-ulu-proxy-click><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__image ">
+      <img src="/assets/placeholder/image-1.jpg"/> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article> -->
+<details class="accordion">
+  <summary class="accordion__summary">
+    Card Default Styling
+    <!-- The span is the icon on the side that -->
+    <span class="accordion__icon" aria-hidden="true">
+      <span class="css-icon css-icon--plus-to-minus"></span>
+    </span>
+  </summary>
+  <div class="accordion__content">
+    <div class="h4">All Fields</div>
+  <article class="card " data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Body (no proxy click link)</div>
+  <article class="card " data-ulu-proxy-click=""><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Title (no proxy click link)</div>
+  <article class="card "><div class="card__body"><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Content</div>
+  <article class="card " data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5></div><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Image</div>
+  <article class="card  card--no-image" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Footer</div>
+  <article class="card " data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div></article>
+  </div>
+</details>
+<details class="accordion">
+  <summary class="accordion__summary">
+    Card Image-fit Styling
+    <!-- The span is the icon on the side that -->
+    <span class="accordion__icon" aria-hidden="true">
+      <span class="css-icon css-icon--plus-to-minus"></span>
+    </span>
+  </summary>
+  <div class="accordion__content">
+    <div class="h4">All Fields</div>
+  <article class="card card--image-fit" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Body (no proxy click link)</div>
+  <article class="card card--image-fit" data-ulu-proxy-click=""><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Title (no proxy click link)</div>
+  <article class="card card--image-fit"><div class="card__body"><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Content</div>
+  <article class="card card--image-fit" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5></div><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Image</div>
+  <article class="card card--image-fit card--no-image" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Footer</div>
+  <article class="card card--image-fit" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div></article>
+  </div>
+</details>
+<details class="accordion">
+  <summary class="accordion__summary">
+    Card Icon Styling
+    <!-- The span is the icon on the side that -->
+    <span class="accordion__icon" aria-hidden="true">
+      <span class="css-icon css-icon--plus-to-minus"></span>
+    </span>
+  </summary>
+  <div class="accordion__content">
+    <div class="h4">All Fields</div>
+  <article class="card " data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__image card__image--icon">
+      <span aria-hidden="" class="css-icon css-icon--circle-question"></span> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Body (no proxy click link)</div>
+  <article class="card " data-ulu-proxy-click=""><div class="card__image card__image--icon">
+      <span aria-hidden="" class="css-icon css-icon--circle-question"></span> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Title (no proxy click link)</div>
+  <article class="card "><div class="card__body"><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__image card__image--icon">
+      <span aria-hidden="" class="css-icon css-icon--circle-question"></span> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Content</div>
+  <article class="card " data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5></div><div class="card__image card__image--icon">
+      <span aria-hidden="" class="css-icon css-icon--circle-question"></span> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Image</div>
+  <article class="card  card--no-image" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Footer</div>
+  <article class="card " data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__image card__image--icon">
+      <span aria-hidden="" class="css-icon css-icon--circle-question"></span> 
+    </div></article>
+  </div>
+</details>
+<details class="accordion">
+  <summary class="accordion__summary">
+    Card Overlay Styling
+    <!-- The span is the icon on the side that -->
+    <span class="accordion__icon" aria-hidden="true">
+      <span class="css-icon css-icon--plus-to-minus"></span>
+    </span>
+  </summary>
+  <div class="accordion__content">
+    <div class="h4">All Fields</div>
+  <article class="card card--overlay" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Body (no proxy click link)</div>
+  <article class="card card--overlay" data-ulu-proxy-click=""><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Title (no proxy click link)</div>
+  <article class="card card--overlay"><div class="card__body"><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Content</div>
+  <article class="card card--overlay" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5></div><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Footer</div>
+  <article class="card card--overlay" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div></article>
+  </div>
+</details>
+<details class="accordion">
+  <summary class="accordion__summary">
+    Card Horizontal Styling
+    <!-- The span is the icon on the side that -->
+    <span class="accordion__icon" aria-hidden="true">
+      <span class="css-icon css-icon--plus-to-minus"></span>
+    </span>
+  </summary>
+  <div class="accordion__content">
+    <div class="h4">All Fields</div>
+  <article class="card card--horizontal" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div></article>
+  <div class="h4">No Title (no proxy click link)</div>
+  <article class="card card--horizontal"><div class="card__body"><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Content</div>
+  <article class="card card--horizontal" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5></div><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Image</div>
+  <article class="card card--horizontal card--no-image" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  </div>
+</details>
+<details class="accordion">
+  <summary class="accordion__summary">
+    Card Horizontal and Image-fit Styling
+    <!-- The span is the icon on the side that -->
+    <span class="accordion__icon" aria-hidden="true">
+      <span class="css-icon css-icon--plus-to-minus"></span>
+    </span>
+  </summary>
+  <div class="accordion__content">
+    <div class="h4">All Fields</div>
+  <article class="card card--image-fit card--horizontal" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Body (no proxy click link)</div>
+  <article class="card card--image-fit card--horizontal" data-ulu-proxy-click=""><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Title (no proxy click link)</div>
+  <article class="card card--image-fit card--horizontal"><div class="card__body"><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Content</div>
+  <article class="card card--image-fit card--horizontal" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5></div><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Image</div>
+  <article class="card card--w-image card--horizontal card--no-image" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__footer">
+      <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
+    </div></article>
+  <div class="h4">No Footer</div>
+  <article class="card card--image-fit card--horizontal" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+    </h5><div>
+      This is the card content. It can contain around 2-3 sentences.
+    </div></div><div class="card__image ">
+      <img src="/frontend/assets/placeholder/image-1.jpg"> 
+    </div></article>
+  </div>
+</details>
+
+  </div>
 
 		</main>
 		<footer></footer>