Half-hero | Notion

Media Settings
- Supports both image and video for desktop/tablet and mobile devices.
- Allows cropping and positioning for media.
- Provides options for autoplay, sound, and poster images for videos.
Content Display
- Customizable headings, superheadings, subtext, and buttons (up to two).
- Control over text color and alignment on different screen sizes.
Layout Options
- Configure media order and aspect ratios separately for desktop/tablet and mobile.
- Option to fill empty vertical space with media on desktop/tablet.
Section Settings
- Toggles for above-the-fold, full-width, full-bleed, and vertical padding.

Field	Required	Default	Description
Image Alt	Optional	"Man with backpack crossing the street"	Alt text for the image.
Image (tablet/desktop)	Optional	`https://cdn.shopify.com/...`	Image for desktop/tablet display.
Image Crop Position (desktop)	Optional	`center`	Determines the cropping position for desktop/tablet images.
Image (mobile)	Optional	`https://cdn.shopify.com/...`	Image for mobile display.
Image Crop Position (mobile)	Optional	`center`	Determines the cropping position for mobile images.
Video URL (desktop)	Optional	`null`	Overrides the desktop image if provided.
Video URL (mobile)	Optional	`null`	Overrides the mobile image if provided.
Autoplay When In View	Optional	`true`	Enables autoplay for videos when visible.
Sound	Optional	`false`	Toggles video sound when autoplay is off.
Media Order (desktop)	Optional	`1` (Left)	Determines the order of media on desktop.
Media Aspect Ratio (desktop)	Optional	`md:before:pb-[100%]`	Sets the aspect ratio for desktop media.
Media Order (mobile)	Optional	`1` (Top)	Determines the order of media on mobile.
Media Aspect Ratio (mobile)	Optional	`max-md:before:pb-[100%]`	Sets the aspect ratio for mobile media.

Field	Required	Default	Description
Heading	Optional	"Half Hero Heading"	The main heading text for the half-hero section.
Superheading	Optional	`null`	A smaller heading displayed above the main heading.
Subtext	Optional	`Lorem ipsum dolor sit amet...`	Supporting text below the heading.
Buttons	Optional	Preconfigured with one button	Adds clickable buttons with customizable styles and links (up to two).
Text Color	Optional	`var(--text)`	Sets the text color.
Content Alignment (desktop)	Optional	`md:text-left md:items-start`	Aligns content on desktop/tablet devices.
Max Content Width (desktop)	Optional	`md:max-w-[30rem] lg:max-w-[38rem]`	Limits the width of content on desktop/tablet devices.
Content Alignment (mobile)	Optional	`text-left items-start`	Aligns content on mobile devices.