The Hero paragraph | Configuration fields |
| One column  |
| Two column  |
About the Hero Paragraph
The Hero paragraph is a very flexible component which allows for a single column or two column display and contains fields which allow you create an eye catching and informative section of the page.
Used at the top of the page and generally the first thing seen this can be an effective way to get your message to your visitor quickly.
This paragraph allows the adding of video as well as images in single and two column display and also as a background.
Fields
Field name | Type | Description |
Layout | Dropdown | Choose one or two column layout |
Split | Dropdown | Choose how your 2 column layout is split on the page 33/66 - 50/50 or 66/33 |
Alignment | Dropdown | Align the Text and buttons Left - Centre or Right |
Add Text | Embed | Add text using rich text |
Add Media | Embed | Add media including video upload |
Add Buttons | Embed | Add multiple buttons |
How to configure the Hero paragraph.
Select Layout:
Choose between a Single Column or Two Column layout.
If Two Column is selected, specify the column split ratio (33/66, 50/50, or 66/33).
Add Paragraphs:
For Single Column Layout: Click the "Add Paragraphs" button and select from the following options:
Button: Create a clickable call-to-action with customisable style, size, and colour.
Text: Add rich text content using a WYSIWYG editor (supports H1, Full HTML, etc.).
Media: Embed images, remote videos, or upload videos (supports autoplay and seamless looping).
For Two Column Layout: Configure each column separately by adding paragraphs for:
Column 1: Supports multiple Buttons, Text, and Media paragraphs.
Column 2: Similarly supports multiple paragraphs for Buttons, Text, and Media.
Style Buttons:
The Button Paragraph allows you to configure the buttons:
Style: Options include "Block" (full-width), "Pill" (rounded edges), and "Outline" (bordered transparent look).
Size: Small Normal or Large.
Colour: Choose from Bootstrap brand colours like Primary, Secondary, etc.
Alignment:
Set alignment at the main Hero Header level to position text and button content (Left, Center, Right). This setting doesn’t affect image/media alignment, which retains its default position.
Configure Layout and Background:
Background Media:
Set an image or video as the Hero Header background. Choose images from the media library or use/upload videos with autoplay and seamless looping for added engagement.
Overlay:
Add an optional layer over the background for better text visibility. Adjust overlay opacity with a slider (0–100%) for transparency control.
Background Colour:
Define a solid colour as a fallback or standalone background for branding consistency.
Width:
Choose between full-width or container-aligned layouts for flexible design.
Margins:
Control spacing above (top margin) and below (bottom margin) the header. Defaults to 0px but can be customised as needed.
Note:
Be cautious with media if you are using a background image or video it could get confusing when they are displayed above each other and we would advise against configuring your hero in this way.
While you are able to add your hero paragraph anywhere in the page Hero's are predominantly displayed at the very top below your navigation and should be used sparingly on your important landing pages to add significance and create impact in the site.