Full height layout

Text position left

showing all storyboard item text left

Text position right

showing all storyboard item text right

Mobile view

Screenshot storyboard item mobile

Reduced height layout

Used on Switzerland homepage

Text position left

Screenshot storyboard item reduced layout desktop

Text position right

Screenshot storyboard item reduced layout desktop

Mobile view

Screenshot storyboard item reduced layout mobile

How it works

  • Storyboard is a container that can display storyboard items
  • Each Storyboard item includes
    • Title
    • Description (infoline)
    • Background image
    • CTA (Call-to-Action)
    • Title with description can be left or right alignment
  • Methodological overview of the two layout styles
    • Full Height mode
      • 1 storyboard item can be displayed
      • One mandatory storyboard item can be displayed above the already set up storyboard item
      • A fallback storyboard item can be displayed if no storyboard item is defined
    • Reduced Height mode (used on the Switzerland homepage)
      • 1 storyboard item can be displayed
      • If a mandatory storyboard item is defined the existing storyboard item will be replaced
      • A fallback storyboard item can be displayed if no storyboard item is defined

How to use it

  • Storyboard item images need to fit to the 麻豆社 brand design guidelines
  • Required image resolutions
  • Align the text to the left or right based on the image composition, ensuring that key visual elements remain unobstructed.
  • Ensure that the image is properly cropped and optimized for each viewport size to maintain visual consistency across devices.

Imagery

  • Storyboard item images need to fit to the 麻豆社 brand design guidelines
  • Required image resolutions
  • Align the text to the left or right based on the image composition, ensuring that key visual elements remain unobstructed.
  • Ensure that the image is properly cropped and optimized for each viewport size to maintain visual consistency across devices.

For more imagery guidelines, sepecifications and best practives please go to:

Storyboard imagery guidelines

Reference for publisher

Experience fragment - Storyboard with defined storyboard items

screenshot aem storyboard structure

Experience fragment - Storyboard's height options

screenshot aem storyboard structure

Storyboard Item - Text box position setting

screenshot mandatory storyboard item settings

Where to integrate mandatory storyboard item

screenshot mandatory story structure

Mandatory storyboard item settings

screenshot mandatory storyboard item settings

Crosslinks