Skip to content
Get Etchedy

3 new patterns this weekSee them

100 of 100 founding seats left

Sign inGet Etchedy

My accountContactPrivacy

L-152Layout

Orbit Hero Section

Split landing hero with a tilted planetary orbit, built as a plain, fully editable Etch tree: section > container > layout (copy column: announcement pill, h1 with an italic accent word, lede, two buttons, a proof row of…

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.

Orbit Hero Section 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 9

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

data-theme
paperlightdark

data-accent
primarysecondaryaccentneutral

accent word, button arrow, tags and status dots

data-layout
splitreversestacked

copy beside the stage, stage first, or copy centred above the stage

data-height
autoscreen

natural height or at least one full viewport

data-anim
risefadenone

how the copy, stage and stats enter

data-eyebrow
truefalse

announcement pill

data-secondary
truefalse

second button

data-proof
truefalse

avatar and rating row

data-stats
truefalse

stat strip under the hero

Component props 5

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

Orbit Avatar4 in this pattern · 2 props
PropTypeDefault
image
text

https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=120

alt
text

Traveller portrait

Orbit Stage1 in this pattern · 20 props
PropTypeDefault
autoplay
true / false

True

speed
number

70

direction
text

clockwise

rhythm
text

kepler

tilt
text

tilted

plane
number

-14

depth
text

m

pauseOnHover
true / false

True

drag
true / false

True

parallax
true / false

True

entrance
text

spiral

trigger
text

in-view

duration
number

1500

stagger
number

90

easing
text

smooth

showRings
true / false

True

ringStyle
text

solid

showGlow
true / false

True

showToggle
true / false

True

label
text

Trip timeline in orbit around the destination

Orbit Core1 in this pattern · 8 props
PropTypeDefault
image
text

https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=900

imageAlt
text

Yasaka pagoda above a stone lane in Kyoto at dusk

focal
text

center

showShade
true / false

True

showBadge
true / false

True

badgeTitle
text

12 days in Japan

showBadgeMeta
true / false

True

badgeMeta
text

Tokyo, Kyoto, Kanazawa

Orbit Satellite7 in this pattern · 13 props
PropTypeDefault
variant
text

chip

ring
text

2

angle
number

20

size
text

m

tone
text

light

showImage
true / false

True

image
text

https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=160

imageAlt
text

empty

title
text

LIS to HND

showMeta
true / false

True

meta
text

Boards 21:40, gate 14

showStatus
true / false

False

statusTone
text

accent

Orbit Stat4 in this pattern · 3 props
PropTypeDefault
value
text

38

showLabel
true / false

True

label
text

countries with local partners

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

Get Pro
Or start with the free packs

More patterns

Keep browsing.

All patterns
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