Use this reference to understand what Hero Section Reference is for and which component-specific inspector group matters most when you configure it.
Inspector Property Groups
Hero
| Property |
Type |
Details |
| ID | text | Attribute: id |
| Class | text | Attribute: class |
| Tag | droplist | Options: section, div, header |
| Eyebrow | text | |
| Title | text | |
| Lead | text | |
Primary CTA
| Property |
Type |
Details |
| Text | text | |
| Link | text | Attribute: href |
| Variant | droplist | Options: Primary, Secondary, Success, Danger, Warning, Info |
Secondary CTA
| Property |
Type |
Details |
| Text | text | |
| Link | text | Attribute: href |
| Variant | droplist | Options: Primary, Secondary, Success, Danger, Warning, Info |
Appearance
| Property |
Type |
Details |
| Back Color | color_group | Options: text-bg-primary, bg-primary, bg-primary-subtle, text-bg-secondary, bg-secondary, bg-secondary-subtle |
| Back Opacity | range | Controls background opacity.
Controls background opacity when using background color utilities. Applies classes like bg-opacity-25 , bg-opacity-50 , etc. Bootstrap docs: Background utilities |
| Width | range | Sets a Bootstrap width utility class.
Sets a Bootstrap width utility class. Applies utilities like w-25 , w-50 , w-75 , w-100 , or w-auto . Bootstrap docs: Sizing |
| Height | range | Sets a Bootstrap height utility class.
Sets a Bootstrap height utility class. Applies utilities like h-25 , h-50 , h-75 , h-100 , or h-auto . Bootstrap docs: Sizing |
| Opacity | range | Sets the opacity utility class.
Sets an opacity utility class. Applies utilities such as opacity-25 , opacity-50 , opacity-75 , or opacity-100 . Bootstrap docs: Opacity |
| Shadow | droplist | Applies a Bootstrap shadow utility.
Applies a Bootstrap shadow utility. Uses classes like shadow , shadow-sm , shadow-lg , or removes shadow with shadow-none . Bootstrap docs: Shadows
Options: Default, None, Small, Regular, Large |
Spacing
| Property |
Type |
Details |
| Margin<br>&<br>Padding | spacing | |
| X Gutter | range | Horizontal gutter size.
Sets the horizontal gutter (spacing between columns). Uses gx-* utilities to control the horizontal gutter size. Bootstrap docs: Gutters |
| Y Gutter | range | Vertical gutter size.
Sets the vertical gutter (spacing between rows). Uses gy-* utilities to control the vertical gutter size. Bootstrap docs: Gutters |
Display
| Property |
Type |
Details |
| Hide on | button_group | Options: xs, sm, md, lg, xl, xxl |
| Print | button_group | |
| Visually Hidden | boolean | |
| Focusable | boolean | |
Dynamic Attributes
Eyebrow
| Attribute property |
Type |
Details |
| Value | text | Choose dynamic data binding. |
Title
| Attribute property |
Type |
Details |
| Value | text | Choose dynamic data binding. |
Lead
| Attribute property |
Type |
Details |
| Value | text | Choose dynamic data binding. |
Text
| Attribute property |
Type |
Details |
| Value | text | Choose dynamic data binding. |
Link
| Attribute property |
Type |
Details |
| Value | text | Choose dynamic data binding. |
