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

package/docs-dev/sass/base/typography/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/">

package/docs-dev/sass/components/accordion/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/">
@@ -5301,7 +5331,7 @@
 <li><strong>Group:</strong> accordion</li>
 <li><strong>Type:</strong> mixin</li>
 <li><strong>Lines (comments):</strong> 91-94</li>
-<li><strong>Lines (code):</strong> 96-217</li>
+<li><strong>Lines (code):</strong> 96-216</li>
 </ul>
 </details>
 <div class="callout callout--demo crop-margins">

package/docs-dev/sass/components/adaptive-spacing/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/">

package/docs-dev/sass/components/badge/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/">

package/docs-dev/sass/components/basic-hero/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/">

package/docs-dev/sass/components/button/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/">

package/docs-dev/sass/components/button-verbose/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/">

package/docs-dev/sass/components/callout/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/">

package/docs-dev/sass/components/captioned-figure/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/">

package/docs-dev/sass/components/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/">
@@ -5058,12 +5088,14 @@
   <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-image-width"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">min</span><span class="pjs-token pjs-punctuation">(</span>33%<span class="pjs-token pjs-punctuation">,</span> 20rem<span class="pjs-token pjs-punctuation">)</span><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">"horizontal-min-height"</span> <span class="pjs-token pjs-punctuation">:</span> 10rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"horizontal-max-width"</span> <span class="pjs-token pjs-punctuation">:</span> 40rem<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>
-  <span class="pjs-token pjs-string">"image-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>197<span class="pjs-token pjs-punctuation">,</span> 197<span class="pjs-token pjs-punctuation">,</span> 197<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"image-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>238<span class="pjs-token pjs-punctuation">,</span> 238<span class="pjs-token pjs-punctuation">,</span> 238<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
   <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>
@@ -5073,6 +5105,8 @@
   <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>
   <span class="pjs-token pjs-string">"image-transition-properties"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>transform<span class="pjs-token pjs-punctuation">,</span> filter<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"image-transition-timing-function"</span> <span class="pjs-token pjs-punctuation">:</span> ease-in-out<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"image-fit-padding"</span> <span class="pjs-token pjs-punctuation">:</span> 1rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"image-fit-filter"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">drop-shadow</span><span class="pjs-token pjs-punctuation">(</span>0 0px 8px <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.3<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"margin-y"</span> <span class="pjs-token pjs-punctuation">:</span> 3rem<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"max-width"</span> <span class="pjs-token pjs-punctuation">:</span> 28rem<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"padding"</span> <span class="pjs-token pjs-punctuation">:</span> 2rem<span class="pjs-token pjs-punctuation">,</span>
@@ -5099,8 +5133,8 @@
 <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-63</li>
-<li><strong>Lines (code):</strong> 65-117</li>
+<li><strong>Lines (comments):</strong> 17-67</li>
+<li><strong>Lines (code):</strong> 69-124</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5361,6 +5395,18 @@
 <td style="text-align:left">The timing function for the image transition.</td>
 </tr>
 <tr>
+<td style="text-align:left">image-fit-padding</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">1rem</td>
+<td style="text-align:left">Padding on inside of image when using image fit modifier</td>
+</tr>
+<tr>
+<td style="text-align:left">image-fit-filter</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">drop-shadow(0 0px 8px rgba(0, 0, 0, 0.2))</td>
+<td style="text-align:left">Filter to use on image when using image fit modifier</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>
@@ -5379,6 +5425,18 @@
 <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-min-height</td>
+<td style="text-align:left">Unit</td>
+<td style="text-align:left">10rem</td>
+<td style="text-align:left">Minimum height when horizontal</td>
+</tr>
+<tr>
+<td style="text-align:left">horizontal-max-width</td>
+<td style="text-align:left">Unit</td>
+<td style="text-align:left">40rem</td>
+<td style="text-align:left">Maximum width when horizontal</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>
@@ -5400,8 +5458,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> 119-122</li>
-<li><strong>Lines (code):</strong> 124-126</li>
+<li><strong>Lines (comments):</strong> 126-129</li>
+<li><strong>Lines (code):</strong> 131-133</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5440,8 +5498,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> 137-141</li>
-<li><strong>Lines (code):</strong> 143-158</li>
+<li><strong>Lines (comments):</strong> 144-148</li>
+<li><strong>Lines (code):</strong> 150-165</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5488,8 +5546,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> 165-169</li>
-<li><strong>Lines (code):</strong> 171-437</li>
+<li><strong>Lines (comments):</strong> 172-176</li>
+<li><strong>Lines (code):</strong> 178-442</li>
 </ul>
 </details>
 <div class="callout callout--demo crop-margins">
@@ -5518,8 +5576,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> 128-131</li>
-<li><strong>Lines (code):</strong> 133-135</li>
+<li><strong>Lines (comments):</strong> 135-138</li>
+<li><strong>Lines (code):</strong> 140-142</li>
 </ul>
 </details>
 <h4 id="examples-3" tabindex="-1">Examples</h4>

package/docs-dev/sass/components/card-grid/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/">

package/docs-dev/sass/components/css-icon/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/">