About this block
Two feature rows that zig-zag on desktop: copy on the left and a photo on the right, then the reverse. The swap keeps the eye moving down the page and gives each feature its own moment. On smaller screens both rows stack the same way, text first, so the reading order never jumps.
When to use it
- You want to explain two key features or steps in more depth than a feature grid allows.
- You have a good photo or screenshot for each feature.
- A product or service page needs a story told in order, like 'build it' then 'ship it'.
What's inside
- A white section with two rows, each pairing a copy column with a rounded photo.
- Each copy column has a small uppercase eyebrow, an h2 heading, a short paragraph and a button. The first row's button is solid, the second's is outlined.
- From desktop width the rows sit side by side: the first has the photo on the right, the second flips it to the left.
- On phones and tablets each row stacks the copy above its photo, so the two photos never end up next to each other.
- Buttons span the full width on phones and shrink to fit their label from small tablets up.
How to customize it
- Replace both photos with your own, and use the same shape for both so the rows line up.
- Write each eyebrow as a short label for the feature, like 'Editor' or 'Workflow', and keep headings to one idea.
- Point each button at a page that goes deeper on that feature.
- Duplicate the first row and move the copy below the second row to add a third feature. The photo sides keep alternating.
Questions
- Why does the order change on mobile?
- On desktop the photo swaps sides for rhythm. On a narrow screen everything is in one column, so each row shows its text first and then its photo, keeping every feature in the same order.
- What image size works best?
- Landscape photos around 1200 by 800 pixels. The photos are cropped to fill a fixed height, so keep the subject near the centre.
- Should both headings be h2?
- Yes, if this is its own section. If it sits under a bigger section heading, change both to h3 so the outline stays in order.