loading table of contents...

Frontend Developer Manual / Version 2310

Table Of Contents

6.4.9 Example Hero Banner

The brick provides templates and CSS styles for displaying many content types and commerce objects as a hero banner. The example is based on the API brick Section 6.3.1, “Default-Teaser” and Section 6.3.11, “Slick Carousel”.

Wireframe for hero-banner on desktop

Figure 6.18.  Wireframe for hero-banner on desktop

Wireframe for hero-banner on mobile

Figure 6.19.  Wireframe for hero-banner on mobile

  1. Teaser title and teaser text are shown. For products the list price and (if existing) the offer price is shown.

  2. The call-to-action button feature is utilized and also placed on top of the picture.

  3. If more than one item is in the same container as hero, they will be displayed as a carousel with arrows. For mobile devices there is touch support to control which item is shown.

The banner supports a corresponding view type "hero" which can be used for placements and collections. The visual output of the hero is decided by the content assigned to it, for example, teaser, image-maps, video, product, category...

Using the Brick

As shown in the example below, a hero banner can be displayed by including the corresponding content type with the asHeroBanner view.

  <@cm.include self=self view="asHeroBanner"/>

The same view is defined for containers (for example, a CMCollection or Placement) to render multiple items inside a hero carousel.

Video Behavior

Videos in hero banners will be displayed inline. The videos will always be autoplayed, muted, looped and displayed with hidden controls. These settings can not be overwritten in the video options in CoreMedia Studio. Hero banners will not display additional preview pictures linked to the video.

Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.