About stacked plates

An about-us story for a studio, workshop or family business, set as a photograph mounted like a print, the mount on a larger plate, and the story on a third plate lapped over the lower corner of the frame. It sits in the team section (and under editorial) beside about-founder-story, which signs a story beside a portrait: here the story is laid on top of the picture, like a card tucked into the corner of a frame.

Three plates nest and overlap: the photograph on a pale mat, the mat on a larger inverted plate, and the story plate lapped up over that plate's lower right corner. The outer plate's bottom padding and the story plate's negative top margin are the same clamp(), so the story always rests on the empty foot of the frame and never covers the photograph. Both columns are children of a vertical flex group, so the lap never collapses into the section margin and the story paints over the frame.

1. The photograph. Select it and choose Replace; the mat and the crop stay.
2. The story. Two short paragraphs fit the plate best.
3. The links. #classes and #visit.

• Typeface. The base states no font family.
• Palette. The ground is your base and the text your contrast. The outer plate is inverted, contrast behind a base caption, and the mat is base. The story plate is role-plate falling back to base, its text role-plate-text falling back to contrast, inside a contrast hairline.
• Buttons. The class button is your theme's button with a stated padding for a 44px target; the shop link is a transparent, underlined core button.

• The nesting, the mat width and the lap. Square corners throughout, like a mounted print.
• Proportion. The heading is on x-large because it lives on a card, copy on medium.

The frame column is capped at 54rem on the left and the story column at 36rem on the right; on a desktop they cross by a few hundred pixels, on a tablet the story sits under the right half of the frame, and on a phone both run the full width with a 2.5rem lap.

A Styled variation with its own colours and type: bisque ground #f2e4d3, indigo outer plate #2c3569 with a cream caption, cream mat #fbf6ee, a cream story plate #fffaf3 on an indigo hairline with indigo ink #1f2446, and a square-cornered indigo button with cream type. Gill Sans throughout, at 400 for copy and 600 for the heading. Every text pair is measured on its painted ground. Take the base if you want your theme's colours.

• Core blocks only: group, heading, paragraph, image, buttons, button. No plugin, nothing to keep updated.
• Text is measured at 4.5:1 against the ground it actually sits on.

The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or cover and choose Replace to use your own Media Library files. See image credits for the sources and licenses. Pasting an image URL does not import a Media Library attachment.