ORIGINAL BLOCK PATTERN
Portfolio grid
An image-led two-project section with descriptive captions and links. Replace the repeated demonstration image with your own permitted project images.
Core blocks onlyNo extra CSSCC0 · Free to use
The copied blocks, shown with a neutral baseline. Your theme controls fonts and widths.
Use this layout in WordPress
- Copy the blocks and paste into an empty location in a draft page. If they appear as plain text, paste using the editor’s Code editor, then return to Visual editor.
- Replace all sample text and example.com links. Replace demo images through Media Library; remote image URLs do not create local attachments.
- Use List View to select the outer Group and inner blocks. Review colors, spacing, headings and button links.
- Preview on desktop and mobile before publishing. For a header or footer, paste into the appropriate template part.
Why the arrangement works
- Images establish context before project titles.
- Captions distinguish the type of work.
- Specific links lead to case studies.
Customize the starting point
- Replace both demo images and the fictional project names.
- Use consistent image aspect ratios for a calm grid.
- Write alt text for the actual image, not the generic project category.
On smaller screens
Project columns stack. Check image crops and keep the title connected to its image.
Accessibility checks
Text identifies each project independently of its image. Alt text must change when you replace the photograph.
Theme defaults affect the final appearance. The live preview is rendered from the copied markup with a neutral baseline and does not promise pixel-identical results across themes.
Read the official pattern instructions and RoarWP pattern guide for syncing and customization.