Hero name and contact strip, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-name-contact-strip.html Core Patterns (https://patternpaste.com/patterns/) Hero (https://patternpaste.com/patterns/hero/) Free Standard # 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. ## All patterns Search patterns Loading patterns… 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. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview A home hero for someone who is the business: a photographer, a designer, an illustrator. The name is the headline, then what they do and where, two actions, and a strip of five pictures captioned like a contact sheet. It sits in the hero section beside hero-statement (extreme air, no pictures) and hero-reel (a row of frames under a headline): here the headline is a name set to the page's width, and every frame carries a number and a place. ### 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. Theme behaviourInheritance, fixed decisions and contrast ### 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. Technical notesBlock mechanics, responsive behaviour and constraints ### 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. Questions ## Hero name and contact strip: common questions Does Hero name and contact strip need a plugin? No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading, image and paragraph), so it pastes into the block editor with nothing to install. Will Hero name and contact strip match my theme? Choose by variation. Name first takes your theme’s palette; Folio brings its own colours. How many variations does Hero name and contact strip have? 2: Name first and Folio. Each is its own markup; choose one in the toolbar above the preview before you copy. Can I use my own images? Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Is Hero name and contact strip free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Read the markup #### Pair with Features Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.html)Stats Arisings recycled figures A figures section on an inverted slab where one number carries it: a percentage set at display size over a heading that finishes the sentence and a short note, beside a tall photograph. Under it three ruled tiles break the figure down, each a large percentage, a heading and a line, with a second photograph as the fourth tile. Four across on a wide screen, two on a tablet, one on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/arisings-recycled-figures.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). ## Specifications Section Hero Access Free Plugin None, core blocks only Variations 2 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, column, columns, group, heading, image, paragraph Presets color 6, spacing 3, font-size 1 WordPress 7.0+ Continue exploring ## Next in Hero Explore all 28 Hero patterns (https://patternpaste.com/patterns/hero/)Also in Gallery (https://patternpaste.com/patterns/gallery/) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero media and text A hero built on Media & Text rather than columns, so the photograph runs off the side of the screen while the words stay on the page's own measure. Hero Preview pattern (https://patternpaste.com/pattern/hero-media-text.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero next slots A clinic or practice hero: a display headline, a short lead and two text links beside a square photograph, with a card of the next free appointments lapping the photograph's foot. Hero Preview pattern (https://patternpaste.com/pattern/hero-next-slots.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero open now stamp A café home hero: a large photograph with a round Open today stamp giving the hours lapping its bottom corner, and beside it a label, the headline, a line of welcome, two actions and the address on a rule. Hero Preview pattern (https://patternpaste.com/pattern/hero-open-now-stamp.html)