@ulu/frontend 0.1.0-beta.28 → 0.1.0-beta.29

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

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>
-    Card
+    Card New
   </title>
   <meta name="description" content="Modular Sass Theming Library">
   <meta name="generator" content="Eleventy v3.0.0">
@@ -196,6 +196,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/button-verbose/">
+          
+    
+    <span class="nav-tree__text">
+      Button Verbose
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/callout/">
@@ -226,13 +241,13 @@
         </li>
       
 
-        <li class="nav-tree__item is-active is-active-trail ">
+        <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  is-active is-active-trail" href="/frontend/demos/card/" aria-current="page">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card
+      Card Grid
     </span>
   
         </a>
@@ -241,13 +256,13 @@
         </li>
       
 
-        <li class="nav-tree__item  ">
+        <li class="nav-tree__item is-active is-active-trail ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  is-active is-active-trail" href="/frontend/demos/card/" aria-current="page">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card New
     </span>
   
         </a>
@@ -2667,6 +2682,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/button-verbose/">
+          
+    
+    <span class="nav-tree__text">
+      Button Verbose
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/callout/">
@@ -2697,13 +2727,13 @@
         </li>
       
 
-        <li class="nav-tree__item is-active is-active-trail ">
+        <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  is-active is-active-trail" href="/frontend/demos/card/" aria-current="page">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card
+      Card Grid
     </span>
   
         </a>
@@ -2712,13 +2742,13 @@
         </li>
       
 
-        <li class="nav-tree__item  ">
+        <li class="nav-tree__item is-active is-active-trail ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  is-active is-active-trail" href="/frontend/demos/card/" aria-current="page">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card New
     </span>
   
         </a>
@@ -5021,7 +5051,7 @@
 			
 			
   <div class="page__body-top container ">
-    <h1 class="page__title h1">Card</h1>
+    <h1 class="page__title h1">Card New</h1>
 
   <p class="type-large type-light">
     Cards are...
@@ -5030,468 +5060,70 @@
 
   <hr class="rule rule--light rule--margin-large">
 
-    <h2 class="h2">Interactive Card Demo</h2>
-<div id="icd" class="interactive-demo">
-  <div id="icd-display" class="interactive-demo__display">
+    <div class="live-demo" data-live-demo="">
+  <div class="live-demo__display" data-live-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="fieldTitle" name="fieldTitle" checked="">
-      <label for="fieldTitle">Title</label>
-    </div>
-    <div class="form-theme__item">
-      <input type="checkbox" id="fieldContent" name="fieldContent" checked="">
-      <label for="fieldContent">Content</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">
-      <label for="fieldImage">Image:</label>
-      <select id="fieldImage" name="fieldImage">
-        <option value="icon">Icon</option>
-        <option value="image" selected="">Image</option>
-        <option value="none">No Image</option>
-      </select>
-    </div>
-    <div class="form-theme__item">
-      <label for="fieldModifier">Modifier:</label>
-      <select id="fieldModifier" name="fieldModifier">
-        <option value="default" selected="">Default</option>
-        <option value="horizontal">Horizontal</option>
-        <option value="overlay">Overlay</option>
-      </select>
-      <div class="form-theme__description">Note: Overlay is not compatible with "Icon" and "No Image" options.</div>
-    </div>
-    <div class="form-theme__actions">
-      <button type="button" id="icdSubmit" class="button">Refresh</button>
-    </div>
-  </form>
+  <form class="live-demo__form form-theme" data-live-demo-form="">
+<fieldset>
+  <legend>Elements Visible</legend>
+  <div>
+<div class="form-theme__item form-theme__item--checkbox">
+  <input type="checkbox" id="live-demo-id-141" name="title" checked="">
+<label for="live-demo-id-141">
+  Title
+</label>  
+</div>
+<div class="form-theme__item form-theme__item--checkbox">
+  <input type="checkbox" id="live-demo-id-142" name="body" checked="">
+<label for="live-demo-id-142">
+  Body
+</label>  
+</div>
+<div class="form-theme__item form-theme__item--checkbox">
+  <input type="checkbox" id="live-demo-id-143" name="content" checked="">
+<label for="live-demo-id-143">
+  Content
+</label>  
+</div>
+<div class="form-theme__item form-theme__item--checkbox">
+  <input type="checkbox" id="live-demo-id-144" name="footer" checked="">
+<label for="live-demo-id-144">
+  Footer
+</label>  
 </div>
-<!-- Note you will need to run the pageModified event after re-rendering the card, you can add the following to cause the scripts to update
-
-document.dispatchEvent(new CustomEvent("ulu:pageModified", { bubbles: true })); -->
-<script>
-  (() => {
-    const display = document.getElementById("icd-display");
-    const submit = document.getElementById("icdSubmit");
-    const form = document.getElementById("icdForm");
-  
-    // Run initially
-    render();
-
-    // Update on submit click
-    submit.addEventListener("click", (event) => {
-      event.preventDefault();
-      render();
-      document.dispatchEvent(new CustomEvent("ulu:pageModified", { bubbles: true }));
-    });
-
-    function render() {
-      const formData = new FormData(form);
-      const values = {};
-      formData.forEach((value, key) => {
-        values[key] = value;
-      });
-      console.log("values:\n", values);
-      display.innerHTML = cardTemplate(values);
-    }
-
-    function cardFooterBuilder(options) {
-      if(options.fieldFooter) {
-        return `
-          <div class="card__footer">
-            ${ options.fieldTitle && options.fieldBody ? `<a class="button button--small" href="https://www.yahoo.com/">Footer</a>` : `Card Footer Text` }
-          </div>
-        `.trim();
-      }
-      return "";
-    }
-
-    function cardImageBuilder(imageType) {
-      if(imageType == "image") {
-        return `
-          <div class="card__image">
-            <img src="/frontend/assets/placeholder/image-1.jpg">
-          </div>
-        `.trim();
-      } else if(imageType == "icon") {
-        return `
-          <div class="card__image card__image--icon">
-            <span aria-hidden class="css-icon css-icon--circle-question"></span>
-          </div>
-        `.trim();
-      }
-      return "";
-    }
-
-    function cardBodyBuilder(options) {
-      if(options.fieldBody) {
-        let cardContent = `<div class="card__body">`
-        if(options.fieldTitle) {
-          cardContent = cardContent + `
-            <h5 class="card__title">
-              <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card Title</a>
-            </h5>
-          `.trim();
-        }
-        if(options.fieldContent) {
-          cardContent = cardContent + `
-            <div>
-              This is the card content. It can contain around 2-3 sentences.
-            </div>
-          `.trim();
-        }
-        cardContent = cardContent + `</div>`
-        return cardContent
-      }
-      return "";
-    }
-
-    // Template for update
-    function cardTemplate(options) {
-      const cardOpen = `<${ options.fieldTitle && options.fieldBody ? 'article data-ulu-proxy-click' : 'a href="https://www.google.com"' }  class="card card--${options.fieldModifier}">` 
-      const cardClose = (options.fieldTitle && options.fieldBody) ? '</article>' : '</a>'
-      console.log(cardClose)
-      return cardOpen + cardBodyBuilder(options) + cardImageBuilder(options.fieldImage) + cardFooterBuilder(options) + cardClose
-    }
-  })();
-</script>
-<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>
+</fieldset>
+<div class="form-theme__item form-theme__item--select">
+<label for="live-demo-id-145">
+  Action
+  <span class="fas fa-info-circle" data-ulu-tooltip="Proxy click only works when title is present"></span>
+</label>  
+  <select id="live-demo-id-145" name="action">
+    <option value="">None</option>,<option value="link">Card is Link</option>,<option value="proxy">Proxy Click</option>
+  </select>
+</div>
+<div class="form-theme__item form-theme__item--select">
+<label for="live-demo-id-146">
+  Media
+</label>  
+  <select id="live-demo-id-146" name="media">
+    <option value="icon">Icon</option>,<option value="image">Image</option>,<option value="imageFit">Image (fit)</option>,<option value="none">No Image</option>
+  </select>
+</div>
+<div class="form-theme__item form-theme__item--select">
+<label for="live-demo-id-147">
+  Layout
+  <span class="fas fa-info-circle" data-ulu-tooltip="Overlay is not compatible with 'Icon' and 'No Image' options"></span>
+</label>  
+  <select id="live-demo-id-147" name="layout">
+    <option value="">Default</option>,<option value="horizontal">Horizontal</option>,<option value="overlay">Overlay</option>
+  </select>
+</div>
+  </form>
+  <script type="application/json" data-live-demo-options="">
+    {"debug":false,"template":"{% set hasProxy = action == \"proxy\" %}\n{% set isLink = action == \"link\" %}\n{% set hasImage = media == \"image\" or media == \"imageFit\" %}\n{% set element = isLink ? \"a\" : \"article\" %}\n{% set classes = [\n  \"card\",\n  layout ? \"card--\" ~ layout : \"\",\n  media == \"imageFit\" ? \"card--image-fit\" : \"\"\n] %}\n\n<{{ element }} \n  class=\"{{ classes|join(' ') }}\"\n  {{ hasProxy ? \"data-ulu-proxy-click\" }}\n  {{ isLink ? \"href='https://www.google.com'\" }}\n>\n  {% if body %}\n    <div class=\"card__body\">\n      {% if title %}\n        <h5 class=\"card__title\">\n          {# If link don't nest link (no link title) #}\n          {% if isLink %}\n            Card Title\n          {% else %}\n            <a \n              class=\"card__title-link\" \n              href=\"https://www.google.com\" \n              {{ hasProxy ? \"data-ulu-proxy-click-source\" }}\n            >\n              Card Title\n            </a>\n          {% endif %}\n        </h5>\n      {% endif %}\n      {% if content %}\n        <div>\n          This is the card content. It can contain around 2-3 sentences.\n        </div>\n      {% endif %}\n    </div>\n  {% endif %}\n\n  {% if hasImage %}\n    <div class=\"card__image\">\n      <img src=\"/frontend/assets/placeholder/image-1.jpg\">\n    </div>\n  {% endif %}\n\n  {% if media == \"icon\" %}\n    <div class=\"card__image card__image--icon\">\n      <img src=\"/frontend/assets/placeholder/icon-calendar.svg\" width=\"150\" height=\"150\">\n    </div>\n  {% endif %}\n\n  {% if footer %}\n    <div class=\"card__footer\">\n      {# If link don't nest link (no link title) #}\n      {% if isLink %}\n        Card Footer Text\n      {% else %}\n        <a class=\"button button--small\" href=\"https://www.yahoo.com/\">Footer</a>\n      {% endif %}\n    </div>\n  {% endif %}\n</{{ element }}>"}
+  </script>
+</div>
 
   </div>