hr-design-system-handlebars 1.50.17 → 1.50.19

package/dist/assets/js/alpine.js

@@ -2,6 +2,7 @@ import AsyncAlpine from 'async-alpine'
 import collapse from '@alpinejs/collapse'
 import Toolkit from '@alpine-collective/toolkit'
 import Alpine from 'alpinejs'
+import intersect from '@alpinejs/intersect'
 import mainNavigationHandler from 'components/site_header/mainNavigationHandler.alpine'
 import flyoutHandler from 'components/site_header/flyoutHandler.alpine'
 import overlayHandler from 'components/site_header/overlayHandler.alpine'
@@ -33,6 +34,7 @@ Alpine.store('serviceID', {
 })
 Alpine.store('navIsVisible', true)
 Alpine.store('subNavIsVisible', false)
+Alpine.store('footerIsVisible', false)
 
 // Initialization of data handlers
 Alpine.data('mainNavigationHandler', mainNavigationHandler)
@@ -43,5 +45,7 @@ Alpine.data('dropdown', dropdown)
 // Initialization of plugins
 Alpine.plugin(Toolkit)
 Alpine.plugin(collapse)
+Alpine.plugin(intersect)
+
 
 Alpine.start()

package/dist/views/components/banner/banner.storybook.hbs

@@ -0,0 +1,124 @@
+<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>
+    </div>
+    {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=true  }}
+        {{> components/navigation/breadcrumb/breadcrumb }}
+    {{/components/banner/header/breadcrumb_wrapper }} 
+
+    {{#> components/banner/header/banner_wrapper _hasImage=true _hideOnMobile=false}}
+        {{#> components/banner/header/banner_overlay _hasBackground=true}}
+            {{#> components/banner/header/special_info _invert="true"}}
+                Montag bis Freitag von 5 bis 11.00 Uhr
+            {{/components/banner/header/special_info }}
+            {{#> components/banner/header/title_background _hasBackground=true}}
+                {{#> components/banner/header/topline }}
+                    Diese Sendung bringt euch gut in den Tag
+                {{/components/banner/header/topline }}
+                {{#> components/banner/header/headline ~}}
+                    Die hr3 Morningshow
+                    {{~#> components/banner/header/additional_info ~}}
+                        AdditionalInfo
+                    {{~/components/banner/header/additional_info ~}}
+                {{/components/banner/header/headline }}
+                {{#> components/banner/header/byline }}
+                        Aktualisiert am 03.11.23 um 12:33 Uhr
+                {{/components/banner/header/byline }}
+            {{/components/banner/header/title_background }}
+        {{/components/banner/header/banner_overlay }}
+        {{~> components/banner/header/banner_image _hideOnMobile=true }}   
+    {{/components/banner/header/banner_wrapper }}   
+    {{~#with this.structureNav}}
+        {{> components/banner/structure_nav/structure_nav}}
+    {{/with}}       
+</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>
+    </div>
+    {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=false }}
+        {{> components/navigation/breadcrumb/breadcrumb }}
+    {{/components/banner/header/breadcrumb_wrapper }} 
+
+    {{#> components/banner/header/banner_wrapper _hasImage=true _hideOnMobile=false}}
+        {{#> components/banner/header/banner_overlay _hasBackground=true}}
+            {{#> components/banner/header/special_info _invert="true"}}
+                Montag bis Freitag von 5 bis 11.00 Uhr
+            {{/components/banner/header/special_info }}
+            {{#> components/banner/header/title_background _hasBackground=true}}
+                {{#> components/banner/header/topline }}
+                    Diese Sendung bringt euch gut in den Tag
+                {{/components/banner/header/topline }}
+                {{#> components/banner/header/headline ~}}
+                    Die hr3 Morningshow
+                    {{~#> components/banner/header/additional_info ~}}
+                        AdditionalInfo
+                    {{~/components/banner/header/additional_info ~}}
+                {{/components/banner/header/headline }}
+                {{#> components/banner/header/byline }}
+                        Aktualisiert am 03.11.23 um 12:33 Uhr
+                {{/components/banner/header/byline }}
+            {{/components/banner/header/title_background }}
+        {{/components/banner/header/banner_overlay }}
+        
+        {{~> components/banner/header/banner_image }}
+    {{/components/banner/header/banner_wrapper }}         
+</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>
+    </div>
+    {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=false}}
+        {{> components/navigation/breadcrumb/breadcrumb }}
+    {{/components/banner/header/breadcrumb_wrapper }} 
+
+    {{#> components/banner/header/banner_wrapper _hasImage=true _hideOnMobile=true}}
+        {{#> components/banner/header/banner_overlay _hasBackground=true _hideOnMobile=true}}
+            {{#> components/banner/header/title_background _hasBackground=true}}
+                {{#> components/banner/header/topline }}
+                    Diese Sendung bringt euch gut in den Tag
+                {{/components/banner/header/topline }}
+                {{#> components/banner/header/headline ~}}
+                    Die hr3 Morningshow
+                    {{~#> components/banner/header/additional_info ~}}
+                        AdditionalInfo
+                    {{~/components/banner/header/additional_info ~}}
+                {{/components/banner/header/headline }}
+                {{#> components/banner/header/byline }}
+                        Aktualisiert am 03.11.23 um 12:33 Uhr
+                {{/components/banner/header/byline }}
+            {{/components/banner/header/title_background }}
+        {{/components/banner/header/banner_overlay }}
+        {{~> components/banner/header/banner_image _hideOnMobile=true }}
+        
+    {{/components/banner/header/banner_wrapper }}         
+</div>
+<div class="flex flex-col py-6 bg-white 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>
+    </div>
+    {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=false }}
+        {{> components/navigation/breadcrumb/breadcrumb }}
+    {{/components/banner/header/breadcrumb_wrapper }} 
+    {{#> components/banner/header/banner_wrapper _hasImage=false _hideOnMobile=false}}
+        {{#> components/banner/header/banner_overlay _hasBackground=false}}
+            {{#> components/banner/header/special_info _invert="true"}}
+                Montag bis Freitag von 5 bis 11.00 Uhr
+            {{/components/banner/header/special_info }}
+            {{#> components/banner/header/title_background _hasBackground=false}}
+                {{#> components/banner/header/topline }}
+                    Diese Sendung bringt euch gut in den Tag
+                {{/components/banner/header/topline }}
+                {{#> components/banner/header/headline ~}}
+                    Die hr3 Morningshow
+                    {{~#> components/banner/header/additional_info ~}}
+                        AdditionalInfo
+                    {{~/components/banner/header/additional_info ~}}
+                {{/components/banner/header/headline }}
+                {{#> components/banner/header/byline }}
+                        Aktualisiert am 03.11.23 um 12:33 Uhr
+                {{/components/banner/header/byline }}
+            {{/components/banner/header/title_background }}
+        {{/components/banner/header/banner_overlay }} 
+    {{/components/banner/header/banner_wrapper }}          
+</div>

package/dist/views/components/banner/copyright/tooltip.hbs

@@ -0,0 +1,17 @@
+<div class="absolute top-0 right-0 z-50 p-1 {{#if _hideOnMobile}}hidden lg:flex{{/if}}">
+  <figcaption class="relative flex flex-row group"> 
+    <div class="absolute items-center h-6 px-2 py-1 m-1 text-xs font-medium rounded opacity-0 pointer-events-none w-max font-headingSerif bg-white/60 dark:bg-black/60 dark:text-text-dark text-text group-hover:opacity-100 group-hover:static">
+        {{#if _captionText}}
+            <span class="block mr-1">{{_captionText}}</span>
+        {{/if}}
+        {{#if _copyrightText}}
+            <footer class="block">
+                <small class="text-xs">{{~loca "banner_image_copyright"}} {{_copyrightText}}</small>
+            </footer>   
+        {{/if}}
+    </div>
+    <button aria-hidden="true" class="inline-flex items-center justify-center w-6 h-6 m-1 leading-7 rounded text-text font-heading bg-white/80 dark:bg-black/60 dark:text-text-dark">
+        {{> components/base/image/icon _icon="copyright" _addClass="w-4 h-4 fill-text dark:fill-text-dark"}}                
+    </button>
+  </figcaption>
+</div>

package/dist/views/components/banner/header/additional_info.hbs

@@ -0,0 +1 @@
+<span class="block mt-2 text-lg font-normal sm480:text-xl md:ml-3 font-heading md:inline">{{> @partial-block }}</span>

package/dist/views/components/banner/header/banner_image.hbs

@@ -0,0 +1,13 @@
+{{#with this.bannerImage}}
+    {{#if ../bannerLink}}
+        <a href="{{../bannerLink}}">
+    {{/if}}
+    {{#unless ../_hideOnMobile }}
+        {{~> components/base/image/responsive_image _type="banner" _variant="default" _addClass="" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+    {{else}}
+        {{~> components/base/image/responsive_image _type="banner" _variant="mobileHidden" _addClass="hidden lg:block" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+    {{/unless}}
+    {{#if ../bannerLink}}
+        </a>
+    {{/if}}
+{{/with}}

package/dist/views/components/banner/header/banner_overlay.hbs

@@ -0,0 +1,3 @@
+{{#if _hasBackground}}<div class="{{#if _hideOnMobile}}lg:absolute lg:bottom-0 lg:left-0 lg:right-0 lg:z-50{{else}}absolute bottom-0 left-0 right-0 z-50 print:absolute{{/if}}">{{/if}}
+    {{> @partial-block }}
+{{#if _hasBackground}}</div>{{/if}}

package/dist/views/components/banner/header/banner_wrapper.hbs

@@ -0,0 +1,7 @@
+<div class="grid grid-page w-full order-2{{#if _hasImage}} overflow-hidden -image{{else}} -text{{/if}}{{~#if _hideOnMobile}} -hideOnMobile{{/if}}">
+    <div role="banner" class="grid col-full sm:col-main relative{{#unless _hasImage}} mx-4 md:mx-5 lg:mx-10 border-b border-gray-boulder pb-4{{/unless}}">
+        <div class="relative {{#if _hasImage}}-hasImage{{~#if _hideOnMobile}} aspect-auto bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{/if}}">
+            {{> @partial-block }}
+        </div>
+    </div>
+</div>

package/dist/views/components/banner/header/breadcrumb_wrapper.hbs

@@ -0,0 +1,6 @@
+<div class="grid grid-page {{#if _hasContentNav }}order-4{{else}}order-1 py-2 [&:has(+.-image)]:order-4 lg:[&:has(+.-image.-hideOnMobile)]:order-1 [&:has(+.-image.-hideOnMobile)]:order-1 lg:[&:has(+.-image)]:py-0 lg:[&:has(+.-image)]:-mb-9 lg:[&:has(+.-image)]:order-1 lg:[&:has(+.-image)]:pt-3 z-10 bg-white lg:bg-transparent{{/if}}">
+    <div class="col-full sm:col-main{{#if _hasContentNav }} bg-white py-2{{else}}{{/if}}">
+        {{> @partial-block }}
+    </div>
+</div>
+{{!--  --}}

package/dist/views/components/banner/header/byline.hbs

@@ -0,0 +1 @@
+<p class="block mt-3 text-xs sm480:text-sm font-headingSerif text-byline dark:text-text-dark ">{{> @partial-block }}</p>

package/dist/views/components/banner/header/headline.hbs

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

package/dist/views/components/banner/header/special_info.hbs

@@ -0,0 +1,3 @@
+<span class="px-5 md:px-5 lg:px-10 py-1.5 text-sm rounded-tr-lg inline-block leading-5 font-headingSerif {{inline-switch _invert '["true","false"]' '["text-structure-nav-text bg-structure-nav","text-primary bg-white","text-primary bg-white"]'}}">
+    {{> @partial-block }}
+</span>

package/dist/views/components/banner/header/title_background.hbs

@@ -0,0 +1,3 @@
+{{#if _hasBackground}}<div class="inline-block w-full px-4 pb-3 bg-white/60 dark:bg-black/60 md:px-5 lg:px-10">{{/if}}
+    {{> @partial-block }}
+{{#if _hasBackground}}</div>{{/if}}

package/dist/views/components/banner/header/topline.hbs

@@ -0,0 +1 @@
+<span class="font-title text-lg sm480:text-xl block mt-3.5 text-text dark:text-text-dark">{{> @partial-block }}</span>

package/dist/views/components/banner/structure_nav/structure_nav.hbs

@@ -0,0 +1,34 @@
+{{#with this.contentNav}}
+    <div class="grid order-3 grid-page">       
+        <nav class="md:px-5 lg:px-10 col-full sm:col-main bg-structure-nav"
+            x-data="{ isOpen: false}">
+            <div class="relative flex flex-wrap items-center mx-auto" @click.outside="isOpen = false"> 
+                {{#> components/button/button _size="lg" _variant="tertiary" _disableButtonPress=true _alpineClick="isOpen = !isOpen" _css="md:hidden mr-2" _onBackground=true}}
+                    <span class="hidden" :class="{ 'hidden': isOpen }">
+                        {{> components/button/components/button_icon _icon="burger--weiss" _iconmap="icons" _css="fill-structure-nav-text" }}
+                    </span> 
+                    <span class="hidden" :class="{ 'hidden': !isOpen }">
+                        {{> components/button/components/button_icon _icon="close" _iconmap="icons" _css="fill-structure-nav-text" }}
+                    </span>
+                {{/components/button/button}}
+                <span class="md:hidden text-structure-nav-text">{{this.title}}</span>
+                <div class="absolute z-10 w-full top-9 md:static md:block md:w-auto" id="navbar-default" 
+                    :class="isOpen ? '' : 'hidden'"
+                    >
+                    <ul class="flex flex-col font-medium bg-white md:bg-transparent md:flex-row md:space-x-3 rtl:space-x-reverse"> 
+                        {{~#each this.contentNavEntries~}}
+                            <li class="border-b border-structure-nav md:border-b-0">
+                                {{#> "components/base/link" _link=this.link _css="block w-full px-3 py-2 text-base font-bold break-words text-structure-nav-text-mobile md:text-structure-nav-text hover:underline"}}
+                                    {{this.content.title}}
+                                {{/components/base/link}}
+                                {{#*inline "css"~}}
+                                    {{#if @first }}md:pl-0{{/if}}
+                                {{~/inline}}
+                            </li>
+                        {{~/each~}}
+                    </ul>
+                </div>
+            </div>
+        </nav> 
+    </div>
+{{/with}}

package/dist/views/components/base/image/responsive_image.hbs

@@ -10,7 +10,6 @@
 '_disableNoScript' don't add no script fallback
 
 --}}
-
 {{#withParam this.responsiveImage _type _variant }}
     {{#if this.asPicture}}
         <picture class="{{~#if ../_addClass}} {{../_addClass}}{{/if}}">
@@ -26,7 +25,7 @@
                            {{#with this.srcset}} srcset="{{this}}"{{/with}}>
                 {{/each}}
             {{/with}}
-                <img class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
+                <img class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_title}} title="{{../_title}}"{{~/if}} {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
         </picture>
     {{/if}}
 
@@ -42,9 +41,11 @@
                     loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
                  {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
-                alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}" class="w-full{{~#with ../../_addClassImg }} {{this}}{{/with}}" {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
+                alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}"
+                class="w-full{{~#with ../../_addClassImg }} {{this}}{{/with}}"
+                {{~#if ../../_title}} title="{{../../_title}}"{{~/if}}
+                {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
             {{~#with ../../_addClass }}</div>{{/with}}
         {{/with}}
-
     {{/if}}
 {{/withParam}}

package/dist/views/components/footer/page_footer.hbs

@@ -1,4 +1,5 @@
-<footer class="flex justify-center w-full text-base border-t cy-footer pb-footer-padding-bottom text-footer-text print:hidden bg-footer-bg border-footer-border js-pageFooter" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter" >
+<footer class="relative flex justify-center w-full text-base border-t cy-footer pb-footer-padding-bottom text-footer-text print:hidden bg-footer-bg border-footer-border js-pageFooter" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter" >
+    <div class="absolute top-feature-box-height" x-data x-intersect="$store.footerIsVisible = true" x-intersect:leave="$store.footerIsVisible = false"></div>
     <div class="flex md:container lg:px-10">
         <span class="hidden">Footer Navigation</span>
                 

package/dist/views/components/navigation/breadcrumb/breadcrumb.hbs

@@ -1,7 +1,8 @@
-<nav id="breadcrumb-nav" class="print:hidden{{~#unless this.showBreadcrumbTitleAlways}} hide-last-item-below-sm{{/unless~}}"
-        role="navigation"
-        aria-label="{{loca "breadcrumb_headline"}}"
->   <ul>
+<nav id="breadcrumb-nav" class="print:hidden px-4 md:px-5 lg:px-10 inline-block bg-white rounded-r{{~#unless this.showBreadcrumbTitleAlways}} hide-last-item-below-sm{{/unless~}}"
+     role="navigation"
+     aria-label="{{loca "breadcrumb_headline"}}"
+>
+    <ul>
         {{#with this.breadcrumbSsi}}
             {{> components/base/loadSSI _templatePath="components/navigation/breadcrumb/breadcrumb_items.ssi"}}
         {{/with}}

package/dist/views/components/page/page.hbs

@@ -65,7 +65,8 @@
                     </div>
                 </div>
             </main>
-        {{!-- {{> components/footer/page_footer }} --}}
+            {{> components/top_button/top_button }}
+            {{> components/footer/page_footer }}
         </div>
     </body>
 </html>

package/dist/views/components/top_button/top_button.hbs

@@ -0,0 +1,24 @@
+<div class="h-8" x-data="{ isVisible: false }">
+    <div class="grid h-8 grid-page z-100" :class="{ 'fixed bottom-feature-box-height left-0 w-full': !$store.footerIsVisible }">
+        <div class="flex justify-end h-8 col-full sm:col-main"
+        :class="{ 'bg-white': $store.footerIsVisible }">
+            <button
+                @scroll.window="isVisible = (window.pageYOffset > (window.innerHeight || (document.documentElement || document.body).clientHeight))"
+                @click="window.scrollTo({top: 0, behavior: 'smooth'})"
+                x-show="isVisible"
+                x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-500 transform order-first"
+                x-transition:enter-start="opacity-0 -translate-y-8"
+                x-transition:enter-end="opacity-100 translate-y-0"
+                x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
+                x-transition:leave-start="opacity-100 translate-y-0"
+                x-transition:leave-end="opacity-0 translate-y-12"               
+                class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-3 h-max mr-2 [@media(min-width:1170px)]:-mr-14"
+                >
+                {{> components/base/image/icon _icon="arrow-up"  _addClass="w-5 h-5 fill-current dark:fill-link-dark"}}            
+            </button>
+        </div>
+    </div>
+    {{! Dieses DIV ist notwendig um bei Seiten mit einem Hintergrund zu vermeiden dass unten eine Lücke entsteht bei der das hintergrundbild durchscheint}}
+    {{! TODO: Wenn Alle Seiten (auch artikel) auf grid umgestellt sind kann unter den Contentschlauch ein padding hinzugefügt werden. dann kann das hier umgebaut werden }}
+    <div class="grid h-8 grid-page" :class="{ 'hidden': $store.footerIsVisible }"><div class="flex justify-end h-8 bg-white col-full sm:col-main"></div></div>
+</div>

package/dist/views_static/components/banner/banner.storybook.hbs

@@ -0,0 +1,124 @@
+<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>
+    </div>
+    {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=true  }}
+        {{> components/navigation/breadcrumb/breadcrumb }}
+    {{/components/banner/header/breadcrumb_wrapper }} 
+
+    {{#> components/banner/header/banner_wrapper _hasImage=true _hideOnMobile=false}}
+        {{#> components/banner/header/banner_overlay _hasBackground=true}}
+            {{#> components/banner/header/special_info _invert="true"}}
+                Montag bis Freitag von 5 bis 11.00 Uhr
+            {{/components/banner/header/special_info }}
+            {{#> components/banner/header/title_background _hasBackground=true}}
+                {{#> components/banner/header/topline }}
+                    Diese Sendung bringt euch gut in den Tag
+                {{/components/banner/header/topline }}
+                {{#> components/banner/header/headline ~}}
+                    Die hr3 Morningshow
+                    {{~#> components/banner/header/additional_info ~}}
+                        AdditionalInfo
+                    {{~/components/banner/header/additional_info ~}}
+                {{/components/banner/header/headline }}
+                {{#> components/banner/header/byline }}
+                        Aktualisiert am 03.11.23 um 12:33 Uhr
+                {{/components/banner/header/byline }}
+            {{/components/banner/header/title_background }}
+        {{/components/banner/header/banner_overlay }}
+        {{~> components/banner/header/banner_image _hideOnMobile=true }}   
+    {{/components/banner/header/banner_wrapper }}   
+    {{~#with this.structureNav}}
+        {{> components/banner/structure_nav/structure_nav}}
+    {{/with}}       
+</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>
+    </div>
+    {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=false }}
+        {{> components/navigation/breadcrumb/breadcrumb }}
+    {{/components/banner/header/breadcrumb_wrapper }} 
+
+    {{#> components/banner/header/banner_wrapper _hasImage=true _hideOnMobile=false}}
+        {{#> components/banner/header/banner_overlay _hasBackground=true}}
+            {{#> components/banner/header/special_info _invert="true"}}
+                Montag bis Freitag von 5 bis 11.00 Uhr
+            {{/components/banner/header/special_info }}
+            {{#> components/banner/header/title_background _hasBackground=true}}
+                {{#> components/banner/header/topline }}
+                    Diese Sendung bringt euch gut in den Tag
+                {{/components/banner/header/topline }}
+                {{#> components/banner/header/headline ~}}
+                    Die hr3 Morningshow
+                    {{~#> components/banner/header/additional_info ~}}
+                        AdditionalInfo
+                    {{~/components/banner/header/additional_info ~}}
+                {{/components/banner/header/headline }}
+                {{#> components/banner/header/byline }}
+                        Aktualisiert am 03.11.23 um 12:33 Uhr
+                {{/components/banner/header/byline }}
+            {{/components/banner/header/title_background }}
+        {{/components/banner/header/banner_overlay }}
+        
+        {{~> components/banner/header/banner_image }}
+    {{/components/banner/header/banner_wrapper }}         
+</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>
+    </div>
+    {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=false}}
+        {{> components/navigation/breadcrumb/breadcrumb }}
+    {{/components/banner/header/breadcrumb_wrapper }} 
+
+    {{#> components/banner/header/banner_wrapper _hasImage=true _hideOnMobile=true}}
+        {{#> components/banner/header/banner_overlay _hasBackground=true _hideOnMobile=true}}
+            {{#> components/banner/header/title_background _hasBackground=true}}
+                {{#> components/banner/header/topline }}
+                    Diese Sendung bringt euch gut in den Tag
+                {{/components/banner/header/topline }}
+                {{#> components/banner/header/headline ~}}
+                    Die hr3 Morningshow
+                    {{~#> components/banner/header/additional_info ~}}
+                        AdditionalInfo
+                    {{~/components/banner/header/additional_info ~}}
+                {{/components/banner/header/headline }}
+                {{#> components/banner/header/byline }}
+                        Aktualisiert am 03.11.23 um 12:33 Uhr
+                {{/components/banner/header/byline }}
+            {{/components/banner/header/title_background }}
+        {{/components/banner/header/banner_overlay }}
+        {{~> components/banner/header/banner_image _hideOnMobile=true }}
+        
+    {{/components/banner/header/banner_wrapper }}         
+</div>
+<div class="flex flex-col py-6 bg-white 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>
+    </div>
+    {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=false }}
+        {{> components/navigation/breadcrumb/breadcrumb }}
+    {{/components/banner/header/breadcrumb_wrapper }} 
+    {{#> components/banner/header/banner_wrapper _hasImage=false _hideOnMobile=false}}
+        {{#> components/banner/header/banner_overlay _hasBackground=false}}
+            {{#> components/banner/header/special_info _invert="true"}}
+                Montag bis Freitag von 5 bis 11.00 Uhr
+            {{/components/banner/header/special_info }}
+            {{#> components/banner/header/title_background _hasBackground=false}}
+                {{#> components/banner/header/topline }}
+                    Diese Sendung bringt euch gut in den Tag
+                {{/components/banner/header/topline }}
+                {{#> components/banner/header/headline ~}}
+                    Die hr3 Morningshow
+                    {{~#> components/banner/header/additional_info ~}}
+                        AdditionalInfo
+                    {{~/components/banner/header/additional_info ~}}
+                {{/components/banner/header/headline }}
+                {{#> components/banner/header/byline }}
+                        Aktualisiert am 03.11.23 um 12:33 Uhr
+                {{/components/banner/header/byline }}
+            {{/components/banner/header/title_background }}
+        {{/components/banner/header/banner_overlay }} 
+    {{/components/banner/header/banner_wrapper }}          
+</div>

package/dist/views_static/components/banner/copyright/tooltip.hbs

@@ -0,0 +1,17 @@
+<div class="absolute top-0 right-0 z-50 p-1 {{#if _hideOnMobile}}hidden lg:flex{{/if}}">
+  <figcaption class="relative flex flex-row group"> 
+    <div class="absolute items-center h-6 px-2 py-1 m-1 text-xs font-medium rounded opacity-0 pointer-events-none w-max font-headingSerif bg-white/60 dark:bg-black/60 dark:text-text-dark text-text group-hover:opacity-100 group-hover:static">
+        {{#if _captionText}}
+            <span class="block mr-1">{{_captionText}}</span>
+        {{/if}}
+        {{#if _copyrightText}}
+            <footer class="block">
+                <small class="text-xs">{{~loca "banner_image_copyright"}} {{_copyrightText}}</small>
+            </footer>   
+        {{/if}}
+    </div>
+    <button aria-hidden="true" class="inline-flex items-center justify-center w-6 h-6 m-1 leading-7 rounded text-text font-heading bg-white/80 dark:bg-black/60 dark:text-text-dark">
+        {{> components/base/image/icon _icon="copyright" _addClass="w-4 h-4 fill-text dark:fill-text-dark"}}                
+    </button>
+  </figcaption>
+</div>

package/dist/views_static/components/banner/header/additional_info.hbs

@@ -0,0 +1 @@
+<span class="block mt-2 text-lg font-normal sm480:text-xl md:ml-3 font-heading md:inline">{{> @partial-block }}</span>

package/dist/views_static/components/banner/header/banner_image.hbs

@@ -0,0 +1,13 @@
+{{#with this.bannerImage}}
+    {{#if ../bannerLink}}
+        <a href="{{../bannerLink}}">
+    {{/if}}
+    {{#unless ../_hideOnMobile }}
+        {{~> components/base/image/responsive_image _type="banner" _variant="default" _addClass="" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+    {{else}}
+        {{~> components/base/image/responsive_image _type="banner" _variant="mobileHidden" _addClass="hidden lg:block" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+    {{/unless}}
+    {{#if ../bannerLink}}
+        </a>
+    {{/if}}
+{{/with}}

package/dist/views_static/components/banner/header/banner_overlay.hbs

@@ -0,0 +1,3 @@
+{{#if _hasBackground}}<div class="{{#if _hideOnMobile}}lg:absolute lg:bottom-0 lg:left-0 lg:right-0 lg:z-50{{else}}absolute bottom-0 left-0 right-0 z-50 print:absolute{{/if}}">{{/if}}
+    {{> @partial-block }}
+{{#if _hasBackground}}</div>{{/if}}

package/dist/views_static/components/banner/header/banner_wrapper.hbs

@@ -0,0 +1,7 @@
+<div class="grid grid-page w-full order-2{{#if _hasImage}} overflow-hidden -image{{else}} -text{{/if}}{{~#if _hideOnMobile}} -hideOnMobile{{/if}}">
+    <div role="banner" class="grid col-full sm:col-main relative{{#unless _hasImage}} mx-4 md:mx-5 lg:mx-10 border-b border-gray-boulder pb-4{{/unless}}">
+        <div class="relative {{#if _hasImage}}-hasImage{{~#if _hideOnMobile}} aspect-auto bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{/if}}">
+            {{> @partial-block }}
+        </div>
+    </div>
+</div>

package/dist/views_static/components/banner/header/breadcrumb_wrapper.hbs

@@ -0,0 +1,6 @@
+<div class="grid grid-page {{#if _hasContentNav }}order-4{{else}}order-1 py-2 [&:has(+.-image)]:order-4 lg:[&:has(+.-image.-hideOnMobile)]:order-1 [&:has(+.-image.-hideOnMobile)]:order-1 lg:[&:has(+.-image)]:py-0 lg:[&:has(+.-image)]:-mb-9 lg:[&:has(+.-image)]:order-1 lg:[&:has(+.-image)]:pt-3 z-10 bg-white lg:bg-transparent{{/if}}">
+    <div class="col-full sm:col-main{{#if _hasContentNav }} bg-white py-2{{else}}{{/if}}">
+        {{> @partial-block }}
+    </div>
+</div>
+{{!--  --}}

package/dist/views_static/components/banner/header/byline.hbs

@@ -0,0 +1 @@
+<p class="block mt-3 text-xs sm480:text-sm font-headingSerif text-byline dark:text-text-dark ">{{> @partial-block }}</p>

package/dist/views_static/components/banner/header/headline.hbs

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

package/dist/views_static/components/banner/header/special_info.hbs

@@ -0,0 +1,3 @@
+<span class="px-5 md:px-5 lg:px-10 py-1.5 text-sm rounded-tr-lg inline-block leading-5 font-headingSerif {{inline-switch _invert '["true","false"]' '["text-structure-nav-text bg-structure-nav","text-primary bg-white","text-primary bg-white"]'}}">
+    {{> @partial-block }}
+</span>

package/dist/views_static/components/banner/header/title_background.hbs

@@ -0,0 +1,3 @@
+{{#if _hasBackground}}<div class="inline-block w-full px-4 pb-3 bg-white/60 dark:bg-black/60 md:px-5 lg:px-10">{{/if}}
+    {{> @partial-block }}
+{{#if _hasBackground}}</div>{{/if}}

package/dist/views_static/components/banner/header/topline.hbs

@@ -0,0 +1 @@
+<span class="font-title text-lg sm480:text-xl block mt-3.5 text-text dark:text-text-dark">{{> @partial-block }}</span>

package/dist/views_static/components/banner/structure_nav/structure_nav.hbs

@@ -0,0 +1,34 @@
+{{#with this.contentNav}}
+    <div class="grid order-3 grid-page">       
+        <nav class="md:px-5 lg:px-10 col-full sm:col-main bg-structure-nav"
+            x-data="{ isOpen: false}">
+            <div class="relative flex flex-wrap items-center mx-auto" @click.outside="isOpen = false"> 
+                {{#> components/button/button _size="lg" _variant="tertiary" _disableButtonPress=true _alpineClick="isOpen = !isOpen" _css="md:hidden mr-2" _onBackground=true}}
+                    <span class="hidden" :class="{ 'hidden': isOpen }">
+                        {{> components/button/components/button_icon _icon="burger--weiss" _iconmap="icons" _css="fill-structure-nav-text" }}
+                    </span> 
+                    <span class="hidden" :class="{ 'hidden': !isOpen }">
+                        {{> components/button/components/button_icon _icon="close" _iconmap="icons" _css="fill-structure-nav-text" }}
+                    </span>
+                {{/components/button/button}}
+                <span class="md:hidden text-structure-nav-text">{{this.title}}</span>
+                <div class="absolute z-10 w-full top-9 md:static md:block md:w-auto" id="navbar-default" 
+                    :class="isOpen ? '' : 'hidden'"
+                    >
+                    <ul class="flex flex-col font-medium bg-white md:bg-transparent md:flex-row md:space-x-3 rtl:space-x-reverse"> 
+                        {{~#each this.contentNavEntries~}}
+                            <li class="border-b border-structure-nav md:border-b-0">
+                                {{#> "components/base/link" _link=this.link _css="block w-full px-3 py-2 text-base font-bold break-words text-structure-nav-text-mobile md:text-structure-nav-text hover:underline"}}
+                                    {{this.content.title}}
+                                {{/components/base/link}}
+                                {{#*inline "css"~}}
+                                    {{#if @first }}md:pl-0{{/if}}
+                                {{~/inline}}
+                            </li>
+                        {{~/each~}}
+                    </ul>
+                </div>
+            </div>
+        </nav> 
+    </div>
+{{/with}}