content-hero-block
Description
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.
Benefits
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.
Properties
| 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' |
Slots
| 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. |