hr-design-system-handlebars 1.52.14 → 1.52.15

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

@@ -1,7 +1,7 @@
  <div class="grid grid-page">
   <div class="{{> components/grid/grid_group_wrapper_classes }}">
 {{#>components/grid/grid_group teaserSize="50"}}
-      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 50%</h2>
+      <h2 class="text-5xl 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%    

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

@@ -1,7 +1,7 @@
   <div class="grid grid-page">
   <div class="{{> components/grid/grid_group_wrapper_classes }}">
  {{#>components/grid/grid_group teaserSize="66"}}
-      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 66%</h2>
+      <h2 class="text-5xl 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%    

package/dist/views_static/components/teaser/components/teaser_title_classes.hbs

@@ -16,13 +16,13 @@ the 4 parameters are:
             {{~inline-switch
                 _size
                 '["hero","100","25"]'
-                '["text-lg md:text-4xl","text-lg md:text-4xl","text-lg","text-lg md:text-2xl"]'
+                '["text-lg md:text-5xl","text-lg md:text-5xl","text-lg","text-lg md:text-2xl"]'
             ~}}
         {{~else~}}
             {{~inline-switch
                 _size
                 '["hero","100","25"]'
-                '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]'
+                '["text-2xl md:text-5xl","text-2xl md:text-5xl","text-lg","text-2xl"]'
             ~}}
         {{~/if~}}
     {{~/case~}}
@@ -31,13 +31,13 @@ the 4 parameters are:
             {{~inline-switch
                 _size
                 '["hero","100","25"]'
-                '["text-lg md:text-4xl","text-lg md:text-4xl","text-lg","text-lg md:text-2xl"]'
+                '["text-lg md:text-5xl","text-lg md:text-5xl","text-lg","text-lg md:text-2xl"]'
             ~}}
         {{~else~}}
             {{~inline-switch
                 _size
                 '["hero","100","25"]'
-                '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]'
+                '["text-2xl md:text-5xl","text-2xl md:text-5xl","text-lg","text-2xl"]'
             ~}}
         {{~/if~}}
     {{~/case~}}
@@ -46,13 +46,13 @@ the 4 parameters are:
             {{~inline-switch
                 _size
                 '["hero","100","25"]'
-                '["text-lg md:text-4xl","text-lg md:text-4xl","text-lg","text-lg md:text-2xl"]'
+                '["text-lg md:text-5xl","text-lg md:text-5xl","text-lg","text-lg md:text-2xl"]'
             ~}}
         {{~else~}}
             {{~inline-switch
                 _size
                 '["hero","100","25"]'
-                '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]'
+                '["text-2xl md:text-5xl","text-2xl md:text-5xl","text-lg","text-2xl"]'
             ~}}
         {{~/if~}}
     {{~/case~}}
@@ -60,28 +60,28 @@ the 4 parameters are:
         {{~inline-switch
             _size
             '["hero","100","50"]'
-            '["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]'
+            '["text-2xl md:text-4xl","text-lg md:text-4xl","text-lg md:text-2xl"]'
         ~}}
     {{~/case~}}
     {{~#case 'event-alternative'~}}
         {{~inline-switch
             _size
             '["hero","100","50"]'
-            '["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]'
+            '["text-2xl md:text-4xl","text-lg md:text-4xl","text-lg md:text-2xl"]'
         ~}}
     {{~/case~}}
     {{~#case 'tabbox-alternative'~}}
         {{~inline-switch
             _size
             '["hero","100","50"]'
-            '["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]'
+            '["text-2xl md:text-4xl","text-lg md:text-4xl","text-lg md:text-2xl"]'
         ~}}
     {{~/case~}}
     {{~#case 'poster'~}}
         {{#if _isCopytext~}}
-            {{~#if this.showFullSize.isTrue~}}text-xl sm480:text-2xl md:text-4xl{{else}}text-xl sm480:text-2xl{{~/if~}}
+            {{~#if this.showFullSize.isTrue~}}text-xl sm480:text-2xl md:text-5xl{{else}}text-xl sm480:text-2xl{{~/if~}}
         {{else}}
-            {{~inline-switch _size '["50","33"]' '["text-2xl md:text-4xl","text-2xl"]'~}}
+            {{~inline-switch _size '["50","33"]' '["text-2xl md:text-5xl","text-2xl"]'~}}
         {{/if}}    
     {{~/case~}}
     {{~#case 'cluster'~}}
@@ -92,7 +92,7 @@ the 4 parameters are:
         {{/if}}
     {{~/case~}}
     {{~#case 'stage'~}}
-        {{~inline-switch _size '["100"]' '[" text-2xl md:text-4xl"," text-2xl"]'}}
+        {{~inline-switch _size '["100"]' '[" text-2xl md:text-5xl"," text-2xl"]'}}
     {{~/case~}}
     {{~#case 'calendar'~}}
        text-2xl
@@ -101,14 +101,14 @@ the 4 parameters are:
         {{~inline-switch
             _size
             '["hero","100","25"]'
-            '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-2xl md:text-lg","text-2xl"]'
+            '["text-2xl md:text-5xl","text-2xl md:text-5xl","text-2xl md:text-lg","text-2xl"]'
         ~}}
     {{~/case~}}
     {{~#case 'ticker-alternative'~}}
         {{~inline-switch
             _size
             '["hero","100","50"]'
-            '["text-2xl md:text-4xl","text-2xl md:text-2xl","text-lg md:text-2xl"]'
+            '["text-2xl md:text-5xl","text-2xl md:text-2xl","text-lg md:text-2xl"]'
         ~}}
     {{~/case~}}
 {{~/switch~}}

package/dist/views_static/components/teaser/group_teaser/group_teaser.hbs

@@ -1,7 +1,7 @@
 {{#if this.hasGroupItems}}
     {{#>components/grid/grid_group _backgroundColor=this.backgroundColor }} 
             {{~#if this.hasGroupTitle}}
-                <{{if this.headlineTag this.headlineTag "h2"}} class="text-2xl {{#unless this.isRelatedContent}} md:text-4xl{{else}} justifyLine{{/unless}} col-span-full py-0 font-title {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
+                <{{if this.headlineTag this.headlineTag "h2"}} class="text-2xl {{#unless this.isRelatedContent}} md:text-5xl{{else}} justifyLine{{/unless}} col-span-full py-0 font-title {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
                     {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-link" href="{{this.link.url}}">{{/if~}}
                         {{this.groupTitle}}
                     {{~#if this.hasLink}}</a>{{/if~}}

package/dist/views_static/components/teaser/group_teaser/group_teaser_accented.hbs

@@ -2,7 +2,7 @@
     {{#>components/grid/grid_group size=this.teaserSize }}
         <div class="grid items-start content-start h-auto grid-cols-12 col-span-12 py-5 mx-5 group-accented sm:p-5 sm:mx-0 rounded-tl-hr rounded-br-hr bg-highlight-1 gap-x-6 gap-y-5">
             {{~#if this.hasGroupTitle}}
-                <h2 class="text-2xl md:text-4xl px-5 sm:px-0 col-span-full pt-0 pb-4 font-title {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
+                <h2 class="text-2xl md:text-5xl px-5 sm:px-0 col-span-full pt-0 pb-4 font-title {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
                     {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}
                     {{this.groupTitle}}
                     {{~#if this.hasLink}}</a>{{/if~}}

package/dist/views_static/components/teaser/teaser_indextext.hbs

@@ -10,7 +10,7 @@
 >
     {{#if this.title}}
         <h3
-            class='text-2xl md:text-4xl font-title
+            class='text-2xl md:text-5xl font-title
                 {{~inline-switch this.teaserType '["highlighted"]' '[" text-white",""]'}}'
         >
             {{this.title}}

package/package.json

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

package/src/stories/Typography.mdx

@@ -92,8 +92,9 @@ Zur Auszeichnung von Überschriften stehen die folgenden Utility Klassen zur ver
 | `text-lg`           | `font-size: 1.125rem` <br /> `line-height: 1.5rem`   | `18px`<br />`24px` | Setzt die Eigenschaften `font-size` und `line-height` |
 | `text-xl`           | `font-size: 1.25rem` <br /> `line-height: 1.6875rem` | `20px`<br />`27px` | Setzt die Eigenschaften `font-size` und `line-height` |
 | `text-2xl`          | `font-size: 1.375rem` <br /> `line-height: 1.75rem`  | `22px`<br />`28px` | Setzt die Eigenschaften `font-size` und `line-height` |
-| `text-3xl`          | `font-size: 1.875rem` <br /> `line-height: 2.25rem`  | `30px`<br />`36px` | Setzt die Eigenschaften `font-size` und `line-height` |
-| `text-4xl`          | `font-size: 2.125rem` <br /> `line-height: 2.375rem` | `34px`<br />`38px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-3xl`          | `font-size: 1.625rem` <br /> `line-height: 2rem`     | `26px`<br />`32px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-4xl`          | `font-size: 1.875rem` <br /> `line-height: 2.25rem`  | `30px`<br />`36px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-5xl`          | `font-size: 2.125rem` <br /> `line-height: 2.375rem` | `34px`<br />`38px` | Setzt die Eigenschaften `font-size` und `line-height` |
 
 ### Verwendung RobotoSlab
 
@@ -142,6 +143,14 @@ eine der Klassen `text-{size}` gegben werden.
                 The quick brown fox jumped over the lazy dog.
             </dd>
         </div>
+        <div className="mt-6 flex items-start">
+            <dt className="!m-0 w-16 shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-6">
+                4xl
+            </dt>
+            <dd className="truncate text-5xl font-normal font-headingSerif">
+                The quick brown fox jumped over the lazy dog.
+            </dd>
+        </div>
     </dl>
 </div>
 
@@ -151,6 +160,7 @@ eine der Klassen `text-{size}` gegben werden.
 <p class="text-2xl font-headingSerif">The quick brown fox ...</p>
 <p class="text-3xl font-headingSerif">The quick brown fox ...</p>
 <p class="text-4xl font-headingSerif">The quick brown fox ...</p>
+<p class="text-5xl font-headingSerif">The quick brown fox ...</p>
 ```
 
 ### Verwendung Roboto Condensed

package/src/stories/views/components/banner/banner.storybook.hbs

@@ -1,6 +1,6 @@
 <div class="flex flex-col py-6 bg-slate-500">
     <div class="grid mb-4 grid-page">
-        <h1 class="text-3xl font-title col-full sm:col-main">Maximalausprägung mit Struktur Navigation</h1>
+        <h1 class="text-4xl font-title col-full sm:col-main">Maximalausprägung mit Struktur Navigation</h1>
     </div>
     {{#> components/banner/header/breadcrumb_wrapper _hasBannerImage=true _hasContentNav=true }}
         {{> components/navigation/breadcrumb/breadcrumb }}
@@ -34,7 +34,7 @@
 </div>
 <div class="flex flex-col py-6 bg-orange-500">
     <div class="grid mb-4 grid-page">
-        <h1 class="text-3xl font-title col-full sm:col-main">Maximalausprägung ohne Struktur Navigation</h1>
+        <h1 class="text-4xl font-title col-full sm:col-main">Maximalausprägung ohne Struktur Navigation</h1>
     </div>
     {{#> components/banner/header/breadcrumb_wrapper _hasBannerImage=true _hasContentNav=false }}
         {{> components/navigation/breadcrumb/breadcrumb }}
@@ -65,7 +65,7 @@
 </div>
 <div class="flex flex-col py-6 bg-green-800">
     <div class="grid mb-4 grid-page">
-        <h1 class="text-3xl font-title col-full sm:col-main">Maximalausprägung Mobil kein Bild</h1>
+        <h1 class="text-4xl font-title col-full sm:col-main">Maximalausprägung Mobil kein Bild</h1>
     </div>
     {{#> components/banner/header/breadcrumb_wrapper _hasBannerImage=true _hasContentNav=false}}
         {{> components/navigation/breadcrumb/breadcrumb }}
@@ -94,7 +94,7 @@
 </div>
 <div class="flex flex-col py-6 bg-orange-oregon dark:bg-black ">
     <div class="grid mb-4 grid-page">
-        <h1 class="text-3xl font-title col-full sm:col-main">Maximalausprägung kein Bild</h1>
+        <h1 class="text-4xl font-title col-full sm:col-main">Maximalausprägung kein Bild</h1>
     </div>
     {{#> components/banner/header/breadcrumb_wrapper _hasBannerImage=false _hasContentNav=false }}
         {{> components/navigation/breadcrumb/breadcrumb }}

package/src/stories/views/components/banner/header/headline.hbs

@@ -1,3 +1,3 @@
-<span class="block mt-2 text-3xl sm480:text-4xl font-title text-text dark:text-text-dark">
+<span class="block mt-2 text-4xl sm480:text-5xl font-title text-text dark:text-text-dark">
     {{> @partial-block }}   
 </span>

package/src/stories/views/components/event/calendar/event_calendar_event_teaser.hbs

@@ -6,7 +6,7 @@
                     <div class="flex flex-col  basis-2/12 w-2/12 align-top items-center justify-center px-4 py-3  border-dotted border-r border-event-calendar-secondary">
                         {{#with this.startDate}}
                             <span class='text-base font-serif'>{{this.weekdayNameShort}}</span>
-                            <span class='text-3xl font-serif font-bold'>{{this.day}}</span>
+                            <span class='text-4xl font-serif font-bold'>{{this.day}}</span>
                             <span class='text-base font-serif'>{{this.monthNameShort}}</span>
                         {{/with}}
                     </div>

package/src/stories/views/components/grid/grid_group_100_item_100.hbs

@@ -1,7 +1,7 @@
 <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>
+      <h2 class="text-5xl 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">

package/src/stories/views/components/grid/grid_group_100_item_100_with_background.hbs

@@ -1,7 +1,7 @@
  <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>
+      <h2 class="text-5xl 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%    

package/src/stories/views/components/grid/grid_group_100_item_25.hbs

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

package/src/stories/views/components/grid/grid_group_100_item_50.hbs

@@ -1,5 +1,5 @@
 {{#>components/grid/grid_group teaserSize="100"}}
-      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
+      <h2 class="text-5xl 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%    

package/src/stories/views/components/grid/grid_group_100_tabbed_25.hbs

@@ -1,27 +1,27 @@
 <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>
+        <h2 class="text-5xl 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">
+        <div class="flex items-center justify-center text-5xl 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">
+        <div class="flex items-center justify-center text-5xl 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">
+        <div class="flex items-center justify-center text-5xl 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">
+        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
           3/12 = 25%    
         </div>    
         {{/components/grid/grid_item}} 

package/src/stories/views/components/grid/grid_group_100_tabbed_33.hbs

@@ -1,7 +1,7 @@
 <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>
+      <h2 class="text-5xl 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%    

package/src/stories/views/components/grid/grid_group_100_tabbed_50.hbs

@@ -1,15 +1,15 @@
 <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>
+        <h2 class="text-5xl 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">
+        <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-4xl text-white bg-gray-500 aspect-video">
+        <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
           6/12 = 50%    
         </div> 
         {{/components/grid/grid_item}}

package/src/stories/views/components/grid/grid_group_33_item_100.hbs

@@ -1,7 +1,7 @@
  <div class="grid grid-page">
   <div class="{{> components/grid/grid_group_wrapper_classes }}">
 {{#>components/grid/grid_group teaserSize="33"}}
-      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 33%</h2>
+      <h2 class="text-5xl 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%    

package/src/stories/views/components/grid/grid_group_50_item_100.hbs

@@ -1,7 +1,7 @@
  <div class="grid grid-page">
   <div class="{{> components/grid/grid_group_wrapper_classes }}">
 {{#>components/grid/grid_group teaserSize="50"}}
-      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 50%</h2>
+      <h2 class="text-5xl 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%    

package/src/stories/views/components/grid/grid_group_66_item_100.hbs

@@ -1,7 +1,7 @@
   <div class="grid grid-page">
   <div class="{{> components/grid/grid_group_wrapper_classes }}">
  {{#>components/grid/grid_group teaserSize="66"}}
-      <h2 class="text-4xl headline--barrier col-span-full">Gruppen 66%</h2>
+      <h2 class="text-5xl 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%    

package/src/stories/views/components/teaser/components/teaser_title_classes.hbs

@@ -16,13 +16,13 @@ the 4 parameters are:
             {{~inline-switch
                 _size
                 '["hero","100","25"]'
-                '["text-lg md:text-4xl","text-lg md:text-4xl","text-lg","text-lg md:text-2xl"]'
+                '["text-lg md:text-5xl","text-lg md:text-5xl","text-lg","text-lg md:text-2xl"]'
             ~}}
         {{~else~}}
             {{~inline-switch
                 _size
                 '["hero","100","25"]'
-                '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]'
+                '["text-2xl md:text-5xl","text-2xl md:text-5xl","text-lg","text-2xl"]'
             ~}}
         {{~/if~}}
     {{~/case~}}
@@ -31,13 +31,13 @@ the 4 parameters are:
             {{~inline-switch
                 _size
                 '["hero","100","25"]'
-                '["text-lg md:text-4xl","text-lg md:text-4xl","text-lg","text-lg md:text-2xl"]'
+                '["text-lg md:text-5xl","text-lg md:text-5xl","text-lg","text-lg md:text-2xl"]'
             ~}}
         {{~else~}}
             {{~inline-switch
                 _size
                 '["hero","100","25"]'
-                '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]'
+                '["text-2xl md:text-5xl","text-2xl md:text-5xl","text-lg","text-2xl"]'
             ~}}
         {{~/if~}}
     {{~/case~}}
@@ -46,13 +46,13 @@ the 4 parameters are:
             {{~inline-switch
                 _size
                 '["hero","100","25"]'
-                '["text-lg md:text-4xl","text-lg md:text-4xl","text-lg","text-lg md:text-2xl"]'
+                '["text-lg md:text-5xl","text-lg md:text-5xl","text-lg","text-lg md:text-2xl"]'
             ~}}
         {{~else~}}
             {{~inline-switch
                 _size
                 '["hero","100","25"]'
-                '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]'
+                '["text-2xl md:text-5xl","text-2xl md:text-5xl","text-lg","text-2xl"]'
             ~}}
         {{~/if~}}
     {{~/case~}}
@@ -60,28 +60,28 @@ the 4 parameters are:
         {{~inline-switch
             _size
             '["hero","100","50"]'
-            '["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]'
+            '["text-2xl md:text-4xl","text-lg md:text-4xl","text-lg md:text-2xl"]'
         ~}}
     {{~/case~}}
     {{~#case 'event-alternative'~}}
         {{~inline-switch
             _size
             '["hero","100","50"]'
-            '["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]'
+            '["text-2xl md:text-4xl","text-lg md:text-4xl","text-lg md:text-2xl"]'
         ~}}
     {{~/case~}}
     {{~#case 'tabbox-alternative'~}}
         {{~inline-switch
             _size
             '["hero","100","50"]'
-            '["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]'
+            '["text-2xl md:text-4xl","text-lg md:text-4xl","text-lg md:text-2xl"]'
         ~}}
     {{~/case~}}
     {{~#case 'poster'~}}
         {{#if _isCopytext~}}
-            {{~#if this.showFullSize.isTrue~}}text-xl sm480:text-2xl md:text-4xl{{else}}text-xl sm480:text-2xl{{~/if~}}
+            {{~#if this.showFullSize.isTrue~}}text-xl sm480:text-2xl md:text-5xl{{else}}text-xl sm480:text-2xl{{~/if~}}
         {{else}}
-            {{~inline-switch _size '["50","33"]' '["text-2xl md:text-4xl","text-2xl"]'~}}
+            {{~inline-switch _size '["50","33"]' '["text-2xl md:text-5xl","text-2xl"]'~}}
         {{/if}}    
     {{~/case~}}
     {{~#case 'cluster'~}}
@@ -92,7 +92,7 @@ the 4 parameters are:
         {{/if}}
     {{~/case~}}
     {{~#case 'stage'~}}
-        {{~inline-switch _size '["100"]' '[" text-2xl md:text-4xl"," text-2xl"]'}}
+        {{~inline-switch _size '["100"]' '[" text-2xl md:text-5xl"," text-2xl"]'}}
     {{~/case~}}
     {{~#case 'calendar'~}}
        text-2xl
@@ -101,14 +101,14 @@ the 4 parameters are:
         {{~inline-switch
             _size
             '["hero","100","25"]'
-            '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-2xl md:text-lg","text-2xl"]'
+            '["text-2xl md:text-5xl","text-2xl md:text-5xl","text-2xl md:text-lg","text-2xl"]'
         ~}}
     {{~/case~}}
     {{~#case 'ticker-alternative'~}}
         {{~inline-switch
             _size
             '["hero","100","50"]'
-            '["text-2xl md:text-4xl","text-2xl md:text-2xl","text-lg md:text-2xl"]'
+            '["text-2xl md:text-5xl","text-2xl md:text-2xl","text-lg md:text-2xl"]'
         ~}}
     {{~/case~}}
 {{~/switch~}}

package/src/stories/views/components/teaser/group_teaser/group_teaser.hbs

@@ -1,7 +1,7 @@
 {{#if this.hasGroupItems}}
     {{#>components/grid/grid_group _backgroundColor=this.backgroundColor }} 
             {{~#if this.hasGroupTitle}}
-                <{{if this.headlineTag this.headlineTag "h2"}} class="text-2xl {{#unless this.isRelatedContent}} md:text-4xl{{else}} justifyLine{{/unless}} col-span-full py-0 font-title {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
+                <{{if this.headlineTag this.headlineTag "h2"}} class="text-2xl {{#unless this.isRelatedContent}} md:text-5xl{{else}} justifyLine{{/unless}} col-span-full py-0 font-title {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
                     {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-link" href="{{this.link.url}}">{{/if~}}
                         {{this.groupTitle}}
                     {{~#if this.hasLink}}</a>{{/if~}}

package/src/stories/views/components/teaser/group_teaser/group_teaser_accented.hbs

@@ -2,7 +2,7 @@
     {{#>components/grid/grid_group size=this.teaserSize }}
         <div class="grid items-start content-start h-auto grid-cols-12 col-span-12 py-5 mx-5 group-accented sm:p-5 sm:mx-0 rounded-tl-hr rounded-br-hr bg-highlight-1 gap-x-6 gap-y-5">
             {{~#if this.hasGroupTitle}}
-                <h2 class="text-2xl md:text-4xl px-5 sm:px-0 col-span-full pt-0 pb-4 font-title {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
+                <h2 class="text-2xl md:text-5xl px-5 sm:px-0 col-span-full pt-0 pb-4 font-title {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
                     {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}
                     {{this.groupTitle}}
                     {{~#if this.hasLink}}</a>{{/if~}}

package/src/stories/views/components/teaser/teaser_indextext.hbs

@@ -10,7 +10,7 @@
 >
     {{#if this.title}}
         <h3
-            class='text-2xl md:text-4xl font-title
+            class='text-2xl md:text-5xl font-title
                 {{~inline-switch this.teaserType '["highlighted"]' '[" text-white",""]'}}'
         >
             {{this.title}}

package/tailwind.config.js

@@ -59,7 +59,9 @@ module.exports = {
                 'lg': ['1.125rem', '1.5rem'],
                 'xl': ['1.25rem', '1.6875rem'],
                 '2xl': ['1.375rem', '1.75rem'],
-                '4xl': ['2.125rem', '2.375rem'],
+                '3xl': ['1.625rem', '2rem'],
+                '4xl': ['1.875rem', '2.25rem'],
+                '5xl': ['2.125rem', '2.375rem'],
             },
             boxShadow: {
                 'inner': 'inset 0 0px 5px 0 rgba(0, 0, 0, 0.25)',