hr-design-system-handlebars 1.9.4 → 1.9.6

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.9.6 (Mon Mar 20 2023)
+
+#### 🐛 Bug Fix
+
+- Documentation Grid [#588](https://github.com/mumprod/hr-design-system-handlebars/pull/588) ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
+
+#### Authors: 1
+
+- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
+
+---
+
+# v1.9.5 (Mon Mar 20 2023)
+
+#### 🐛 Bug Fix
+
+- change color of Ticker-Label [#587](https://github.com/mumprod/hr-design-system-handlebars/pull/587) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v1.9.4 (Mon Mar 20 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -2667,7 +2667,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1679298767437;
+  counter-reset: cnt1679311457632;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2901,7 +2901,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1679298767437 1;
+  counter-increment: cnt1679311457632 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2917,7 +2917,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1679298767437);
+  content: counter(cnt1679311457632);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -3115,7 +3115,7 @@ video {
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: #006eb7;
     /* Ticker, Live, Livestream */
-    --color-label-live: #f07800;
+    --color-label-live: #d34600;
     /* Kommentar */
     --color-label-comment: #017e5c;
     /* Eilmeldung */
@@ -3171,7 +3171,7 @@ video {
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: #276b9e;
     /* Ticker, Live, Livestream */
-    --color-label-live: #f07800;
+    --color-label-live: #d34600;
     /* Kommentar */
     --color-label-comment: #017e5c;
     /* Eilmeldung */
@@ -3226,7 +3226,7 @@ video {
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: #006eb7;
     /* Ticker, Live, Livestream */
-    --color-label-live: #f07800;
+    --color-label-live: #d34600;
     /* Kommentar */
     --color-label-comment: #017e5c;
     /* Eilmeldung */
@@ -3283,7 +3283,7 @@ video {
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: #006eb7;
     /* Ticker, Live, Livestream */
-    --color-label-live: #f07800;
+    --color-label-live: #d34600;
     /* Kommentar */
     --color-label-comment: #017e5c;
     /* Eilmeldung */
@@ -3340,7 +3340,7 @@ video {
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: #8d2725;
     /* Ticker, Live, Livestream */
-    --color-label-live: #f07800;
+    --color-label-live: #d34600;
     /* Kommentar */
     --color-label-comment: #017e5c;
     /* Eilmeldung */
@@ -3395,7 +3395,7 @@ video {
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: #00646f;
     /* Ticker, Live, Livestream */
-    --color-label-live: #f07800;
+    --color-label-live: #d34600;
     /* Kommentar */
     --color-label-comment: #c1bc2b;
     /* Eilmeldung */
@@ -3450,7 +3450,7 @@ video {
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: #006eb7;
     /* Ticker, Live, Livestream */
-    --color-label-live: #f07800;
+    --color-label-live: #d34600;
     /* Kommentar */
     --color-label-comment: #097d8e;
     /* Eilmeldung */
@@ -3507,7 +3507,7 @@ video {
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: #916B00;
     /* Ticker, Live, Livestream */
-    --color-label-live: #f07800;
+    --color-label-live: #d34600;
     /* Kommentar */
     --color-label-comment: #e5007d;
     /* Eilmeldung */
@@ -3620,7 +3620,7 @@ video {
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: #c20016;
     /* Ticker, Live, Livestream */
-    --color-label-live: #f07800;
+    --color-label-live: #d34600;
     /* Kommentar */
     --color-label-comment: #6d761d;
     /* Eilmeldung */
@@ -3678,7 +3678,7 @@ video {
     /* Medieninhalte, Video, Audio, Bildergalerie */
     --color-label-media: #168378;
     /* Ticker, Live, Livestream */
-    --color-label-live: #f07800;
+    --color-label-live: #d34600;
     /* Kommentar */
     --color-label-comment: #407596;
     /* Eilmeldung */
@@ -3738,7 +3738,7 @@ video {
     /* Medieninhalte, Video, Audio, Bildergalerien */
     --color-label-media: #000000;
     /* Ticker, Live, Livestream */
-    --color-label-live: #f07800;
+    --color-label-live: #d34600;
     /* Kommentar */
     --color-label-comment: #017e5c;
     /* Eilmeldung */

package/dist/views/components/grid/grid.hbs

@@ -1,156 +1,12 @@
-
 <div class="grid grid-page">
   <div class="{{> components/grid/grid_group_wrapper_classes }}">
-    {{#>components/grid/grid_group _size="100"}}
-      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
-      {{#>components/grid/grid_item _size="12"}}
-        <a href="#">
-          <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
-            12/12 = 100%    
-          </div>
-        </a>
-      {{/components/grid/grid_item}}   
-    {{/components/grid/grid_group}} 
-    {{#>components/grid/grid_group _backgroundColor="1"}}    
-      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100% mit blauen Hintergrung bis Rand</h2>
-      {{#>components/grid/grid_item _size="6"}}
-        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
-          6/12 = 50%    
-        </div>
-      {{/components/grid/grid_item}}  
-      {{#>components/grid/grid_item _size="6"}}
-        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
-          6/12 = 50%    
-        </div>
-      {{/components/grid/grid_item}} 
-    {{/components/grid/grid_group}} 
-
-    {{#>components/grid/grid_group _size="100"}}
-
-      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
-      {{#>components/grid/grid_item _size="6"}}
-      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
-        6/12 = 50%    
-      </div>
-      {{/components/grid/grid_item}}  
-      {{#>components/grid/grid_item _size="6"}}
-      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
-        6/12 = 50%    
-      </div>
-      {{/components/grid/grid_item}} 
-
-      {{#>components/grid/grid_item _size="4"}}
-      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
-        4/12 = 33%    
-      </div>
-      {{/components/grid/grid_item}} 
-      {{#>components/grid/grid_item _size="4"}}
-      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
-        4/12 = 33%    
-      </div>  
-      {{/components/grid/grid_item}} 
-      {{#>components/grid/grid_item _size="4"}}
-      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
-        4/12 = 33%    
-      </div>   
-      {{/components/grid/grid_item}}
-    {{/components/grid/grid_group}}
-    {{#>components/grid/grid_group_tabbed }}
-        <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100% Tabbed</h2>
-        {{#>components/grid/grid_item _size="3"}}
-        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
-          3/12 = 25%    
-        </div> 
-        {{/components/grid/grid_item}}
-        
-        {{#>components/grid/grid_item _size="3"}}
-        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
-          3/12 = 25%    
-        </div> 
-        {{/components/grid/grid_item}}
-
-        {{#>components/grid/grid_item _size="3"}}
-        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
-          3/12 = 25%    
-        </div>   
-        {{/components/grid/grid_item}}
-
-        {{#>components/grid/grid_item _size="3"}}
-        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
-          3/12 = 25%    
-        </div>    
-        {{/components/grid/grid_item}} 
-      
-    {{/components/grid/grid_group_tabbed}} 
-    {{#>components/grid/grid_group}} 
-      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
-      {{#>components/grid/grid_item _size="4"}}
-      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
-        4/12 = 33%    
-      </div>
-      {{/components/grid/grid_item}} 
-      {{#>components/grid/grid_item _size="4"}}
-      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
-        4/12 = 33%    
-      </div>  
-      {{/components/grid/grid_item}} 
-      {{#>components/grid/grid_item _size="4"}}
-      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
-        4/12 = 33%    
-      </div>   
-      {{/components/grid/grid_item}}  
-    {{/components/grid/grid_group}} 
-    {{#>components/grid/grid_group _size="50"}}
-      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 50%</h2>
-      {{#>components/grid/grid_item _size="12"}}
-        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
-          6/12 = 50%    
-        </div>
-      {{/components/grid/grid_item}} 
-      {{#>components/grid/grid_item _size="12"}}
-        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
-          6/12 = 50%    
-        </div>  
-      {{/components/grid/grid_item}} 
-    {{/components/grid/grid_group}} 
-    {{#>components/grid/grid_group _size="50"}}
-      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 50%</h2>
-      {{#>components/grid/grid_item _size="6"}}
-        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
-          6/12 = 50%    
-        </div>
-      {{/components/grid/grid_item}} 
-      {{#>components/grid/grid_item _size="6"}}
-        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
-          6/12 = 50%    
-        </div>  
-      {{/components/grid/grid_item}} 
-    {{/components/grid/grid_group}} 
-    {{#>components/grid/grid_group _size="66"}}
-      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 66%</h2>
-      {{#>components/grid/grid_item _size="12"}}
-        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
-          8/12 = 66%    
-        </div>
-      {{/components/grid/grid_item}} 
-      {{#>components/grid/grid_item _size="12"}}
-        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
-          8/12 = 66%    
-        </div>  
-      {{/components/grid/grid_item}} 
-    {{/components/grid/grid_group}} 
-    {{#>components/grid/grid_group _size="33"}}
-      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 33%</h2>
-      {{#>components/grid/grid_item _size="12"}}
-        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
-          4/12 = 33%    
-        </div>
-      {{/components/grid/grid_item}} 
-      {{#>components/grid/grid_item _size="12"}}
-        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
-          4/12 = 33%    
-        </div>  
-      {{/components/grid/grid_item}} 
-    {{/components/grid/grid_group}} 
+    {{> components/grid/grid_group_100_item_100 }}
+    {{> components/grid/grid_group_100_item_100_with_background }}
+    {{> components/grid/grid_group_100_item_50 }}
+    {{> components/grid/grid_group_100_item_33 }}
+    {{> components/grid/grid_group_100_item_25 }}
+    {{> components/grid/grid_group_100_tabbed_50 }}
+    {{> components/grid/grid_group_100_tabbed_33 }}
+    {{> components/grid/grid_group_100_tabbed_25 }}
   </div>
 </div>

package/dist/views/components/grid/grid_group.hbs

@@ -1,9 +1,11 @@
 {{~#if _backgroundColor}}
     {{#>components/grid/grid_group_highlight _backgroundColor=this.backgroundColor }}  
         {{> @partial-block }}
+          
     {{/components/grid/grid_group_highlight }}
 {{else}}
     {{#>components/grid/grid_group_standard _groupSize=this.teaserSize }}  
         {{> @partial-block }}
+      
     {{/components/grid/grid_group_standard }}
-{{/if}}
+{{/if}}

package/dist/views/components/grid/grid_group_100_item_100.hbs

@@ -0,0 +1,14 @@
+<div class="grid grid-page">
+  <div class="{{> components/grid/grid_group_wrapper_classes }}">
+{{#>components/grid/grid_group _size="100"}}
+      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
+      {{#>components/grid/grid_item _size="12"}}
+        <a href="#">
+          <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+            12/12 = 100%    
+          </div>
+        </a>
+      {{/components/grid/grid_item}}   
+{{/components/grid/grid_group}} 
+  </div>
+</div>

package/dist/views/components/grid/grid_group_100_item_100_with_background.hbs

@@ -0,0 +1,17 @@
+ <div class="grid grid-page">
+  <div class="{{> components/grid/grid_group_wrapper_classes }}">
+ {{#>components/grid/grid_group _backgroundColor="2" _size="100"}} 
+      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100% mit blauen Hintergrund bis Rand</h2>
+      {{#>components/grid/grid_item _size="6"}}
+        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+          6/12 = 50%    
+        </div>
+      {{/components/grid/grid_item}}  
+      {{#>components/grid/grid_item _size="6"}}
+        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+          6/12 = 50%    
+        </div>
+      {{/components/grid/grid_item}} 
+{{/components/grid/grid_group}} 
+  </div>
+</div>

package/dist/views/components/grid/grid_group_100_item_25.hbs

@@ -0,0 +1,28 @@
+{{#>components/grid/grid_group _size="100"}}
+        <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
+        {{#>components/grid/grid_item _size="3"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          3/12 = 25%    
+        </div> 
+        {{/components/grid/grid_item}}
+        
+        {{#>components/grid/grid_item _size="3"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          3/12 = 25%    
+        </div> 
+        {{/components/grid/grid_item}}
+
+        {{#>components/grid/grid_item _size="3"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          3/12 = 25%    
+        </div>   
+        {{/components/grid/grid_item}}
+
+        {{#>components/grid/grid_item _size="3"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          3/12 = 25%    
+        </div>    
+        {{/components/grid/grid_item}} 
+{{/components/grid/grid_group}}
+  </div>
+</div>

package/dist/views/components/grid/grid_group_100_item_33.hbs

@@ -0,0 +1,18 @@
+
+{{#>components/grid/grid_group _size="100"}}
+      {{#>components/grid/grid_item _size="4"}}
+      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+        4/12 = 33%    
+      </div>
+      {{/components/grid/grid_item}} 
+      {{#>components/grid/grid_item _size="4"}}
+      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+        4/12 = 33%    
+      </div>  
+      {{/components/grid/grid_item}} 
+      {{#>components/grid/grid_item _size="4"}}
+      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+        4/12 = 33%    
+      </div>   
+      {{/components/grid/grid_item}}
+{{/components/grid/grid_group}}

package/dist/views/components/grid/grid_group_100_item_50.hbs

@@ -0,0 +1,15 @@
+{{#>components/grid/grid_group _size="100"}}
+      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
+      {{#>components/grid/grid_item _size="6"}}
+      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+        6/12 = 50%    
+      </div>
+      {{/components/grid/grid_item}}  
+      {{#>components/grid/grid_item _size="6"}}
+      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+        6/12 = 50%    
+      </div>
+      {{/components/grid/grid_item}} 
+{{/components/grid/grid_group}}
+  </div>
+</div>

package/dist/views/components/grid/grid_group_100_tabbed_25.hbs

@@ -0,0 +1,30 @@
+<div class="grid grid-page">
+  <div class="{{> components/grid/grid_group_wrapper_classes }}">
+{{#>components/grid/grid_group_tabbed }}
+        <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100% Tabbed</h2>
+        {{#>components/grid/grid_item _size="3"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          3/12 = 25%    
+        </div> 
+        {{/components/grid/grid_item}}
+        
+        {{#>components/grid/grid_item _size="3"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          3/12 = 25%    
+        </div> 
+        {{/components/grid/grid_item}}
+
+        {{#>components/grid/grid_item _size="3"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          3/12 = 25%    
+        </div>   
+        {{/components/grid/grid_item}}
+
+        {{#>components/grid/grid_item _size="3"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          3/12 = 25%    
+        </div>    
+        {{/components/grid/grid_item}} 
+    {{/components/grid/grid_group_tabbed}} 
+    </div>
+</div>

package/dist/views/components/grid/grid_group_100_tabbed_33.hbs

@@ -0,0 +1,22 @@
+<div class="grid grid-page">
+  <div class="{{> components/grid/grid_group_wrapper_classes }}">
+{{#>components/grid/grid_group_tabbed}} 
+      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
+      {{#>components/grid/grid_item _size="4"}}
+      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+        4/12 = 33%    
+      </div>
+      {{/components/grid/grid_item}} 
+      {{#>components/grid/grid_item _size="4"}}
+      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+        4/12 = 33%    
+      </div>  
+      {{/components/grid/grid_item}} 
+      {{#>components/grid/grid_item _size="4"}}
+      <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+        4/12 = 33%    
+      </div>   
+      {{/components/grid/grid_item}}  
+{{/components/grid/grid_group_tabbed}} 
+</div>
+</div>

package/dist/views/components/grid/grid_group_100_tabbed_50.hbs

@@ -0,0 +1,19 @@
+<div class="grid grid-page">
+  <div class="{{> components/grid/grid_group_wrapper_classes }}">
+{{#>components/grid/grid_group_tabbed }}
+        <h2 class="text-4xl headline--barrier col-span-full">Gruppen 50% Tabbed</h2>
+        {{#>components/grid/grid_item _size="6"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          6/12 = 50%    
+        </div> 
+        {{/components/grid/grid_item}}
+        
+        {{#>components/grid/grid_item _size="6"}}
+        <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
+          6/12 = 50%    
+        </div> 
+        {{/components/grid/grid_item}}
+{{/components/grid/grid_group_tabbed}} 
+</div>
+</div>
+    

package/dist/views/components/grid/grid_group_33_item_100.hbs

@@ -0,0 +1,17 @@
+ <div class="grid grid-page">
+  <div class="{{> components/grid/grid_group_wrapper_classes }}">
+{{#>components/grid/grid_group _size="33"}}
+      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 33%</h2>
+      {{#>components/grid/grid_item _size="12"}}
+        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+          4/12 = 33%    
+        </div>
+      {{/components/grid/grid_item}} 
+      {{#>components/grid/grid_item _size="12"}}
+        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+          4/12 = 33%    
+        </div>  
+      {{/components/grid/grid_item}} 
+{{/components/grid/grid_group}} 
+  </div>
+</div>

package/dist/views/components/grid/grid_group_50_item_100.hbs

@@ -0,0 +1,15 @@
+ <div class="grid grid-page">
+  <div class="{{> components/grid/grid_group_wrapper_classes }}">
+{{#>components/grid/grid_group _size="50"}}
+      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 50%</h2>
+      {{#>components/grid/grid_item _size="6"}}
+        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+          6/12 = 50%    
+        </div>
+      {{/components/grid/grid_item}} 
+      {{#>components/grid/grid_item _size="6"}}
+        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+          6/12 = 50%    
+        </div>  
+      {{/components/grid/grid_item}} 
+{{/components/grid/grid_group}} 

package/dist/views/components/grid/grid_group_66_item_100.hbs

@@ -0,0 +1,15 @@
+  <div class="grid grid-page">
+  <div class="{{> components/grid/grid_group_wrapper_classes }}">
+ {{#>components/grid/grid_group _size="66"}}
+      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 66%</h2>
+      {{#>components/grid/grid_item _size="12"}}
+        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+          8/12 = 66%    
+        </div>
+      {{/components/grid/grid_item}} 
+      {{#>components/grid/grid_item _size="12"}}
+        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
+          8/12 = 66%    
+        </div>  
+      {{/components/grid/grid_item}} 
+    {{/components/grid/grid_group}} 

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.9.4",
+    "version": "1.9.6",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",