A hero block is one of the two most common content blocks used. A hero block consists of a media layer with a text layer placed on top.


A hero block is a very common design that can be used to show different types of content. On small screens, the background slot stacks vertically with the content slot. On larger screens, the content slot overlays the background slot.


Property Attribute Description Type Default
class class string undefined
contentPosition content-position Pipe separated HeroContentPlacementOptions that will determine whether the content sits below the media slot or overlapped above. string 'below|above'


Slot Description
Default slot, same as content slot
"background" This slot is usually either a video or image component.
"content" This slot will usually serve a text block.


View Example in New Window
Content Blocks free of warranty. All rights reserved.
Structural Preview


  • Description
  • Benefits
  • Properties
  • Slots
  • Examples