Koala UI

Hero

The opening section of a landing page. Twenty-two finished layouts, from the product hero over a bleeding component collage and realistic device shots to full-bleed media, scroll stages and editorial openings.

Variant 1

Variant 2

Pro

Variant 3

Pro

Variant 4

Pro

Variant 5

Pro

Variant 6

Pro

Variant 7

Pro

Variant 8

Pro

Variant 9

Pro

Variant 10

Pro

Variant 11

Pro

Variant 12

Pro

Variant 13

Pro

Variant 14

Pro

Variant 15

Pro

Variant 16

Pro

Variant 17

Pro

Variant 18

Pro

Variant 19

Pro

Variant 20

Pro

Variant 21

Pro

Variant 22

Pro

Built from#

All nineteen variants are built on the Hero component: one layout prop swaps the composition between a centered column, a two-column split, a full-bleed background, and a full-viewport cover, with HeroHighlight marking a keyword and HeroMedia holding the visual. Variant 1 is the product hero the home ships: a HeroTitle size="xl" display headline (72px) in a column wide enough to hold it on two lines, three CTAs, six benefits broken 3 + 3, the reviewers with their rating, and a component collage wider than the page that the band clips at both edges; its multiplayer cursors wait for an 80rem hero, where the gutters can hold them. Variants 3 through 6 fill HeroMedia with a product shot: Variant 3 hand-frames a browser mockup (window dots and an address bar) around a screenshot, while Variants 4, 5, and 6 drop finished device renders (iPad and iPhone PNGs from /public/devices, each with its bezel and shadow baked in) that float on the band with no wrapper. Variant 8 takes the split parts into a full-viewport slab (100svw × 100svh): a bottom-left-anchored copy column beside a photo that bleeds to the section's own edges. Variants 9 and 10 set layout="background": a HeroBackground covers the band with a video or a photo under a legibility scrim and the copy flips to white. Variant 11 returns to the centered column and fills HeroMedia with a masonry collage of four room photos: a fixed-height grid where the two side images span both rows while the middle column stacks a pair, folding to a 2×2 below the sm breakpoint. Variant 12 keeps the centered column but pares the wall down to two large photos, a wider near-square frame beside a taller portrait one on a 1.7fr : 1fr grid, stacking below sm. Variant 15 is the only one to use HeroFeatures' second shape: layout="columns" promotes the inline check row into three capability columns, each a bare brand-tinted mark over a title and a sentence, separated by nothing but the gutter, sitting between the CTAs and a chrome-less framed screenshot. The poster-wall variant is the only one with no HeroMedia at all: a HeroScatter layer of twelve tilted HeroScatterTile prints fills the band around the copy (the band's edges crop the outermost ones) while the copy itself stays the house stack under a plain headline: the wall is the colour here, so no keyword marker. The wall is a size container, so cards appear as the hero earns the room for them. The editorial card variant is the only one that opens a page rather than a section: a Navbar rides inside the Hero, and a .dark class on the band re-declares every token for the slab and its children, so the bar's links, both CTAs, the logo wall and every focus ring resolve their dark values with no bespoke colours on a light site. Its copy sits in normal flow inside the photo card rather than as an absolute overlay, so the card grows to whatever the words need and the headline is never clipped on a narrow frame. The parallax cover variant is the fourth layout: cover makes the band a whole viewport (100svh) and stands the caption along its bottom edge, the HeroTitle size="2xl" poster cut (96px) in one corner and the HeroSubtitle in the other, so the picture keeps its whole frame. Its drift is one prop, <HeroBackground parallax>: the media travels slower than the band while the caption travels a little faster. On the same timeline the frame itself pulls in from full bleed to the page's own 90rem container and rounds its corners, with the caption stepping in beside it, so the opening shot hands the page back to its grid instead of ending at a hard seam. All of it is scrubbed by a CSS view timeline rather than a scroll listener, so there is no GSAP, no Lenis and no rAF loop in it, it runs backwards on the way up, and it holds still under reduced motion. All are finished, copy-pasteable slabs ready to open a marketing page.

Responsive#

Each preview renders inside an iframe, so the slab's own breakpoints respond to the frame width. Drag the handle or pick Mobile, Tablet, or Desktop on any variant to watch it recompose, and switch the per-frame theme to check it in dark or moonlight.

FAQ#

Variants 1 to 3 are centered columns: 1 is the product hero, a 72px display headline over a component collage that bleeds past both page edges; 2 a product-led spotlight whose highlighted keyword rotates through phrases in a wash that hugs each word; 3 anchors a hand-framed browser mockup below the copy. Variants 4 to 6 lead with realistic device renders: 4 centers a copy column over a full iPad in landscape; 5 is a split with an iPhone beside the copy; 6 is a split showing a device duo, an iPad with an iPhone overlapping its corner. Variants 7 and 8 are two-column splits with a photo: 7 is a rounded image card beside the copy; 8 is a full-viewport (100svw x 100svh) split where a photo bleeds to the section's edges beside a bottom-left-anchored copy column with an announcement-pill link. Variants 9 and 10 are full-bleed media heroes: 9 runs an ambient video behind centered white copy, and 10 does the same over a single photo, closed by a monochrome trusted-by row. Variant 11 is a centered hero over a masonry photo collage: the classic centered copy stack above a fixed-height wall of four room photos, two tall side images framing a stacked pair, which folds to a 2x2 grid on mobile. Variant 12 is the same centered copy over a two-photo row: a wider near-square frame beside a taller portrait one on a fixed-height grid, stacking to two rows on mobile. Variant 15 is the capability-columns hero: the classic centered copy and CTA pair, then three columns (a bare brand mark, a title and a sentence each, separated by the gutter alone) and a framed screenshot with no browser chrome, so a landing page can open without a separate feature section above the fold. The poster-wall variant drops the product shot entirely: instead of one screenshot under the copy, twelve tilted square pictures scatter through the whole band around it, several cropped by its edges, while the copy stays the house stack under a plain headline (the wall is the colour, so no keyword marker). Reach for it when the product IS a wall of covers (events, classes, listings, releases); the cards sit behind the copy, never block a click, and only appear as the hero gets wide enough to hold them. The editorial card variant is the page-opening one: it carries its own navigation bar and closes on a trusted-by strip, so a landing page starts with this slab and nothing above it. Compare it with the full-bleed image hero: there the photo IS the band and the copy is centered in it; here the photo is a rounded card inset in the site gutter with the copy left-aligned inside it and the dark band showing on all four sides, which is what makes it read as an editorial cover rather than a backdrop. The band stays dark on every page theme, so it is the one to reach for when the rest of the site is light and the fold should not be. The parallax cover variant is the editorial opener: a full-viewport picture or clip with the headline in one bottom corner and the paragraph in the other, drifting against the page as you scroll while the frame contracts from full bleed into the site container and rounds its corners. Where the image hero centres its copy over the photo, this one leaves the frame clear and captions it along the foot, and the drift is a single parallax prop on HeroBackground, run by a CSS view timeline with no animation library, no scroll listener and no motion at all for readers who asked for none.