The signature moment
A tall inset bookmark holds the words while the room fills the frame
The panel is a slender page marker on the left, inset from all four cover edges. A large, three-line headline sits near its top; a short service note, opening hours and the menu action sit at the foot. The rest is open photograph. The cover keeps its default content position so its inner flex row keeps the panel aligned.
Theme handoff
What comes from where
Theme and pattern
The Core version inherits the theme palette, face, heading weight and button finish. The panel uses base and contrast chains; headings and links follow the panel ink. The display heading uses a clamp because its size is the composition. Body copy takes the medium rung. Text stays on a solid panel, so the photograph needs no veil.
The panel grows from a phone-friendly minimum to roughly a third of the desktop frame. The cover is at least 44rem tall. On a phone, a border and a clear region of the photograph remain around the inset panel.
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 café first screen with an opaque reading panel inside an untreated full-width photograph.
The signature moment: a tall inset bookmark holds the words while the room fills the frame
The panel is a slender page marker on the left, inset from all four cover edges. A large, three-line headline sits near its top; a short service note, opening hours and the menu action sit at the foot. The rest is open photograph. The cover keeps its default content position so its inner flex row keeps the panel aligned.
Theme behaviourInheritance, fixed decisions and contrast
What it inherits, what it decides
The Core version inherits the theme palette, face, heading weight and button finish. The panel uses base and contrast chains; headings and links follow the panel ink. The display heading uses a clamp because its size is the composition. Body copy takes the medium rung. Text stays on a solid panel, so the photograph needs no veil.
The panel grows from a phone-friendly minimum to roughly a third of the desktop frame. The cover is at least 44rem tall. On a phone, a border and a clear region of the photograph remain around the inset panel.
Technical notesBlock mechanics, responsive behaviour and constraints
Styled look
Parchment and juniper uses parchment #EFE5CD, ink #29392E and juniper #395F49. Georgia supplies the display; Arial and Helvetica supply the body. The juniper menu button has a small, explicit radius. The inherited base is the equivalent Use my theme composition.
What a buyer changes first
Replace the café name, headline, hours and menu link. Fern House is fictional; the photograph does not claim to show a business with that name. Keep the headline short enough for the narrow panel and keep the service note brief.
Included image
The reviewed WordPress Photo Directory café photograph travels as a public URL. Its crop favours the table, chairs and palms. Select the cover and choose Replace to use a Media Library photograph. The URL does not import an attachment. Sources and licences are in image credits.
Questions
Hero cover bookmark: common questions
Does Hero cover bookmark need a plugin?
No. It is built only from core WordPress blocks (button, buttons, cover, group, heading and paragraph), so it pastes into the block editor with nothing to install.
Will Hero cover bookmark match my theme?
Choose by variation. Hero cover bookmark takes your theme’s palette; Parchment and juniper brings its own colours.
How many variations does Hero cover bookmark have?
2: Hero cover bookmark and Parchment and juniper. 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 cover bookmark free?
It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one.
The markup
Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks.
Fetching the markup…Variation: Parchment and juniper
Fetching the markup…
