Hero Feature Teaser List

Description

Hero Feature Teaser List is used to get a glimpse of the important features of a product through a text or a video.
The Hero Feature Teaser List shows between 2 and 4  (maximum) different features corresponding to the highlight page the user is visiting. They should contain videos or images, descriptive headlines and copy. Initially all features are shown side by side, if the user hovers above one:

  • The other features will fade out
  • The hovered feature video starts
  • The descriptive text shows up on background-color

If a feature has no video there needs to be a  fallback image.

Usage

Each feature consists of:

  • Background-Video + "Thumbnail Cover"
  • Random background-color (brand color color-wheel) on hover for flyout layer (containing headline and text)
  • Editable headlines with italic emphasize option
  • Editable copy with rich text features
  • Text color always white
  • Optional "get more" text link to detail page
  • Play Video  button shown on mobile devices

Demonstration (with 2 stages - see below)

This is the title

This is the title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Revolutionary in terms of both efficiency and quiet operation

Revolutionary in terms of both efficiency and quiet operation

  • Lorem ipsum dolor sit amet
  • consetetur sadipscing elitr
  • sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
  • sed diam voluptua

Demonstration (with 3 stages - see below)

This is the title

This is the title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Revolutionary in terms of both efficiency and quiet operation

Revolutionary in terms of both efficiency and quiet operation

  • Lorem ipsum dolor sit amet
  • consetetur sadipscing elitr
  • sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
  • sed diam voluptua

Consetur
sed diam

Consetur
sed diam

Demonstration (with 4 stages - see below)

This is the title

This is the title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Revolutionary in terms of both efficiency and quiet operation

Revolutionary in terms of both efficiency and quiet operation

  • Lorem ipsum dolor sit amet
  • consetetur sadipscing elitr
  • sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
  • sed diam voluptua

Consetur sed diam

Consetur sed diam

Sadipscing elitr
sit amet

Sadipscing elitr
sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

How to build a Hero Feature Teaser List

How to build Hero Feature Teaser List

In the edit mode, drag and drop the Hero Feature Teaser List Component from the Components list. Double click on the dropped component to start editing.

 Once the editing tab is open, click on 'Add'.

❶ The first box is for the heading. Once you click on the box and start typing you will see various options pop up above the box to edit the text you are typing. 

❷ The second box is for the paragraph text.
For when you need the Hero FeatureTeaser List to be more than just text, fill in the boxes below the description one by one.

❸ Enter the path of the thumbnail.

❹ Enter the link text.

❺ Enter the internal or external teaser link path.

❻ Choose if the background needs to be a Video or an Image or a DAM video.

  • Drop in the 'URL' if you select 'Background Video' as an option (❼) or select the 'Path' if you choose either an 'Image' or a 'DAM Video' as an option.
  • Click on 'Add' again and repeat the steps ❶ to ❼ as above to create another Hero Feature List Component.

    Note: The Hero Feature Teaser List should be a minimum of 2 stages and a maximum of 4 stages.