Hero Banner

The hero banner introduces the goals or purpose of the product or service.

Overview
A hero banner is a large, eye-catching image or video used to grab users' attention and convey a message or call to action. It is often used on the homepage of a website or application to highlight the main benefits or features of the site or product.
Hero banners can include various features and elements, such as buttons or links for users to interact with, and responsive design elements that adjust the layout and content based on the device's size and orientation. They can also include formatting options, such as font size and color, to help the text stand out and convey the desired message or call to action.
Here are some tips for creating effective hero banners:
Use high-quality images or videos that are relevant to your target audience.
Keep your message or call to action clear and concise.
Use bright colors and fonts to make your banner stand out.
Ensure your banner is responsive to look good on all devices.
Changing the Properties
Adding a title
The title lets you enter the text for the main hero content. You can adjust the alignment of the title by setting the content horizontal/vertical alignment options. 
Customizing the layout
Layout options lets you define specific height and width for the Hero Banner.
Adding Interactions
No interactions are available for the Hero Banner.
Styling the Hero Banner
From the Styles panel, you can customize styling attributes for the Hero Banner: 
Banner: to customize the Banner background color if an image is present.
Title: to customize the style for the title text.
Caption: to customize the style for the caption text.
Subtitle: to customize the style for the subtitle text.
Primary Button: to customize the style of the primary button.
Secondary Button: to customize the style of the secondary button.
You can find the instructions for styling here.
Examples
Property
Value
Title
Opportunities
Caption
Recently viewed
Image source
URL
Content horizontal alignment
Yes
Content vertical alignment
Yes
Style / Caption color
#e3066a
Style / Caption font size
16px
Style / Caption font weight
600 - Semi Bold
Specifications
Attributes
Name
Type
Description
caption
String
The caption can include text, and is displayed over the title.
contentHorizontalAlignment
String
Horizontal alignment of the title, caption and description.
Valid values include left, center and right
contentVerticalAlignment
String
Vertical alignment of the title, caption and description.
Valid values include top, center and bottom.
contentWidth
Integer
Width of the content inside of the banner in percentage.
height
Integer
Height of the banner in px.
maxWidth
Integer
Width inside of the banner in px.
primaryButtonLabel
String
The text to be displayed inside the primary button.
secondaryButtonLabel
String
The text to be displayed inside the secondary button.
backgroundSrc
String
Background image for the hero banner.
subtitle
String
The subtitle can include text, and is displayed under the title.
title
String
The title can include text, and is displayed in the banner.
Events
Name
Description
PrimaryButtonClick
The event is fired when the primary button is clicked.
SecondaryButtonClick
The event is fired when the secondary button is clicked
Styling Hooks
Banner
Name
Description
Background Color
Define a background color if no image source is present
Title
Name
Description
Text Color
Define a text color for the title.
Font Size
Define a font size for the title.
Font Family
Define a font family for the title.
Font Weight
Define a font weight for the title.
Shadow Color
Define a shadow color for the title.
Caption
Name
Description
Text Color
Define a text color for the caption.
Font Size
Define a font size for the caption.
Font Family
Define a font family for the caption.
Font Weight
Define a font weight for the caption.
Shadow Color
Define a shadow color for the caption.
Subtitle
Name
Description
Text Color
Define a text color for the subtitle.
Font Size
Define a text color for the subtitle.
Font Family
Define a text color for the subtitle.
Font Weight
Define a text color for the subtitle.
Shadow Color
Define a text color for the subtitle.
Primary Button
Name
Description
Text Color
Define a text color for the Primary Button.
Text Color Hover
Define a text color for the Primary Button.
Background Color
Define a text color for the Primary Button.
Background Color Hover
Define a text color for the Primary Button.
Border Color
Define a text color for the Primary Button.
Border Radius
Define a text color for the Primary Button.
Secondary Button
Name
Description
Text Color
Define a text color for the Secondary Button.
Text Color Hover
Define a text color for the Secondary Button.
Background Color
Define a text color for the Secondary Button.
Background Color Hover
Define a text color for the Secondary Button.
Border Color
Define a text color for the Secondary Button.
Border Radius
Define a text color for the Secondary Button.
​

Property	Value
Title	Opportunities
Caption	Recently viewed
Image source	URL
Content horizontal alignment	Yes
Content vertical alignment	Yes
Style / Caption color	#e3066a
Style / Caption font size	16px
Style / Caption font weight	600 - Semi Bold

Name	Type	Description
caption	String	The caption can include text, and is displayed over the title.
contentHorizontalAlignment	String	Horizontal alignment of the title, caption and description. Valid values include left, center and right
contentVerticalAlignment	String	Vertical alignment of the title, caption and description. Valid values include top, center and bottom.
contentWidth	Integer	Width of the content inside of the banner in percentage.
height	Integer	Height of the banner in px.
maxWidth	Integer	Width inside of the banner in px.
primaryButtonLabel	String	The text to be displayed inside the primary button.
secondaryButtonLabel	String	The text to be displayed inside the secondary button.
backgroundSrc	String	Background image for the hero banner.
subtitle	String	The subtitle can include text, and is displayed under the title.
title	String	The title can include text, and is displayed in the banner.

Name	Description
PrimaryButtonClick	The event is fired when the primary button is clicked.
SecondaryButtonClick	The event is fired when the secondary button is clicked

Name	Description
Background Color	Define a background color if no image source is present

Name	Description
Text Color	Define a text color for the title.
Font Size	Define a font size for the title.
Font Family	Define a font family for the title.
Font Weight	Define a font weight for the title.
Shadow Color	Define a shadow color for the title.

Name	Description
Text Color	Define a text color for the caption.
Font Size	Define a font size for the caption.
Font Family	Define a font family for the caption.
Font Weight	Define a font weight for the caption.
Shadow Color	Define a shadow color for the caption.

Name	Description
Text Color	Define a text color for the subtitle.
Font Size	Define a text color for the subtitle.
Font Family	Define a text color for the subtitle.
Font Weight	Define a text color for the subtitle.
Shadow Color	Define a text color for the subtitle.

Name	Description
Text Color	Define a text color for the Primary Button.
Text Color Hover	Define a text color for the Primary Button.
Background Color	Define a text color for the Primary Button.
Background Color Hover	Define a text color for the Primary Button.
Border Color	Define a text color for the Primary Button.
Border Radius	Define a text color for the Primary Button.

Name	Description
Text Color	Define a text color for the Secondary Button.
Text Color Hover	Define a text color for the Secondary Button.
Background Color	Define a text color for the Secondary Button.
Background Color Hover	Define a text color for the Secondary Button.
Border Color	Define a text color for the Secondary Button.
Border Radius	Define a text color for the Secondary Button.

Screen Components - Previous

Header

Next - Screen Components

Icon Picker

Last modified 4mo ago