Hero

29 heroes for the top of a landing page: split layouts, photo-led openers, cards and patterns, and type-led heroes, some of them moving.

Each one installs on its own. Preview it at desktop, tablet or mobile width, in either direction. New to blocks? Start with the introduction.

Editorial Arch

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-editorial-arch

Photo Constellation

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-photo-constellation

Arc Gallery

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-arc-gallery

Inline Image Headline

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-inline-image-headline

Bento Split

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-bento-split

Framed Full-Bleed

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-framed-full-bleed

Annotated Object

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-annotated-object

Editorial Triptych

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-editorial-triptych

Colour Stage

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-colour-stage

Twin Panels

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-twin-panels

Split Band Headline

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-split-band-headline

Textured Dark

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-textured-dark

Component Pattern

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-component-pattern

Curved Media Rail

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-curved-media-rail

Framed Studio Card

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-framed-studio-card

Orbit Track

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-orbit-track

Floating Integrations

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-floating-integrations

Shape Grid

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-shape-grid

Wave Band

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-wave-band

Studio Mosaic

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-studio-mosaic

Illustration Split

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-illustration-split

Masked Type Reveal

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-masked-type-reveal

Velocity Marquee

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-velocity-marquee

Duo Card

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-duo-card

Video Spotlight

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-video-spotlight

Brand Color-Block

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-brand-color-block

Scramble Decode

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-scramble-decode

Split-Flap Counters

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-split-flap-counters

Video-in-Type

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add hero-video-in-type