@ulu/frontend 0.1.0-beta.10 → 0.1.0-beta.11

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

@@ -4676,6 +4676,21 @@
                 <ol>
                     
                     <li><a href="#basic-example">Basic Example</a>
+            
+                <ol>
+                    
+                    <li><a href="#info-callout">Info Callout</a>
+            		</li>
+
+                    <li><a href="#info-callout-with-icon">Info Callout with icon</a>
+            		</li>
+
+                    <li><a href="#success-callout">Success Callout</a>
+            		</li>
+
+                    <li><a href="#danger-callout">Danger Callout</a>
+            		</li>
+                </ol>
             		</li>
                 </ol>
             </div>
@@ -4706,7 +4721,14 @@
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat tincidunt tellus vestibulum dictum. 
   <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>div</span><span class="pjs-token pjs-punctuation">></span></span>
 <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>div</span><span class="pjs-token pjs-punctuation">></span></span></code></pre>
-<div class="callout callout--informative">
+<h3 id="info-callout" tabindex="-1">Info Callout</h3>
+<div class="callout callout--info">
+  <div> 
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat tincidunt tellus vestibulum dictum. 
+  </div>
+</div>
+<h3 id="info-callout-with-icon" tabindex="-1">Info Callout with icon</h3>
+<div class="callout callout--info">
   <div class="layout-flex-baseline"> 
     <span class="fas fa-external-link-alt margin-right-small" aria-hidden="true"></span>
     <div>
@@ -4714,27 +4736,18 @@
     </div>
   </div>
 </div>
-<div class="callout callout--informative">
-  <div> 
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat tincidunt tellus vestibulum dictum. 
-  </div>
-</div>
+<h3 id="success-callout" tabindex="-1">Success Callout</h3>
 <div class="callout callout--success">
   <div> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat tincidunt tellus vestibulum dictum. 
   </div>
 </div>
+<h3 id="danger-callout" tabindex="-1">Danger Callout</h3>
 <div class="callout callout--danger">
   <div> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat tincidunt tellus vestibulum dictum. 
   </div>
 </div>
-<div class="callout callout--emergency">
-  <div> 
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat tincidunt tellus vestibulum dictum. 
-  </div>
-</div>
-
     </div>
   </div>
 

package/docs-dev/demos/data-table/index.html

@@ -4728,46 +4728,46 @@
   </tfoot>
 </table>
 <h2 class="h2">Complex Table</h2>
-<table class="data-table" id="dt-39">
+<table class="data-table" id="dt-57">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-39-type" rowspan="2">Type</th>
-      <th id="dt-39-group" colspan="2">Group</th>
-      <th id="dt-39-details" colspan="2">Details</th>
-      <th id="dt-39-id" rowspan="2">Id</th>
+      <th id="dt-57-type" rowspan="2">Type</th>
+      <th id="dt-57-group" colspan="2">Group</th>
+      <th id="dt-57-details" colspan="2">Details</th>
+      <th id="dt-57-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-39-group" id="dt-39-primary">Primary</th>
-      <th headers="dt-39-group" id="dt-39-secondary">Secondary</th>
-      <th headers="dt-39-details" id="dt-39-before">Before Task</th>
-      <th headers="dt-39-details" id="dt-39-after">After Task</th>
+      <th headers="dt-57-group" id="dt-57-primary">Primary</th>
+      <th headers="dt-57-group" id="dt-57-secondary">Secondary</th>
+      <th headers="dt-57-details" id="dt-57-before">Before Task</th>
+      <th headers="dt-57-details" id="dt-57-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-39-type dt-39-r1" id="dt-39-r1">Default</th>
-      <td headers="dt-39-group dt-39-primary dt-39-r1">Lorem Ipsum</td>
-      <td headers="dt-39-group dt-39-secondary dt-39-r1">Lorem Ipsum</td>
-      <td headers="dt-39-details dt-39-before dt-39-r1">Lorem Ipsum</td>
-      <td headers="dt-39-details dt-39-after dt-39-r1">Lorem Ipsum</td>
-      <td headers="dt-39-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-57-type dt-57-r1" id="dt-57-r1">Default</th>
+      <td headers="dt-57-group dt-57-primary dt-57-r1">Lorem Ipsum</td>
+      <td headers="dt-57-group dt-57-secondary dt-57-r1">Lorem Ipsum</td>
+      <td headers="dt-57-details dt-57-before dt-57-r1">Lorem Ipsum</td>
+      <td headers="dt-57-details dt-57-after dt-57-r1">Lorem Ipsum</td>
+      <td headers="dt-57-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-39-group dt-39-primary dt-39-r1">Lorem Ipsum</td>
-      <td headers="dt-39-group dt-39-secondary dt-39-r1">Lorem Ipsum</td>
-      <td headers="dt-39-details dt-39-before dt-39-r1">Lorem Ipsum</td>
-      <td headers="dt-39-details dt-39-after dt-39-r1">Lorem Ipsum</td>
-      <td headers="dt-39-id">OL-53-GHSLE</td>
+      <td headers="dt-57-group dt-57-primary dt-57-r1">Lorem Ipsum</td>
+      <td headers="dt-57-group dt-57-secondary dt-57-r1">Lorem Ipsum</td>
+      <td headers="dt-57-details dt-57-before dt-57-r1">Lorem Ipsum</td>
+      <td headers="dt-57-details dt-57-after dt-57-r1">Lorem Ipsum</td>
+      <td headers="dt-57-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-39-group dt-39-primary dt-39-r1">Lorem Ipsum</td>
-      <td headers="dt-39-group dt-39-secondary dt-39-r1">Lorem Ipsum</td>
-      <td headers="dt-39-details dt-39-before dt-39-r1">Lorem Ipsum</td>
-      <td headers="dt-39-details dt-39-after dt-39-r1">Lorem Ipsum</td>
-      <td headers="dt-39-id">OL-53-GHSLE</td>
+      <td headers="dt-57-group dt-57-primary dt-57-r1">Lorem Ipsum</td>
+      <td headers="dt-57-group dt-57-secondary dt-57-r1">Lorem Ipsum</td>
+      <td headers="dt-57-details dt-57-before dt-57-r1">Lorem Ipsum</td>
+      <td headers="dt-57-details dt-57-after dt-57-r1">Lorem Ipsum</td>
+      <td headers="dt-57-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

package/docs-dev/demos/form-theme/index.html

@@ -4671,24 +4671,7 @@
 </header>
 		
 			<div class="page__toc page-toc">
-				<h2>Jump To:</h2>
-<div class="toc">
-                <ol>
-                    
-                <ol>
-                    
-                    <li><a href="#default-form">Default Form</a>
-            		</li>
-
-                    <li><a href="#full-width">Full-width</a>
-            		</li>
-
-                    <li><a href="#hide-labels">Hide Labels</a>
-            		</li>
-                </ol>
-            
-                </ol>
-            </div>
+				
 			</div>
 		
 		<main id="main" class="page__body">
@@ -4704,11 +4687,9 @@
   </p>
 
 <hr class="rule rule--light rule--margin-large">
-    <h1 id="form-theme" tabindex="-1">Form Theme</h1>
-<p>Styles given to the &lt;form&gt; element and all of it's child elements.</p>
-<pre class="language-html"><code class="language-html">  <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>form</span> <span class="pjs-token pjs-attr-name">action</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span><span class="pjs-token pjs-punctuation">"</span></span> <span class="pjs-token pjs-attr-name">method</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>get<span class="pjs-token pjs-punctuation">"</span></span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>form-theme<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span></code></pre>
-<h2 id="" tabindex="-1"></h2>
-<h3 id="default-form" tabindex="-1">Default Form</h3>
+    <p>Styles given to the &lt;form&gt; element and all of it's child elements.</p>
+<pre class="language-html"><code class="language-html">  <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>form</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>form-theme<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>...<span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>form</span><span class="pjs-token pjs-punctuation">></span></span></code></pre>
+<h2 class="h2">Default Form</h2>
 <form action="." method="get" class="form-theme">
   <div class="form-theme__item form-theme__item--text">
     <label for="name">Enter your name:<span class="form-theme__required-char">*</span> </label>
@@ -4760,7 +4741,9 @@
     </select>
   </div>
   <fieldset>
-    <legend>Choose your favorite monster</legend>
+    <legend>
+      <span>Choose your favorite monster</span>
+    </legend>
     <div class="form-theme__items-inline">
       <div class="form-theme__item">
         <input type="radio" id="kraken" name="monster" value="K">
@@ -4781,11 +4764,11 @@
     <textarea name="story" rows="5" cols="33" placeholder="It was a dark and stormy night..."></textarea>
   </div>
   <div class="form-theme__actions">
-    <input type="submit" value="Subscribe!">
+    <input type="submit" value="Subscribe!" class="button">
   </div>
 </form>
 <div class="rule"></div>
-<h3 id="full-width" tabindex="-1">Full-width</h3>
+<h2 class="h2">Full-width</h2>
 <form action="." method="get" class="form-theme form-theme--full-width">
   <div class="form-theme__item form-theme__item--text">
     <label for="name">Enter your name:<span class="form-theme__required-char">*</span> </label>
@@ -4837,7 +4820,9 @@
     </select>
   </div>
   <fieldset>
-    <legend>Choose your favorite monster</legend>
+    <legend>
+      <span>Choose your favorite monster</span>
+    </legend>
     <div class="form-theme__items-inline">
       <div class="form-theme__item">
         <input type="radio" id="kraken" name="monster" value="K">
@@ -4858,11 +4843,11 @@
     <textarea name="story" rows="5" cols="33" placeholder="It was a dark and stormy night..."></textarea>
   </div>
   <div class="form-theme__actions">
-    <input type="submit" value="Subscribe!">
+    <input type="submit" value="Subscribe!" class="button">
   </div>
 </form>
 <div class="rule"></div>
-<h3 id="hide-labels" tabindex="-1">Hide Labels</h3>
+<h2 class="h2">Hide Labels</h2>
 <form action="." method="get" class="form-theme form-theme--hide-labels">
   <div class="form-theme__item form-theme__item--text">
     <label for="name">Enter your name:<span class="form-theme__required-char">*</span> </label>
@@ -4902,7 +4887,9 @@
     </select>
   </div>
   <fieldset>
-    <legend>Choose your favorite monster</legend>
+    <legend>
+      <span>Choose your favorite monster</span>
+    </legend>
     <div class="form-theme__items-inline">
       <div class="form-theme__item">
         <input type="radio" id="kraken" name="monster" value="K">
@@ -4923,7 +4910,7 @@
     <textarea name="story" rows="5" cols="33" placeholder="It was a dark and stormy night..."></textarea>
   </div>
   <div class="form-theme__actions">
-    <input type="submit" value="Subscribe!">
+    <input type="submit" value="Subscribe!" class="button">
   </div>
 </form>
 

package/docs-dev/demos/menu-stack/index.html

@@ -4688,9 +4688,9 @@
 
 <hr class="rule rule--light rule--margin-large">
     <h2 class="h2">Basic Example</h2>
-<div class="menu-stack menu-stack--hanging">
+<div class="menu-stack">
   <h3 class="menu-stack__label">Example Label</h3>
-  <ul>
+  <ul class="menu-stack__list">
     <li class="menu-stack__item">
       <a class="menu-stack__link" href="#">This is Example Menu Item</a>
     </li>
@@ -4705,7 +4705,7 @@
 <h2 class="h2">Hanging with aria-current test</h2>
 <div class="menu-stack menu-stack--hanging">
   <h3 class="menu-stack__label">Example Label</h3>
-  <ul>
+  <ul class="menu-stack__list">
     <li class="menu-stack__item">
       <a class="menu-stack__link" href="#">This is Example Menu Item</a>
     </li>
@@ -4727,9 +4727,9 @@
   </ul>
 </div>
 <h2 class="h2">Multiple labels/lists</h2>
-<div class="menu-stack menu-stack--hanging menu-stack--separated">
+<div class="menu-stack menu-stack--separated">
   <h3 class="menu-stack__label">Section 1</h3>
-  <ul>
+  <ul class="menu-stack__list">
     <li class="menu-stack__item">
       <a class="menu-stack__link is-active" href="#">This is Example Menu Item</a>
     </li>
@@ -4740,7 +4740,7 @@
 </div>
 <div class="menu-stack menu-stack--hanging menu-stack--separated">
   <h3 class="menu-stack__label">Section 2</h3>
-  <ul>
+  <ul class="menu-stack__list">
     <li class="menu-stack__item">
       <a class="menu-stack__link" href="#">This is Example Menu Item with a really long title</a>
     </li>
@@ -4751,7 +4751,7 @@
 </div>
 <h2 class="h2">Checkbox Menu</h2>
 <div class="menu-stack form-theme">
-  <ul>
+  <ul class="menu-stack__list">
     <li class="menu-stack__item">
       <div class="menu-stack__checkbox">
         <input type="checkbox" id="cb-1">
@@ -4805,7 +4805,7 @@
 <h2 class="h2">With Icons</h2>
 <div class="menu-stack">
   <h3 class="menu-stack__label">Example Label</h3>
-  <ul>
+  <ul class="menu-stack__list">
     <li class="menu-stack__item">
       <a class="menu-stack__link is-active" href="#">
         <span class="menu-stack__link-icon fas fa-house" aria-hidden="true"></span>

package/docs-dev/sass/components/callout/index.html

@@ -4694,9 +4694,6 @@
                     <li><a href="#mixin-set-styles">set-styles()</a>
             		</li>
 
-                    <li><a href="#mixin-left-cap">left-cap()</a>
-            		</li>
-
                     <li><a href="#mixin-styles">styles()</a>
             		</li>
                 </ol>
@@ -4735,11 +4732,12 @@
 <p>Module Settings</p>
 <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
   <span class="pjs-token pjs-string">"background-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>240<span class="pjs-token pjs-punctuation">,</span> 240<span class="pjs-token pjs-punctuation">,</span> 240<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"border"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"border-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"rule-light"</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"border-radius"</span> <span class="pjs-token pjs-punctuation">:</span>  <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"border-width"</span> <span class="pjs-token pjs-punctuation">:</span> 1px<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"box-shadow"</span> <span class="pjs-token pjs-punctuation">:</span> none<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"left-cap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"left-cap-color"</span> <span class="pjs-token pjs-punctuation">:</span> green<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"left-cap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"left-cap-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>160<span class="pjs-token pjs-punctuation">,</span> 160<span class="pjs-token pjs-punctuation">,</span> 160<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"left-cap-width"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5rem<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"margin"</span> <span class="pjs-token pjs-punctuation">:</span> 2rem<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"padding"</span> <span class="pjs-token pjs-punctuation">:</span> 1.5rem<span class="pjs-token pjs-punctuation">,</span>
@@ -4750,8 +4748,8 @@
 <li><strong>File:</strong> _callout.scss</li>
 <li><strong>Group:</strong> callout</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 27-37</li>
-<li><strong>Lines (code):</strong> 39-49</li>
+<li><strong>Lines (comments):</strong> 23-34</li>
+<li><strong>Lines (code):</strong> 36-47</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -4772,10 +4770,10 @@
 <td style="text-align:left">The background color of the Callout.</td>
 </tr>
 <tr>
-<td style="text-align:left">border</td>
-<td style="text-align:left">Boolean</td>
-<td style="text-align:left">true</td>
-<td style="text-align:left">The border of the Callout.</td>
+<td style="text-align:left">border-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">&quot;rule-light&quot;</td>
+<td style="text-align:left">The border color of the Callout.</td>
 </tr>
 <tr>
 <td style="text-align:left">border-radius</td>
@@ -4784,6 +4782,12 @@
 <td style="text-align:left">The border radius of the Callout.</td>
 </tr>
 <tr>
+<td style="text-align:left">border-width</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">1px</td>
+<td style="text-align:left">The border width of the Callout.</td>
+</tr>
+<tr>
 <td style="text-align:left">box-shadow</td>
 <td style="text-align:left">CssValue</td>
 <td style="text-align:left">none</td>
@@ -4835,8 +4839,8 @@
 <li><strong>File:</strong> _callout.scss</li>
 <li><strong>Group:</strong> callout</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 95-98</li>
-<li><strong>Lines (code):</strong> 100-102</li>
+<li><strong>Lines (comments):</strong> 75-78</li>
+<li><strong>Lines (code):</strong> 80-82</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -4875,8 +4879,8 @@
 <li><strong>File:</strong> _callout.scss</li>
 <li><strong>Group:</strong> callout</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 114-116</li>
-<li><strong>Lines (code):</strong> 118-120</li>
+<li><strong>Lines (comments):</strong> 94-96</li>
+<li><strong>Lines (code):</strong> 98-100</li>
 </ul>
 </details>
 <h4 id="parameters-1" tabindex="-1">Parameters</h4>
@@ -4906,49 +4910,6 @@
 <li>$styles</li>
 </ul>
 <div class="sassdoc-item-header">
-<h3 id="mixin-left-cap" tabindex="-1">left-cap()</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Mixin</strong></span>
-  </div>
-</div>
-<p>Output styling for a callout that adds a left cap</p>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _callout.scss</li>
-<li><strong>Group:</strong> callout</li>
-<li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 122-124</li>
-<li><strong>Lines (code):</strong> 126-139</li>
-</ul>
-</details>
-<h4 id="parameters-2" tabindex="-1">Parameters</h4>
-<table>
-<thead>
-<tr>
-<th style="text-align:left">Name</th>
-<th style="text-align:left">Type</th>
-<th style="text-align:left">Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td style="text-align:left">$width</td>
-<td style="text-align:left"><code>Dimension</code></td>
-<td style="text-align:left">The width of the left cap</td>
-</tr>
-<tr>
-<td style="text-align:left">$color</td>
-<td style="text-align:left"><code>Color</code></td>
-<td style="text-align:left">The left cap color</td>
-</tr>
-</tbody>
-</table>
-<h4 id="require-2" tabindex="-1">Require</h4>
-<ul>
-<li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
-</ul>
-<div class="sassdoc-item-header">
 <h3 id="mixin-styles" tabindex="-1">styles()</h3>
   <div class="sassdoc-item-header__labels">
     <span class="tag tag--primary"><strong>Mixin</strong></span>
@@ -4961,15 +4922,14 @@
 <li><strong>File:</strong> _callout.scss</li>
 <li><strong>Group:</strong> callout</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 141-143</li>
-<li><strong>Lines (code):</strong> 145-176</li>
+<li><strong>Lines (comments):</strong> 113-115</li>
+<li><strong>Lines (code):</strong> 117-164</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
 <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-callout-styles</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
-<h4 id="require-3" tabindex="-1">Require</h4>
+<h4 id="require-2" tabindex="-1">Require</h4>
 <ul>
-<li><a href="/frontend/sass/components/callout/#mixin-left-cap">left-cap()</a></li>
 <li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
 <li>$styles</li>
 </ul>
@@ -4987,13 +4947,13 @@
 <li><strong>File:</strong> _callout.scss</li>
 <li><strong>Group:</strong> callout</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 104-107</li>
-<li><strong>Lines (code):</strong> 109-112</li>
+<li><strong>Lines (comments):</strong> 84-87</li>
+<li><strong>Lines (code):</strong> 89-92</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>
 <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-callout-get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"property"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
-<h4 id="parameters-3" tabindex="-1">Parameters</h4>
+<h4 id="parameters-2" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -5010,7 +4970,7 @@
 </tr>
 </tbody>
 </table>
-<h4 id="require-4" tabindex="-1">Require</h4>
+<h4 id="require-3" tabindex="-1">Require</h4>
 <ul>
 <li><a href="/frontend/sass/components/accordion/#variable-config">$config</a></li>
 </ul>

package/docs-dev/sass/components/card/index.html

@@ -4747,6 +4747,8 @@
   <span class="pjs-token pjs-string">"footer-padding-y"</span> <span class="pjs-token pjs-punctuation">:</span> 0.25rem<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"footer-min-height"</span> <span class="pjs-token pjs-punctuation">:</span> 2.5rem<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"horizontal-breakpoint"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"small"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"horizontal-image-width"</span> <span class="pjs-token pjs-punctuation">:</span> 33%<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"horizontal-body-max-width"</span> <span class="pjs-token pjs-punctuation">:</span> 80rem<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"header-margin"</span> <span class="pjs-token pjs-punctuation">:</span> 0.75em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"image-ratio"</span> <span class="pjs-token pjs-punctuation">:</span> 56.25%<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"image-aspect-ratio"</span><span class="pjs-token pjs-punctuation">:</span> list.<span class="pjs-token pjs-function">slash</span><span class="pjs-token pjs-punctuation">(</span>5<span class="pjs-token pjs-punctuation">,</span> 3<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
@@ -4754,6 +4756,7 @@
   <span class="pjs-token pjs-string">"image-border"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-comment">// For when you have a margin</span>
   <span class="pjs-token pjs-string">"image-filter-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"image-margin"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"image-icon-max-width"</span> <span class="pjs-token pjs-punctuation">:</span> 30rem<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"image-transform-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"image-transition-duration"</span> <span class="pjs-token pjs-punctuation">:</span>    350ms<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"image-transition-enabled"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
@@ -4778,15 +4781,15 @@
   <span class="pjs-token pjs-string">"overlay-background-color"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgba</span><span class="pjs-token pjs-punctuation">(</span>0<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">,</span> 0.6<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"overlay-shading"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"overlay-body-padding-y"</span><span class="pjs-token pjs-punctuation">:</span> 1rem<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
 <details>
   <summary>File Information</summary>
 <ul>
 <li><strong>File:</strong> _card.scss</li>
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 17-61</li>
-<li><strong>Lines (code):</strong> 63-113</li>
+<li><strong>Lines (comments):</strong> 17-63</li>
+<li><strong>Lines (code):</strong> 65-117</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -4819,12 +4822,6 @@
 <td style="text-align:left">The border radius of the card.</td>
 </tr>
 <tr>
-<td style="text-align:left">horizontal-breakpoint</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left">small</td>
-<td style="text-align:left">The breakpoint used to change the card to vertical if using the card--horizontal styling. Uses ulu's breakpoint module.</td>
-</tr>
-<tr>
 <td style="text-align:left">box-shadow</td>
 <td style="text-align:left">CssValue</td>
 <td style="text-align:left">null</td>
@@ -5053,11 +5050,29 @@
 <td style="text-align:left">The timing function for the image transition.</td>
 </tr>
 <tr>
+<td style="text-align:left">image-icon-max-width</td>
+<td style="text-align:left">List</td>
+<td style="text-align:left">30rem</td>
+<td style="text-align:left">Max width for image when using the modifier on the .card__image--icon</td>
+</tr>
+<tr>
 <td style="text-align:left">image-transition-properties</td>
 <td style="text-align:left">List</td>
 <td style="text-align:left">(transform, filter)</td>
 <td style="text-align:left">The properties for the image transitions.</td>
 </tr>
+<tr>
+<td style="text-align:left">horizontal-breakpoint</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">small</td>
+<td style="text-align:left">The breakpoint used to change the card to vertical if using the card--horizontal styling. Uses ulu's breakpoint module.</td>
+</tr>
+<tr>
+<td style="text-align:left">horizontal-body-max-width</td>
+<td style="text-align:left">Unit</td>
+<td style="text-align:left">80rem</td>
+<td style="text-align:left">The max-width of body when horizontal</td>
+</tr>
 </tbody>
 </table>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
@@ -5074,8 +5089,8 @@
 <li><strong>File:</strong> _card.scss</li>
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 115-118</li>
-<li><strong>Lines (code):</strong> 120-122</li>
+<li><strong>Lines (comments):</strong> 119-122</li>
+<li><strong>Lines (code):</strong> 124-126</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5114,8 +5129,8 @@
 <li><strong>File:</strong> _card.scss</li>
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 133-137</li>
-<li><strong>Lines (code):</strong> 139-154</li>
+<li><strong>Lines (comments):</strong> 137-141</li>
+<li><strong>Lines (code):</strong> 143-158</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5162,8 +5177,8 @@
 <li><strong>File:</strong> _card.scss</li>
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 161-165</li>
-<li><strong>Lines (code):</strong> 167-433</li>
+<li><strong>Lines (comments):</strong> 165-169</li>
+<li><strong>Lines (code):</strong> 171-437</li>
 </ul>
 </details>
 <div class="callout callout--demo crop-margins">
@@ -5192,8 +5207,8 @@
 <li><strong>File:</strong> _card.scss</li>
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 124-127</li>
-<li><strong>Lines (code):</strong> 129-131</li>
+<li><strong>Lines (comments):</strong> 128-131</li>
+<li><strong>Lines (code):</strong> 133-135</li>
 </ul>
 </details>
 <h4 id="examples-3" tabindex="-1">Examples</h4>