# Hero name and contact strip

> A portfolio home hero where the person's name is the headline, set at the width of the page, then a hairline with one line of discipline and place, a short sentence, a filled and a text-link action and an availability note, then a strip of five photographs of equal height, each with a frame number and place beneath like a contact sheet. On a phone the strip breaks into a row of two and a row of three. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/hero-name-contact-strip.html
Section: Hero
Access: Free, and free to keep.
Needs: Requires a block theme on WordPress 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: button, buttons, column, columns, group, heading, image, paragraph
Keywords: hero, portfolio, name, photographer, designer, freelance, contact sheet, film strip

## Variations (2)

### Name first (the default)

Identical markup in every theme.

Your base as the ground and contrast as the type, the name at display size in your heading face, your theme's own button and a currentColor hairline.

### Folio

This variation states its own colours and states its own type: identical in every theme.

The Folio photographer set: Ada Lindqvist in Helvetica across a bone page, a graphite hairline, a square darkroom-black Book a day button beside an underlined link, and five frames captioned in monospace.


---

## The signature moment: the name is set to the width of the page, and the work runs under it as a numbered contact strip

**The name is display type, not a rung:** `clamp(2.5rem, calc(17vw - 1.7rem),
12.5rem)` with tight leading, so it runs nearly edge to edge from 820 up and
drops to 40px on a phone. A hairline then opens a row with the discipline and place, one
sentence, a filled action, a text-link action and an availability note.

**The strip is two `core/columns` inside one**, two frames at 40 percent (39.8, to absorb one gutter) and
three at 60, not stacked on a phone, so all five frames are the same 4:5
height across the page and each carries `FR 01 / Place` beneath it. Below
782px the outer columns stack and the strip becomes a row of two over a row
of three, never a grid with an empty cell.

## What it inherits from your theme

- **The typeface.** No font family is stated; the name is in your heading
  face at display size, the rest in your body face, captions in small
  tracked capitals.
- **Your colours.** Base ground and contrast type; the primary button is your
  theme's own button with padding stated for a 44px target, the secondary an
  underlined link in the `role-link` chain; the hairline and label mark are
  `currentColor`.
- **Your spacing.** Section padding and the gaps between the parts are spacing
  presets; the gutters in the strip are fixed at 0.75rem.

## The Folio look

The free Folio set's home hero: bone `#efe9df` ground, Ada Lindqvist in
Helvetica at weight 500 and -0.045em tracking in darkroom `#141517`, graphite
`#5b5f66` copy and hairline, a square darkroom button with bone type, a
safelight `#c8432b` mark on the label and frame captions in monospace.

## Photographs

Five CC0 photographs from the WordPress.org Photo Directory, linked from
pd.w.org, cropped 4:5: a coastal town, a hotel room, clay cups, a housing
facade and a fanned book. Replace them with your own five.