Skip to content

component :: Hero

The Hero component offers highly flexible, accessible hero sections for landing pages, product sites, and marketing. It supports full, split, and slideshow layouts; accepts image, video, gradient, or canvas backgrounds; provides overlay and text color controls; allows custom aspect ratios and content/media ordering; supports parallax, rounded corners, and a flush layout for the split variant; and is fully slot-based for custom content. (Full size demo.)

Example Hero

This hero uses an animated canvas element as background.

File Description Source
component.hero.css All hero styles (.hero) Github

Full layout (default)

The full layout spans the entire viewport with content centered over a background image, video, gradient, or canvas element. Use the height prop to control min-height (in svh units).

Split layout

The Split layout features an asymmetric split (e.g., 70/30, 80/20, etc.) with content on one side and media on the other. The media section fills the available space with an image or video, cropping as needed. The ratio prop defines the grid layout, contentFirst controls the DOM order of content and media, and reversed visually reverses their order (while the grid ratio remains unchanged).

Slideshow layout

The Slideshow layout features rotating content and background (same options available as for the Full layout) with pagination dots. Each slide can have its own media and content.

HTML

Elements

Class Description
.hero_actions Wrapping button row inside the hero content, centered on the full and slideshow variants (the hero twin of .section_actions).

Custom properties

The following custom properties are available in settings.ui.css:

Property Description
--hero-radius Border radius (on/off via roundCorners prop).
--hero-content-padding Padding for hero content area.
--hero-actions-spacing Space above the .hero_actions button row.
--hero-pagination-dot Pagination dot size.
--hero-pagination-dot-color Pagination dot background color.
--hero-pagination-dot-active-color Active pagination dot color.
--hero-pagination-opacity Pagination dot default opacity.

Astro component

General props

Prop Type Default Description
variant string full Layout variant: Full, Split, and Slideshow.
media object — Image, video, gradient, or canvas background.
roundCorners boolean false Whether the hero media has rounded corners.
textColor string — Text color (CSS variable or value).
class string — Additional CSS classes (see helper classes).

Split variant props

Prop Type Default Description
ratio string 62/38 Split ratio, e.g. 70/30, 40/60, etc.
contentFirst boolean false If true, content appears before media in the DOM (left on desktop, top on mobile).
reversed boolean false Visually reverses the order set by contentFirst (does not change DOM order).
roundCorners boolean false If true, media has rounded corners.
flush boolean false Removes outer padding from the content section, making text flush with the edge.

Full and slideshow variant props

Prop Type Default Description
parallax boolean false Parallax effect (full variant only).
height number — Sets min-height in svh (0-100).
overlayOpacity number 0 Overlay opacity.
overlayColor string --base-950 Overlay color (CSS var or value).
roundCorners boolean false If true, hero has rounded corners.
textColor string — Text color (CSS var or value).
slideshowItems array — Array of objects (see example).
slideshowAutoplay boolean true Slideshow autoplay.
slideshowInterval number 5000 Slideshow interval (ms).
slideshowTransition number 600 Slideshow transition speed (ms).

Examples