Each example is a block: a Section with the page’s h1, supporting text and actions, next to an image, a sign-up form, a DeviceFrame mockup, a card or a background pattern.

npx @ava-ui/apogee add hero/split-image-01

Copy is props

Every hero block takes the same content props, with its sample copy as the defaults: announcement ({ badge?, label, href }), eyebrow, heading, description, primaryAction and secondaryAction ({ label, href }) and media ({ src, srcDark?, alt, width?, height? }). A block ignores the ones it has no place for, so you can swap one hero block for another and keep the copy. Some blocks add their own, such as submitLabel or images.

• Wrap words of the heading in *asterisks* to accent them. Each block styles the accent its own way (underlined, faded, italic); a block without an accent style drops the asterisks.
• Pass null to hide a part: announcement={null}, secondaryAction={null}.

The same props in two blocks:

Ship pages your team can edit

Blocks that take their copy as props, so an editor changes words, not code.

Start free

Show codeHide code

<SimpleText01
heading="Ship pages *your team* can edit"
description="Blocks that take their copy as props, so an editor changes words, not code."
primaryAction={{ label: 'Start free', href: '#' }}
secondaryAction={null}
/>

<CardMockup01
heading="Ship pages *your team* can edit"
description="Blocks that take their copy as props, so an editor changes words, not code."
primaryAction={{ label: 'Start free', href: '#' }}
secondaryAction={null}
announcement={null}
/>

Split image 01A heading, line and email signup beside an abstract image.

Split image 02A heading, line and two buttons beside a photo with a slanted edge.

Split image 03A heading, line and two buttons beside a photo with one large rounded corner.

Split image 04A heading, line, email signup and rating beside a portrait photo.

Split image 05A heading, line and two buttons beside a workspace photo, over a dot grid.

Split image 06A heading, line and email signup beside a portrait photo, over a dot grid.

Split form 01A heading, line and rating beside a sign-up card.

Split form 02A heading, line and three points beside a sign-up card.

Abstract angles 01A centred heading and two buttons over a video on a slanted band.

Abstract angles 02A centred heading and two buttons over a wide video on a slanted band.

Abstract angles 03A centred heading and two buttons over a screenshot on a slanted band.

Abstract angles 04A centred heading and two buttons over a cropped screenshot on a slanted band.

Screen mockup 01A centred heading and two buttons over a cropped screenshot, on a tint with a dot grid.

Screen mockup 02A heading, two buttons and customer logos beside a screenshot, on a tint with a dot grid.

Screen mockup 03A centred heading and two buttons over a screenshot, on a tint with a dot grid.

Screen mockup 04A heading, two buttons and customer logos beside a screenshot on a panel, on a tint with a dot grid.

Screen mockup 05A centred heading and two buttons over a phone on small screens and a browser on wide ones, over a grid.

Screen mockup 06A heading and two buttons beside a screenshot with a phone in front, over a dot grid.

Screen mockup 07A centred heading and two buttons over a screenshot, over a fine grid.

Screen mockup 08A heading and two buttons beside a large screenshot, over a dot grid.

IPhone mockup 01A heading, line and app buttons beside a phone, over a dot grid.

IPhone mockup 02A heading, line and app buttons beside a phone over a screenshot, on a tint with a dot grid.

IPhone mockup 03A heading, line and a text-me-a-link form beside a phone over a screenshot, over a dot grid.

IPhone mockup 04A heading, two buttons and a rating beside a phone, with notifications beside it.

Color card 01A centred heading and email signup on a brand card, over a chart.

Color card 02A heading and email signup beside a chart, on a brand card.

Color card 03A centred heading and email signup on a brand card, over a screenshot that overlaps it.

Color card 04A heading and email signup beside a screenshot, on a brand card.

Card mockup 01A centred heading and two buttons over two payment cards on a panel, over a fine grid.

Card mockup 02A heading and two buttons beside two payment cards on a panel, on a tint with a dot grid.

Card mockup 03A centred heading and two buttons over five payment cards fanned on a brand panel, over a fine grid.

Card mockup 04A heading and two buttons beside three stacked payment cards on a brand panel.

Card mockup 05A centred eyebrow, heading and two buttons over two tilted payment cards, over a fine grid.

Card mockup 06A centred eyebrow, heading and two buttons over five fanned payment cards, on the brand colour.

Card mockup 07An eyebrow, heading and two buttons beside three stacked payment cards, on the brand colour.

Card mockup 08A heading, email signup and three points over a wide panel of payment cards, over a dot grid.

Card mockup 09A heading and two buttons beside four payment cards on a panel.

Card mockup 10A heading and two buttons over a wide panel of tilted payment cards.

Card mockup 11A heading and email signup beside a cascade of payment cards on a panel.

Simple text 01A large heading with an underlined phrase, a line and two buttons over a wide photo, over a dot grid.

Simple text 02A large heading with an underlined phrase, a line and two buttons over a wide photo, on the brand colour.

Geometric shapes 01A heading, line and two buttons beside a block of geometric shapes, over a dot grid.

Geometric shapes 02A heading, line and two buttons beside geometric shapes that fill the right half, over a grid.

Geometric shapes 03A centred heading, line and two buttons over a wide row of geometric shapes, over a dot grid.

Framed split 01A two-tone heading, a button and an industry picker beside a live status card and a bracketed image, inside a ruled frame on a primary tint.

Framed panels 01A heading, line and button in a ruled panel beside a progress strip, a bracketed image and a live stat, over a row of logos.

Editorial images 01A very large heading with an indented first line over a tall photo and a wide photo, with numbered facts under the wide one.

Greeting plus 01A full-screen grid with corner labels, an outlined plus sign, stacked greetings in four languages, a short statement and a footer row with a now-playing note.

App panel 01A serif heading beside a short line, two round buttons, then an app mockup with a sidebar, prompt box and recent projects on a soft primary panel, over a row of logos.

Card field 01A field of small image cards that grow toward the top corner and fade away from it, with a two-tone serif heading, line and two buttons in the opposite corner.

Photo stamps 01A full-width photo with a centred eyebrow, heading, line and round button, a column of round stamps down one side and a rounded panel rising over the bottom edge.

Swatch scatter 01Pattern swatches with mono captions scattered across the section, a pill, a large heading at the bottom start and a line with two buttons at the bottom end.

Product photo 01A full-screen product photo with a mono eyebrow, heading, line and two round buttons at the bottom start, a scroll cue in the middle and a video thumbnail at the bottom end.

Brand panel 01A mono eyebrow, heading, line, button and a testimonial card beside a full-height dark panel with a glowing mark and wordmark.

Archive board 01A framed archive card with a spaced title, a catalogue number and three mounted black-and-white photos, one turned on its side.

Photo wordmark 01A full-screen still-life photo with a quiet five-column bar on top: two links, a centred wordmark, two links.

Screen hills 01A centred heading, line and round button over an app screenshot that sits between two rolling hills.

Wordmark photo 01A rounded photo card with a stacked heading, a line and a round button, a giant wordmark across the bottom and a scrolling strip of claims under it.

Film strip 01A photo framed like a frame of cine film, with the next frames peeking in above and below, a centred two-part heading and two dotted links.

Dusk card 01A rounded card painted like a dim evening sky, with a small mark, a centred heading, a mono line and two small mono buttons.

Halftone glow 01A centred heading, line and two round buttons on a band that runs from dark through the primary hue into the page, with a halftone dot texture and a logo strip below.

Thumb streams 01Streams of small video thumbnails that curve across the section and grow toward the end, with a heading, line and two buttons at the start and a preview card in the corner.

Orbit arcs 01A centred heading, line and square button on a soft primary wash, over three half-circle arcs with team photos sitting on them and a mark at the centre.

Audit cards 01A centred eyebrow, heading, line and square button on a soft wash, over a composite of product cards: a summary, insights with tags and a validation table with pass and fail rows.

Fanned cards 01A centred heading over four service cards fanned out like a hand, each in a different brand fill, with a progress line under them; a swipe row on phones.

Brand photos 01A centred heading and line on the brand surface, over a wide photo with a round button and a tall photo with a caption.

Coverflow 01A row of cards turned toward a centre card in a hexagon frame, with a mono label above, a two-tone heading below and a link with a hexagon arrow.

Tinted photo 01A rounded photo card washed in the primary hue, with a small mark and label, a statement heading and an outline round button at the top start.

Curved gallery 01A centred heading and line over a row of team photos; the middle one is framed, and the side ones bleed off the edges inside large curves.

Icon crowd 01A dense wall of animal and robot icons fills the section, with a raised card in the middle holding a mark, heading, line, two buttons and a note, and a pill at the bottom.

Product tiles 01A news pill, a centred heading with an underlined last word, a line and two buttons, over three product tiles: a chat, a coding terminal and an assistant thread.

Prompt cubes 01A mono eyebrow, centred heading and line over a prompt box with actions, flanked by two gridded cubes, above an app window on a gridded panel.

Brand statement 01A photo of a person on the brand colour, a stacked mono menu at the top start, a lit button at the top end and a huge uppercase mono statement at the bottom end, over a row of backers.

Dashboard prompt 01A breadcrumb, a two-tone heading, a line and two buttons in a dashed frame, over a patterned panel where a prompt turns into three stat cards.

Activity stack 01A pill, heading, line and two buttons beside a fading stack of activity cards, over a video card and an ask-anything bar.

Arc headline 01A sky band cut by a wide curve, a product photo in the middle with two halves of the heading tilted along the curve beside it, a line, a round button and four feature columns.

Gifting tabs 01A huge heading with an italic second line, a line and an email signup between two tilted product photos on soft blooms, over a row of feature tabs with a title and pager.

Floating gifts 01A search bar over a huge three-line heading with the last line in the brand colour, a line, two buttons and a rating, with four labelled gift items floating in the corners.