Hero Block Wrapper

The HeroBlock is the first block in a page. All hero blocks must be wrapped within this component.

Like the standard Block Wrapper, the Hero Block wrapper wraps the Hero Block.

However, the difference is that the HeroBlock imposes a width restriction for any standard Block Wrappers (block). block wraps your content inside a spacing component, with the width of the spacing component being set by the restrictions specified in the HeroBlock.

Your block must accept a block prop and pass it to the Block component

Props	Type	Mandatory?	Description
block	object	✅	An opaque object, you must pass it
backgroundColor	string	❌	The color hex code without the # prefix. It also supports object form for responsive config

slots	Description
Default	The block content

Example:

<template>
  <HeroBlock :block="block">
    <!-- please see below `Nav` -->
    <Navbar />
    <!-- content... -->
  </HeroBlock>
</template>