10 SaaS hero section examples for your next build

A SaaS hero section has limited room to explain a product. A scheduling tool can show the booking widget. A broad workspace may need a full app screenshot, while a product suite has to explain which tool the visitor is looking at.

10 SaaS hero section examples

1. Attio makes the app the next thing to inspect

The Attio hero centers a large black headline on a barely tinted canvas. A macOS-style app screenshot extends beyond the bottom of the captured fold. Generous space separates the pitch from the denser product view.

This arrangement suits a product whose interface needs room. Choose a screenshot that still communicates a recognizable task at the displayed scale. Attio's mobile capture includes an email field and a full-width demo button above the stacked app image. The useful detail is the order of those elements, which keeps the request visible before the product view.

2. Linear connects the hero to a full workspace

The Linear capture uses oversized, left-aligned white type on near-black. A restrained navigation bar includes a white sign-up pill. Below the headline sits an app screenshot with a sidebar and issue detail.

Use this structure when the relationship between navigation and work content explains your product. Preserve that relationship in the crop. Check the small labels separately, since including a full interface can make its details too small to read. The surrounding headline still needs to explain the product without those labels.

3. Cal.com shows the object people will use

The Cal.com capture places the headline beside a scheduling-widget mockup. Its calendar, meeting-type card, and timezone make the software recognizable without a full application window. A simple border contains the example.

For software with a compact, self-contained interaction, show that interaction. A booking widget explains more than a generic dashboard would. The mobile caption places the widget below the headline and CTAs. Budget for that later reveal rather than promising that all the desktop content will remain above the fold.

4. Ramp puts the entry form inside the composition

The Ramp hero combines a large headline, a fine dotted field, and layered spend-reporting and bills UI. An acid-yellow button accompanies a work-email field. The form sits with the explanation, so the visitor can see what information the next step asks for.

If your first step requires an email address, design the field as part of the hero from the start. Account for labels, validation, and the button at narrow widths. Ramp's mobile capture records a full-width email field and CTA followed by a cropped product collage. That gives the form priority over the larger illustration.

5. Notion gives one word a separate treatment

The Notion capture uses a huge black slab headline with a mint highlight around one word. Hand-drawn avatar stamps sit above it, and the caption records a workspace mockup peeking in below the fold. The different treatments let type, illustration, and product UI occupy separate roles.

Choose the phrase that deserves emphasis before adding a highlight. In the mobile caption, the avatar ring and headline stack full-width, followed by stacked buttons and a trust line. Recheck the highlighted word's wrapping with the actual headline you plan to ship.

6. Slack places a recognizable conversation beside the pitch

The Slack desktop capture places a floating app mockup beside the headline. Purple app chrome surrounds a direct-message thread and a Slackbot panel, set over a soft multicolor field. The interface has enough recognizable content to identify a conversation rather than a generic software rectangle.

Choose sample content that explains an actual use case. The registry's mobile capture includes a Google sign-in interstitial partially covering the app mockup. That is a limitation of the captured view, so use it to inspect obstruction and available space rather than infer a clean responsive composition underneath.

7. Figma leaves room around a single product visual

The Figma hero uses large black type on white, a stacked deck of product-illustration cards, and a black pill CTA set apart from the copy. The rotating deck described in the captions supplies the main image while the rest of the hero stays visually spare.

A single strong product visual can support a simpler surrounding layout. The mobile caption records a two-line headline with the deck and CTA stacked below the fold. Inspect that constraint before borrowing the large type.

8. Framer gives the product video a defined frame

The Framer capture places a bold sans headline and two pill CTAs on near-black. An autoplaying product video sits inside a thin violet border. The border separates the moving content from the surrounding canvas without introducing a large decorative container.

If motion explains your tool, choose a useful poster frame and make the message understandable before playback. A still capture cannot verify the video's controls or reduced-motion behavior. The mobile caption places stacked actions above a full-width video card, so your layout should also work before the demonstration enters view.

9. Intercom uses editorial imagery before product detail

The Intercom desktop capture pairs an oversized serif headline with an editorial photo strip and a loose ink flower. A tabbed product screenshot starts below. The photos establish a visual identity, while the later interface view has to carry the product explanation.

Borrow the hierarchy only if your headline names the service clearly enough to support that delay. The mobile caption records a more explicit customer-service headline, stacked CTAs, and a trimmed photo strip. Inspect the captured versions as separate compositions. Their differences go beyond shrinking the same desktop assets.

10. Superhuman makes content variants part of the reference

The Superhuman record explicitly notes rotating hero copy across captures. One desktop fold has a dark teal band and a product switcher for Go, Mail, and Docs. The mobile fold has different copy over a purple-to-blue gradient with portrait photography.

Do not treat that pair as proof of a responsive transformation. The content itself differs. For a suite, the product switcher is a useful device to study, but choose one captured variant for your layout brief. Otherwise an agent may combine unrelated headlines, colors, and imagery into a page that matches none of them.

Choose a hero by the explanation it needs

Use Cal.com as a reference for showing one complete interaction, Linear for a full workspace, and Ramp for composing a first-step form with product imagery. Intercom is a different choice because the editorial image leads. Your decision depends on how much a new visitor can understand before the product view appears.

Give a coding agent one desktop capture and its corresponding mobile capture, then name the specific decisions to borrow. Connect swaggin to retrieve the images. Continue with the registry's social-proof findings if you need evidence beneath the hero, or pricing-page conventions when the next page explains plans.