hr-design-system-handlebars 1.82.10 → 1.83.0

package/dist/views_static/components/content/copytext/components/common/paragraphbox_wrapper.hbs

@@ -1,3 +1,3 @@
-<div class="ml-1 sm:ml-6 px-4 sm:px-6 border-l-[3px] border-gray-boulder overflow-auto {{#if _showFullsize}}clear-both mt-12 mb-8 sm:mt-14 sm:mb-14 {{else}}mb-8 sm:mb-5 sm:mt-6 mt-12 mr-0 sm:mr-5 w-full sm:w-1/2 sm:float-left{{/if}}">
+<div class="ml-1 sm:ml-6 px-4 sm:px-6 border-l-[3px] border-gray-boulder overflow-auto {{#if _showFullsize}}[&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 clear-both mt-12 mb-8 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14 {{else}}hr-copytext-teaser-half mb-8 sm:mb-5 sm:mt-6 mt-12 mr-0 sm:mr-5 w-full sm:w-1/2 sm:float-left{{/if}}">
     {{~> @partial-block ~}}
 </div>

package/dist/views_static/components/content/copytext/components/image/image.hbs

@@ -1,7 +1,7 @@
 {{#if this.showPortrait.isTrue }}
         {{#if this.showFullSize.isTrue }}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="mt-12 mb-8 sm480:mt-14 sm480:mb-14 clear-both article-full-width sm:article-narrow"
+                _cssClass="mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:my-14 clear-both article-full-width sm:article-narrow"
                 _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="100-copytext-portrait"
@@ -9,7 +9,7 @@
                 _isWebview=_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="mt-12 mb-8 sm480:mt-6 sm480:mb-5 sm480:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
+                _cssClass="hr-copytext-teaser-half mt-12 mb-8 sm:mt-6 sm:mb-5 sm480:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
                 _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="copytext-portrait"
@@ -19,7 +19,7 @@
 {{else}}
         {{#if this.showFullSize.isTrue}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="mt-12 mb-8 sm480:mt-14 sm480:mb-14 clear-both article-full-width sm:article-narrow"
+                _cssClass="mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:my-14 clear-both article-full-width sm:article-narrow"
                 _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="100-copytext"
@@ -27,7 +27,7 @@
                 _isWebview=_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="mt-12 mb-8 sm480:mt-6 sm480:mb-5 article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
+                _cssClass="hr-copytext-teaser-half mt-12 mb-8 sm:mt-6 sm:mb-5 article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
                 _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="copytext"

package/dist/views_static/components/content/copytext/components/paragraph/paragraph_body.hbs

@@ -1,9 +1,9 @@
 {{#if this.isText}}
-    <p class="mt-4 sm480:mt-5 text-lg leading-normal copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</p>
+    <p class="mt-4 sm:mt-5 text-lg leading-normal copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</p>
 {{/if}}
 {{#if this.isUl}}
-    <ul class="pl-9 mt-4 sm480:mt-5 overflow-hidden text-lg leading-normal list-disc copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ul>
+    <ul class="pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-disc copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ul>
 {{/if}}
 {{#if this.isOl}}
-    <ol class="pl-9 mt-4 sm480:mt-5 overflow-hidden text-lg leading-normal list-decimal copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ol>
+    <ol class="pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-decimal copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ol>
 {{/if}}

package/dist/views_static/components/content/copytext/components/podcastepisode.hbs

@@ -1,3 +1,3 @@
-<div class="{{#if this.showFullSize.isTrue }}clear-both mt-12 mb-8 sm:mt-14 sm:mb-14{{else}}sm:w-1/2 clear-both sm:float-left sm:mr-5 mt-12 mb-8 sm:mt-6 sm:mb-5{{/if}}">
+<div class="{{#if this.showFullSize.isTrue }}clear-both [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 mt-12 mb-8 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14{{else}}hr-copytext-teaser-half sm:w-1/2 clear-both sm:float-left sm:mr-5 mt-12 mb-8 sm:mt-6 sm:mb-5{{/if}}">
     {{> components/teaser/podcast/podcast _headlineTag="h3" _isCopytext=true }} 
 </div>

package/dist/views_static/components/content/copytext/components/posterteaser.hbs

@@ -1,3 +1,3 @@
-<div class="w-5/6 sm480:w-2/3 mx-auto {{#if this.showFullSize.isTrue }}clear-both pb-8 sm:pb-9 mt-12 sm:mt-14 {{else}}sm:w-1/2 clear-both sm:float-left mt-12 mb-8 sm:mt-6 sm:mb-5 sm:mr-5{{/if}}">
+<div class="article-narrow w-auto [&+h2]:mt-4 xs:article-full-width xs:mx-13 {{#if this.showFullSize.isTrue }}hr-copytext-teaser-full clear-both mb-8 mt-12 sm:my-14 sm:mx-26 {{else}}hr-copytext-teaser-half sm:w-1/2 clear-both sm:float-left mt-12 mb-8 sm:mt-6 sm:mb-5 sm:mr-5 sm:ml-0{{/if}}">
     {{> components/teaser/teaser_poster _isCopytext=true }} 
 </div>    

package/dist/views_static/components/content/copytext/components/video/video.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow mt-12 mb-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="hr-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
 {{/if}} 

package/dist/views_static/components/content/copytext/components/videolivestream.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow mt-12 mb-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="hr-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
 {{/if}} 

package/dist/views_static/components/page/base/page_header.hbs

@@ -1,4 +1,4 @@
-<header class="mt-3 sm480:mt-8">
+<header class="mt-1 sm:mt-8">
     {{#with this.label}}
         {{#> components/label/label_group _css="mb-2"}}
             {{> components/label/label _type=this.type _text=(loca this.loca)}}

package/dist/views_static/components/page/components/metadatabox.hbs

@@ -1,5 +1,5 @@
 {{#unless this.hideMetadatabox}}
-    <aside class="clear-both mt-5 border-y border-gray-scorpion dark:border-text-dark">
+    <aside class="clear-both mt-4 border-y border-gray-scorpion dark:border-text-dark sm:mt-5">
         <div class="flex clear-both w-full my-4 sm:my-4">
             <div class="self-center">
                 {{> components/page/components/author _hideFrom=false }}

package/dist/views_static/components/page/story/story_article.hbs

@@ -10,7 +10,7 @@
         {{#with this.teaseritemDS }}
             {{#if this.isImage}}
                 {{> components/content/copytext/components/image/figure
-                    _cssClass="article-full-width md:article-breakout mt-6 sm480:mt-7 "
+                    _cssClass="article-full-width md:article-breakout mt-5 sm:mt-7 "
                     _cssClassCaption="mx-5 md:mx-0"
                     _type="story"
                     _variant=(if this.showSquareImage.isTrue "100-top-sb-1x1" "100-top-sb")

package/package.json

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

package/src/assets/css/custom-utilities.css

@@ -6,7 +6,8 @@
     /*! ****************************/
     /*! Aspect Ratio with fallback */
     /*! ****************************/
-    .ar-auto, .ar-auto > img {
+    .ar-auto,
+    .ar-auto > img {
         aspect-ratio: auto;
     }
 
@@ -24,7 +25,8 @@
         }
     }
 
-    .ar-16-9, .ar-16-9 > img {
+    .ar-16-9,
+    .ar-16-9 > img {
         aspect-ratio: 16 / 9;
     }
 
@@ -42,7 +44,8 @@
         }
     }
 
-    .ar-16-7, .ar-16-7 > img {
+    .ar-16-7,
+    .ar-16-7 > img {
         aspect-ratio: 16 / 7;
     }
 
@@ -60,7 +63,8 @@
         }
     }
 
-    .ar-4-3, .ar-4-3 > img {
+    .ar-4-3,
+    .ar-4-3 > img {
         aspect-ratio: 4 / 3;
     }
 
@@ -78,7 +82,8 @@
         }
     }
 
-    .ar-4-1, .ar-4-1 > img {
+    .ar-4-1,
+    .ar-4-1 > img {
         aspect-ratio: 4 / 1;
     }
 
@@ -96,7 +101,8 @@
         }
     }
 
-    .ar-1-1, .ar-1-1 > img {
+    .ar-1-1,
+    .ar-1-1 > img {
         aspect-ratio: 1 / 1;
     }
 
@@ -113,7 +119,8 @@
             clear: both;
         }
     }
-    .ar-100-27, .ar-100-27 > img {
+    .ar-100-27,
+    .ar-100-27 > img {
         aspect-ratio: 100 / 27.1;
     }
 
@@ -131,7 +138,8 @@
         }
     }
 
-    .ar-9-16, .ar-9-16 > img {
+    .ar-9-16,
+    .ar-9-16 > img {
         aspect-ratio: 9 / 16;
     }
     @supports not (aspect-ratio: 9 / 16) {
@@ -148,7 +156,8 @@
         }
     }
 
-    .ar-7-16, .ar-7-16 > img {
+    .ar-7-16,
+    .ar-7-16 > img {
         aspect-ratio: 7 / 16;
     }
     @supports not (aspect-ratio: 7 / 16) {
@@ -200,10 +209,8 @@
         grid-template-columns:
             [full-width-start] minmax(var(--mobile-padding), var(--desktop-padding))
             [content-start] minmax(0, var(--breakout-size))
-            [narrow-start] min(
-                100% - (var(--mobile-padding) * 2),
-                var(--narrow-max-width)
-            ) [narrow-end]
+            [narrow-start] min(100% - (var(--mobile-padding) * 2), var(--narrow-max-width))
+            [narrow-end]
             minmax(0, var(--breakout-size)) [content-end]
             minmax(var(--mobile-padding), var(--desktop-padding)) [full-width-end];
         grid-column: main;
@@ -220,7 +227,7 @@
     .article-narrow {
         grid-column: narrow;
     }
-    .copytextWrapper > :not(.article-breakout, .article-full-width) {
+    .copytextWrapper > :not(.article-breakout, .article-full-width, .xs\:article-full-width) {
         grid-column: narrow;
     }
 

package/src/assets/fixtures/content/copytext/copytext_audio.json

@@ -91,6 +91,10 @@
                 }
             }
         },
+        {
+            "isHeadline": true,
+            "text": "Zwischenüberschrift unter Audio"
+        },
         {
             "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
         },
@@ -187,6 +191,118 @@
                 }
             }
         },
+        {
+            "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
+        },
+        {
+            "isHeadline": true,
+            "text": "Audio in halber Breite unter Bild in voller Breite"
+        },
+        {
+            "paragraphBoxItem": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "copytext_image_100",
+                "@->replaceToken": [
+                    {
+                        "@->token": "image",
+                        "@->value": "buchmesse-fahnen-102"
+                    }
+                ]
+            }
+        },
+        {
+            "paragraphBoxItem": {
+                "isAudio": true,
+                "isAudioOnDemand": true,
+                "showFullSize": {
+                    "isTrue": false
+                },
+                "label": {
+                    "type": "audio",
+                    "loca": "label_audio",
+                    "byline": {
+                        "bylineText": "00:20 Min."
+                    }
+                },
+                "audioAuthor": "Karsten Hufer",
+                "showAirdate": true,
+                "airdateDate": {
+                    "htmlDateTime": "2022-10-31T19:30+0200",
+                    "htmlDate": "31.10.2022",
+                    "date": "31.10.22",
+                    "dateSeparatorTime": "31.10.22, 19:30"
+                },
+                "toModel": {
+                    "audioElement": {
+                        "ardPlayerConfig": {
+                            "@->jsoninclude": "audio/audios.inc.json",
+                            "@->contentpath": "audio-1",
+                            "@->overrides": [
+                                {
+                                    "@->contentpath": "playerId",
+                                    "@->value": "2567"
+                                }
+                            ]
+                        },
+                        "ardPlayerJsonConfig": {
+                            "@->jsoninclude": "audio/audios.inc.json",
+                            "@->contentpath": "audio-1",
+                            "@->overrides": [
+                                {
+                                    "@->contentpath": "isAutoplay",
+                                    "@->value": false
+                                },
+                                {
+                                    "@->contentpath": "playerConfig.generic.isAutoplay",
+                                    "@->value": false
+                                },
+                                {
+                                    "@->contentpath": "playerConfig.web.isForcedVideoView",
+                                    "@->value": false
+                                },
+                                {
+                                    "@->contentpath": "playerId",
+                                    "@->value": "2567"
+                                }
+                            ]
+                        }
+                    },
+                    "mediaBacklinkToStoryTeaser": {
+                        "link": {
+                            "url": "/audioseite",
+                            "isTargetBlank": false
+                        },
+                        "readMoreScreenreader": "zum Audio",
+                        "title": "Musik macht deinen Tag",
+                        "isForeignBrand": false,
+                        "readMore": "zur Audio-Einzelseite",
+                        "hasIcon": false,
+                        "iconName": "extern"
+                    }
+                },
+                "teaseritem": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_50",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "lehrerin-ukraine-104"
+                        }
+                    ]
+                },
+
+                "teaserImage": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_50",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "lehrerin-ukraine-104"
+                        }
+                    ]
+                }
+            }
+        },
         {
             "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
         }

package/src/assets/fixtures/content/copytext/copytext_audio_livestream.json

@@ -90,6 +90,10 @@
                 }
             }
         },
+        {
+            "isHeadline": true,
+            "text": "Zwischenüberschrift unter Audio Event-Livestream"
+        },
         {
             "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
         },
@@ -185,6 +189,117 @@
                 }
             }
         },
+        {
+            "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
+        },
+        {
+            "isHeadline": true,
+            "text": "Audio-Livestream in halber Breite unter Bild in voller Breite"
+        },
+        {
+            "paragraphBoxItem": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "copytext_image_100",
+                "@->replaceToken": [
+                    {
+                        "@->token": "image",
+                        "@->value": "buchmesse-fahnen-102"
+                    }
+                ]
+            }
+        },
+        {
+            "paragraphBoxItem": {
+                "isAudio": true,
+                "isAudioEventLivestream": true,
+                "showFullSize": {
+                    "isTrue": false
+                },
+                "label": {
+                    "type": "livestream",
+                    "loca": "label_audio_event_livestream",
+                    "byline": {
+                        "bylineText": "Jetzt Live"
+                    }
+                },
+                "showAirdate": false,
+                "airdateDate": {
+                    "htmlDateTime": "2024-06-25T08:30+0200",
+                    "htmlDate": "25.06.2024",
+                    "date": "25.06.24",
+                    "dateSeparatorTime": "25.06.24, 08:30"
+                },
+                "toModel": {
+                    "audioLivestreamElement": {
+                        "ardPlayerConfig": {
+                            "@->jsoninclude": "audio/audios.inc.json",
+                            "@->contentpath": "audio-event-livestream",
+                            "@->overrides": [
+                                {
+                                    "@->contentpath": "playerId",
+                                    "@->value": "2567"
+                                }
+                            ]
+                        },
+                        "ardPlayerJsonConfig": {
+                            "@->jsoninclude": "audio/audios.inc.json",
+                            "@->contentpath": "audio-event-livestream",
+                            "@->overrides": [
+                                {
+                                    "@->contentpath": "isAutoplay",
+                                    "@->value": false
+                                },
+                                {
+                                    "@->contentpath": "playerConfig.generic.isAutoplay",
+                                    "@->value": false
+                                },
+                                {
+                                    "@->contentpath": "playerConfig.web.isForcedVideoView",
+                                    "@->value": false
+                                },
+                                {
+                                    "@->contentpath": "playerId",
+                                    "@->value": "2567"
+                                }
+                            ]
+                        }
+                    },
+                    "mediaBacklinkToStoryTeaser": {
+                        "link": {
+                            "url": "/audioseite",
+                            "isTargetBlank": false
+                        },
+                        "readMoreScreenreader": "zum Audio-Livestream",
+                        "title": "Musik macht deinen Tag",
+                        "isForeignBrand": false,
+                        "readMore": "zum Audio-Livestream",
+                        "hasIcon": false,
+                        "iconName": "extern"
+                    }
+                },
+                "teaseritem": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_50",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "lehrerin-ukraine-104"
+                        }
+                    ]
+                },
+
+                "teaserImage": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_50",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "lehrerin-ukraine-104"
+                        }
+                    ]
+                }
+            }
+        },
         {
             "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
         }

package/src/assets/fixtures/content/copytext/copytext_cite.json

@@ -9,11 +9,11 @@
         },
         {
             "isCite": true,
-            "text":"Wenn ich mein Leben noch einmal leben könnte, würde ich die gleichen Fehler machen. Aber ein bisschen früher damit ich mehr davon habe.",
+            "text": "Wenn ich mein Leben noch einmal leben könnte, würde ich die gleichen Fehler machen. Aber ein bisschen früher damit ich mehr davon habe.",
             "paragraphProperties": [
                 {
-                    "showFullSize":true,
-                    "citeAuthor":"Marlene Dietrich"
+                    "showFullSize": true,
+                    "citeAuthor": "Marlene Dietrich"
                 }
             ]
         },
@@ -22,11 +22,69 @@
         },
         {
             "isCite": true,
-            "text":"Wenn ich mein Leben noch einmal leben könnte, würde ich die gleichen Fehler machen. Aber ein bisschen früher damit ich mehr davon habe.",
+            "text": "Wenn ich mein Leben noch einmal leben könnte, würde ich die gleichen Fehler machen. Aber ein bisschen früher damit ich mehr davon habe.",
             "paragraphProperties": [
                 {
-                    "showFullSize":false,
-                    "citeAuthor":"Marlene Dietrich"
+                    "showFullSize": false,
+                    "citeAuthor": "Marlene Dietrich"
+                }
+            ]
+        },
+        {
+            "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
+        },
+        {
+            "isHeadline": true,
+            "text": "Zitat in voller Breite unter Bild in voller Breite"
+        },
+        {
+            "paragraphBoxItem": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "copytext_image_100",
+                "@->replaceToken": [
+                    {
+                        "@->token": "image",
+                        "@->value": "buchmesse-fahnen-102"
+                    }
+                ]
+            }
+        },
+        {
+            "isCite": true,
+            "text": "Wenn ich mein Leben noch einmal leben könnte, würde ich die gleichen Fehler machen. Aber ein bisschen früher damit ich mehr davon habe.",
+            "paragraphProperties": [
+                {
+                    "showFullSize": true,
+                    "citeAuthor": "Marlene Dietrich"
+                }
+            ]
+        },
+        {
+            "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
+        },
+        {
+            "isHeadline": true,
+            "text": "Zitat in halber Breite unter Bild in voller Breite"
+        },
+        {
+            "paragraphBoxItem": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "copytext_image_100",
+                "@->replaceToken": [
+                    {
+                        "@->token": "image",
+                        "@->value": "buchmesse-fahnen-102"
+                    }
+                ]
+            }
+        },
+        {
+            "isCite": true,
+            "text": "Wenn ich mein Leben noch einmal leben könnte, würde ich die gleichen Fehler machen. Aber ein bisschen früher damit ich mehr davon habe.",
+            "paragraphProperties": [
+                {
+                    "showFullSize": false,
+                    "citeAuthor": "Marlene Dietrich"
                 }
             ]
         },
@@ -34,4 +92,4 @@
             "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
         }
     ]
-}
+}