Frontend Developer Manual / Version 2404
Table Of ContentsThe 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”.
Teaser title and teaser text are shown. For products the list price and (if existing) the offer price is shown.
The call-to-action button feature is utilized and also placed on top of the picture.
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.
