DOCUMENTATION

Hero Section

Last updated May 2026
Advanced Block
All plans

The Hero block is a full-width canvas for building landing page headers, above-the-fold sections, and any content that needs to make an immediate impression. It gives you a composable set of elements — headings, CTAs, email forms, social proof strips, and more — arranged on a live-editable canvas with a dedicated style sidebar.

What it is

Unlike other blocks, the Hero is not a single piece of content — it's a mini layout editor embedded in your document. You compose it by placing elements on a full-width canvas, then style the background, typography, and spacing from the sidebar.

When published, the Hero renders full-width — bleeding to the edges of the page regardless of the document's content width setting.

Preview — Dark / Grid
NewStripe commerce + AI assistant — now live
Make something
people want.
The workspace where documents become websites, pages become storefronts, and teams ship without switching tools.
Start for free
Watch the demo →
StripeLinearVercelNotionFigma

Adding a Hero block

/ → Hero
Type / on any empty paragraph, type hero, press Enter.
Block palette
Click + on any block → scroll to Advanced → Hero Section.
Template picker
Several templates include a pre-configured Hero with elements and backgrounds already set.
ℹ
The Hero is always full-width on the published page. Use the height handle at the bottom to adjust its vertical size — minimum 300px, no maximum.

The canvas

When you add a Hero you land directly on the canvas — a live-preview area where all elements are stacked vertically. The sidebar opens automatically on the right.

Canvas interactions

Single click
Selects an element. The sidebar switches to the Element tab showing that element's properties.
Double click
Enters inline text editing mode for simple elements (headings, body, kickers, CTAs). A cursor appears directly on the canvas.
Drag grip ↕
Drag the grip icon vertically to reorder an element. A blue indicator line shows the drop position.
Drag grip ↔
Drag horizontally past 20px to assign an element to the left or right column. Drop on another element to pair them automatically.
Width handles
Drag the resize handles on the left or right edge of a selected element to change its width (15%–100% of the canvas).
Height handle
Drag the dotted bar at the bottom of the hero canvas to resize the overall hero height.
Preview toggle
Click Preview (top-left of canvas) to see the hero exactly as it looks when published, with all editor chrome hidden.

Elements

Every piece of content inside a Hero is an element. Elements are added from the Layers panel at the bottom of the Element tab and can be reordered at any time.

ElementCategoryDescription
kickerTypographyAll-caps overline label. Sets context above the main headline.
eyebrow_badgeTypographyColored pill badge above the headline with a pulsing dot.
headingTypographyMain display headline. Supports all size/weight options and six text effects.
subheadingTypographyLarge secondary line, typically italic and lower weight.
bodyTypographyProse paragraph for longer supporting copy. Inline editable.
ctaConversionPrimary button. Fill, text color, radius, and link URL all configurable. Two consecutive CTAs are placed side-by-side automatically.
cta_ghostConversionText/ghost link. Renders as plain text with a hover underline.
email_captureConversionInline email input with submit button. Connected to your email list when published.
announcementConversionPill banner with a badge label and linked text — "New → See what's new".
logo_rowSocial proof"Trusted by" strip. Enter company names one per line; rendered in all-caps.
review_stripSocial proofStar rating, avatar stack generated from initials, and a pull quote.
stat_trioSocial proofThree large metric numbers with labels and optional suffixes (%, +, ★).
imageMediaUploaded or URL image. Configurable height and object-fit (cover/contain/fill).
video_thumbMediaThumbnail with a centered play overlay and optional label.
video_embedMediaEmbedded video player — YouTube, Vimeo, or a generic embed URL.
code_windowMediaFaux terminal window with green-on-black monospace text. Editable on canvas.
scroll_hintConversionAnimated bouncing chevron with optional label, indicating content below.
dividerTypographyThin horizontal rule with an optional centered text label.

Background styles

The Canvas tab controls the hero background. There are 14 types:

dark
black
light
white
grain
mesh
grid
spotlight
split
ripple
dither
ascii
image
video

Dither

Renders an uploaded image through a configurable dithering shader.

Pattern
Bayer, Halftone, Noise, or Crosshatch — the dithering algorithm.
Color mode
Duotone (two custom colors), Grayscale, Original, or Custom palette.
Grid size
2–12px. Smaller = finer detail, larger = more visible pixel grid.
Animated
Toggles a subtle animation on the dither pattern.

ASCII

Converts an uploaded image into a live ASCII character grid. Options: character set (blocks, standard, dots, binary, braille, and more), text color, resolution (20–1200 cols), and animation style (matrix, fade, typewriter, or static).

Split

Divides the hero into a text column and an image column side-by-side. The text column uses the normal element stack; the image column shows the uploaded split image at full height. Choose left or right for the image side.

Heading text effects

The heading element supports six visual effects applied from the sidebar's Text effect section:

NoneGradientRainbowShimmerGlitchTypewriterEncrypted
Gradient
Two-color linear gradient across the text, with a configurable angle.
Rainbow
Animates through the full color spectrum on a continuous loop.
Shimmer
A highlight sweeps across the text on repeat, as if catching light.
Glitch
Layers two offset clones in red and cyan that animate intermittently with randomised clip paths.
Typewriter
Renders the heading with a blinking cursor border, suggesting live typing.
Encrypted
On mount, the text scrambles through random characters before resolving into the real words. Repeats on every page load.

Two-column layout

Any element can be assigned to a left column, right column, or full width. When at least one element is columned, the canvas switches to a two-column layout with a draggable divider.

Sidebar → Column
Select an element → scroll to Column layout → choose Full, Left, or Right.
Lateral drag
Drag an element's grip more than 20px horizontally. A blue highlight shows which column it will land in. Drop on another element to pair them — the hovered element moves to the opposite column automatically.
✦
Common pattern: heading + body + CTA in the left column, an image element in the right. This gives you the split-hero look with any background type.

Controls for the currently selected element. Complex elements (logo row, stats, review strip, email capture) show their own configuration fields. All elements share these layout controls:

Align
Left, center, or right — controls flex alignment within the column and text alignment.
Width
15%–100% of the column width. Drag the slider or use the canvas resize handles.
Spacing
Top and bottom padding (0–80px) applied to that element only.
Column layout
Assign this element to left column, right column, or full width.
Background
12 background types — see Background styles.
Base color
The primary background color. Presets and a custom color picker.
Font family
Sets the font across all elements: System, Serif, Mono, or Display.

Publishing behaviour

On a published page the Hero renders full-width via the HeroSSR server component. All elements, backgrounds, and effects are preserved exactly as they appear in editor preview.

⚠
The email_capture element records submissions on published pages only — not in the editor. Connect your email list from Settings → Integrations before publishing.

CTA buttons with a link URL open in a new tab by default. If you link to a blnk page using the page picker in the URL field, the link opens in the same tab.

← PreviousTab Bar