Story Split Component

Desktop view

Mobile view

Live example

Created example

How it works

The component is meant to make section on a page stand out more clearly so the webpages content be more engaging and picture-driven.
Story Split is available on the same level as Top-Level Grid Control.
In the component you can define the title, icon and anchor, image and channels
According to the design
- The full bleed image has the different height depending on the viewport
- Section title is wrapped in a white box and it’s animated
- There is a possibility to have the number icon in front of title

How to use it

This component should not be used too excessively.

The Story Split content helps the user to navigate through the different sections of a webpage. The intention of the component is to present the content in a more consumable, engaging way - like a 'story telling'.