Skip to content
L-158Layout

SaaS Startup Hero

Usage-billing startup hero as a plain, fully editable Etch tree: section (hairline grid backdrop, cursor spotlight, accent glow) > container > hero grid (copy: announcement pill link, h1 whose last line is a "Word Rotato…

Get this with ProIncluded in your plan

50 sites for €79 only, Compare all plans

Preview Desktop, 1280px

The system behind it

One pattern, your whole brand.

SaaS Startup Hero reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.

Type
Layout
Category
Hero
Responsive
Desktop to phone
Works with
Etch, ACSS, plain CSS

Options 16

Set on the section, in Etch’s attributes panel. No code needed.

data-theme
paperlightdark

data-accent
accentprimarysecondaryneutral

ACSS colour for the rotator mark, stars, focus glow, metric bars and spotlight

data-layout
splitcentered

split = copy beside the photo, centered = copy centred over a wide photo

data-media-side
endstart

photo side in the split layout

data-media
truefalse

photo + quote card

data-cta
formbuttons

email trial form, or a primary + secondary button pair

data-assurances
truefalse

the chip row under the CTA

data-proof
truefalse

avatar stack + rating line

data-metrics
truefalse

the Metric Rail

data-radius
smlxl

photo frame + card radius

data-backdrop
griddotsnone

hairline backdrop pattern

data-spotlight
truefalse

the pattern and an accent glow follow the cursor (fine pointers only)

data-reveal
truefalse

staggered entrance on load

data-reveal-style
risefadeblur

data-stagger
numberdefault 90

ms between entrance steps

data-duration
numberdefault 900

ms per entrance step

Component props 7

Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.

Word Rotator1 in this pattern · 8 props
PropTypeDefault
effect
text

slide

interval
number

2600

duration
number

700

easing
text

smooth

delay
number

2200

pauseOnHover
true / false

True

loop
true / false

True

mark
text

underline

Rotator Word4 in this pattern · 1 props
PropTypeDefault
word
text

API call

Assurance3 in this pattern · 2 props
PropTypeDefault
label
text

No card required

icon
text

check

Avatar4 in this pattern · 2 props
PropTypeDefault
image
text

https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=120

alt
text

Customer portrait

Customer Quote1 in this pattern · 11 props
PropTypeDefault
quote
text

We moved to usage pricing in nine days. Expansion revenue doubled by…

name
text

Renata Okafor

role
text

VP Finance, Fieldwork

showAvatar
true / false

True

avatar
text

https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=120

avatarAlt
text

Portrait of Renata Okafor

showStars
true / false

True

showLink
true / false

True

linkLabel
text

Read the Fieldwork story

url
text

#customers

placement
text

overlap

Metric Rail1 in this pattern · 8 props
PropTypeDefault
trigger
text

in-view

duration
number

1600

easing
text

smooth

stagger
number

120

columns
text

4

separators
true / false

True

bars
true / false

True

label
text

Meterline in numbers

Metric4 in this pattern · 6 props
PropTypeDefault
prefix
text

$

value
text

3.8

suffix
text

B

label
text

billed through Meterline last year

showCaption
true / false

False

caption
text

+64% year on year

Included in Pro From €39 a year, with all 469 patterns.

Get Pro

More patterns

Keep browsing.

L-000

Quick View

Desktop, 1440px
Pro
demo.etchedy.com

The real preview of this pattern. Every pattern adapts to your ACSS tokens.

Unlock with ProSee plansIncluded in your plan