Hero · Page header

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.

A full-bleed photo with the copy on a solid plaque in the section color, set in the lower left like a cornerstone. Use for rooted, story-led home pages: missions, churches, and long-standing charities. Needs a background image (people or a building), a headline under ~10 words, one or two sentences of body, and 1–2 actions; the eyebrow reads well as a founding line ("Serving the city since 1923").

Copy beside a photo in a soft, rounded blob with playful floating circles, and the action note as a friendly tag. Use for kids, camps, family programs, and anything that should feel warm and welcoming. Needs a square or 4:3 photo, a short headline, one or two sentences of body, and an action note of 2–5 words (ages, dates, or "Free for families").

A centered headline over a large photo or screenshot framed like an app window, with a soft glow behind it. Use for software, services, and product launches. Needs a 16:9 image (a screenshot or a device photo), a headline under ~10 words, one sentence of body, and 1–2 actions; the action note reads as small print under the buttons ("Free for 30 days · No card needed").

A wide photo framed in a hairline mat above a centered statement: an ornamented eyebrow, a formal headline, and a short intro. Use for seminaries, schools, foundations, and institutions with a place worth showing. Needs a wide 21:9 or 16:9 photo of a building or campus, a headline under ~12 words, one or two sentences of body, and 1–2 actions; the action note reads as a small-caps line under the buttons.

A tall, full-bleed night photo with a huge glowing headline at the bottom and the eyebrow as a live chip with a pulsing dot. Use for youth nights, concerts, worship gatherings, and events. Needs a background image (a crowd, stage, or city at night), a short headline (2–6 words), one sentence of body, and 1–2 actions; put the date or time in the eyebrow.

A magazine front page: the eyebrow sits between rules like a dateline, a large headline, a lede with a drop cap, and a wide photo underneath. Use for editorial, literary, and story-led home pages. Needs a 21:9 or 16:9 image and 1–2 short paragraphs; with two, the copy reads left-aligned and the first paragraph gets a drop cap. The action note reads as the photo's caption.

A loud, poster-style opener: a very large headline beside a photo set on a solid color block, with the action note as a round sticker on the photo. Use for energetic campaign, youth, and event home pages. Needs a short headline (3–7 words), one or two sentences of body, and a square or 4:3 image; keep the action note to 2–4 words.

A wide photo on the right that fades softly into the page, with the copy on the left: eyebrow with a short rule, a big headline, body, actions, and the action note. Use for product, agency, and organization home pages. Needs a background image (people or work in context; the left third fades away) and layout content-left (content-right mirrors it). On phones the photo sits above the copy. Fuse a stats section with the Stat bar · Floating preset to add the stat bar across its bottom edge.

Copy on the left; on the right a slightly tilted grid of square tiles: grayscale portraits plus up to two colored stat tiles. Use for About and Team pages, or any opener that should show the people. Recipe: a fiveq.hero (layout content-left, dark theme reads best) with eyebrow, headline, one sentence of body, and 1–2 actions, then fuse a card grid (connectToPrevious: true, Cards style) with `columns` 4 or 5 and exactly three rows of cards (12 or 15). Portrait cards: an image (square crop works best) and the person's name as the title (read by screen readers, not shown). Stat cards: no image, a short title (a number like "15" or "2004") and a one-line body ("people, one mission"); a stat card takes the button color, or the accent with the card theme set to accent. Use at most two stat cards. On phones the mosaic becomes a tidy five-across strip (the first ten tiles) under the copy.

Copy on the left; on the right a large product image with a second image (a dashboard or screenshot) overlapping its lower left and a round photo chip at its lower right. Use for Services, product, and platform pages. Recipe: a fiveq.split (mediaSide right) with eyebrow, headline, one or two sentences of body, 1–2 actions, and the main image as media (a 3:2 or 16:9 screenshot or device photo), then fuse a card grid (connectToPrevious: true, Cards style, columns 2) with exactly two image-only cards: card 1 the overlapping image (landscape), card 2 the round chip (a photo of people; a square crop). Leave the cards' titles, bodies, and actions empty; the images' alt text is what screen readers read. On phones the pictures stack under the copy: the main image, then the two smaller ones side by side.