Presets: Heroes

Compact header for interior pages: title left, intro and actions right. No photo needed.

A photo washed into the page color behind centered copy. Calm, and works with almost any photo.

Copy beside a framed photo. The action note floats over the photo as a proof chip.

Type-only hero with a hairline row of highlights (fuse a minimal card grid under it).

Full-bleed photo or video with copy anchored bottom-left.

For people-led sites: authors, speakers, founders, attorneys.

Split hero with a dark stat bar fused underneath (stats section with Connect to previous).

Hero copy beside a panel listing every program (fuse a minimal card grid).

Photo hero with audience doors overlapping its bottom edge (fuse a card grid).

Copy beside a slightly tilted featured card. Libraries, media, launches.

Leaf-shaped photo mask with a round sticker (the action note).

An oversized headline across the full width with a thin band of values drifting slowly underneath (it stops for reduced motion). Use for bold brand or campaign openers. Needs a short headline (2–5 words) and a bulleted list of 4–8 short values in the body; a paragraph above the list stays as the intro.

A background photo recolored in two brand tones, with copy on top. Use when you have a busy or off-brand photo that should still feel on-brand. Needs a background image (no overlay needed); keep the body to one or two sentences.

The hero copy sits in a big tile inside a mosaic of photo and color tiles. Use for home pages that show many programs at a glance. Fuse a card grid (Cards style) with exactly 5 cards: cards 1, 3, and 5 with an image and a short title (shown as a caption), cards 2 and 4 without an image, with the card theme set to accent and dark, a short title (a number works), and a one-line body.

Event copy beside a ticket stub with a big date. Use for conferences, galas, open houses, and registration pages. Fuse a stats section with 2–3 items: item 1 is the date (value like "Oct 18", label the weekday, detail the times), the rest are place or price (value, label, detail). Put the register button first and the price or policy in the action note.

Centered headline over a large framed 16:9 poster, with the first action as a play button on the poster. Use when a film or talk is the main thing on the page. Needs a 16:9 poster image, a first action linking to the video (icon "play"), and optionally a second action and a note below.

A quiet, text-only opener: small label in the margin, a strong left rule, a serious headline, and a long intro set in two columns. Use for law firms, consultancies, reports, and letters. Needs 2–3 paragraphs of body; the first paragraph becomes the lead. Link-style actions fit best; the action note reads as fine print.

A centered hero above a stacked row of overlapping faces and one line of social proof. Use for volunteer, membership, and community sign-ups. Fuse a card grid (Avatar circle style) with 4–6 people cards (image plus name as the title; names are read by screen readers but not shown), an optional last card with no image whose title is a count like "+335", and a one-line intro.

Copy beside a photo that runs to the page edge and the full section height, cut on a diagonal with an accent stripe along the cut. Use for energetic program or campaign pages. Needs a landscape or square image; the media side sets which edge the photo bleeds to.