Hero crown sheet

A hero for an outdoor trade that quotes from a site visit. The headline, a short line and the call button sit centred against a tall photograph, and the survey sheet the customer will actually receive laps up over its corner. It sits in the hero section beside hero-arch (a badge on an arched photograph), hero-column-portrait (a plain picture column) and hero-plate-on-paper (the whole hero framed as a card): none puts the paperwork on the picture.

A framed card, ruled like a job sheet, laps up over the bottom corner of a 4:5 photograph: tree, height and the work proposed each on their own hairline, then a heavier rule and the promise of a written quote in 48 hours. The lap is a negative top margin on the second child of a vertical flex group, so it never collapses into the column above; on a wide screen a negative left margin pushes the sheet out past the photograph's left edge and a right inset leaves the photograph showing down the other side. The call button and the survey link sit under the lede, where the eye lands first. The sheet takes the default layout, not a vertical flex, so its wrapping rows are measured at their real width and stay tight.

1. The sheet's rows: your usual tree, height and work, or a real recent job.
2. The phone number on the button (it dials the number it shows).
3. The photograph: a picture of a tree you have worked on.

• Typeface. The base states no font family.
• Palette. Your base ground and contrast type. The sheet is on the role-plate role (falling to base) in a 2px contrast frame, its rows on role-rule hairlines; labels are on role-label, the text link on role-link, all falling back to contrast. The call button is your theme's button with a stated padding for a 44px target.

• The headline. A bare clamp, off the ladder: its size is the composition, about 34px on a phone and 100px at 1920.
• The photograph's shape. 4:5, so the tree stands tall beside the text.
• The lap. Up to 16rem up and 4.5rem out to the left on a wide screen; 7rem up and inset on a phone.

Part of the Bough Pattern Set, a tree surgeon in Brimscombe Port, Stroud: leaf-tinted birch-bark #e8eee2 ground, forest #15301c ink, moss #40564a muted ink, leaf-green #2e6b3a labels, a pale #f2f6ec sheet in a 2px forest frame with #c3d0bb hairlines, square cards and a filled forest Call button with 4px corners under the lede. The headline is a Rockwell slab stack at weight 700 over Trebuchet MS for everything else. Take the base for your theme's colours, or the look's Use my theme chip.

• Core blocks only: group, columns, image, heading, paragraph, buttons.
• One photograph, from the WordPress.org Photo Directory (CC0).