Hero Banner | Notion

Image Display
- Allows uploading different images for tablet/desktop and mobile.
- Enables positioning control of the images.
Text and Call-to-Actions
- Supports customizable headings, subheadings, and buttons (up to two).
- Allows the selection of text color and button styles.
Content Positioning
- Controls the alignment and positioning of content for desktop/tablet and mobile.
- Allows enabling a dark overlay to enhance text visibility.
Section Settings
- Customizable full width, full bleed, and above-the-fold toggles.
- Allows defining section height using static values or aspect ratios.

Field	Required	Default	Description
Image Alt	Optional	"Rack of green t-shirts"	Alternative text for the image.
Image (tablet/desktop)	Optional	`https://cdn.shopify.com/...`	Image for desktop/tablet display.
Image Position (desktop)	Optional	`md:object-center`	Determines the desktop image alignment.
Image (mobile)	Optional	`https://cdn.shopify.com/...`	Image for mobile display.
Image Position (mobile)	Optional	`object-center`	Determines the mobile image alignment.

Field	Required	Default	Description
Heading	Optional	"Banner Heading"	The primary text for the banner.
Subheading	Optional	`null`	The secondary text below the heading.
Text Color	Optional	`var(--white)`	Allows selecting the text color.
Buttons	Optional	Preconfigured buttons (max: 2)	Adds clickable buttons with customizable styles and links.