Search blocks by description or jump to a page.
Alternating rows that flip image and text side to side down the page. Use it to give each project room to breathe with a clear narrative flow.
Zigzag Layout is a full project showcase feed. A centered heading and short summary paragraph sit above a stack of rows, each holding an aspect-ratio image on one side and a content card on the other. Odd rows place the image on the left; even rows flip it to the right, creating the alternating pattern that gives the block its name. Each row also carries a category badge overlaid on the image corner, a project title, a description paragraph, a labeled row of technology badges, and a "View Project Details" button.
Every project row is independent, so you can add or remove entries freely. The section heading, the intro paragraph, the badge labels, the technology lists, and the button text are all plain copy you can update without touching the layout. The image and text halves each take up roughly half the row width on large screens and stack vertically on smaller ones.
Reach for this block when you want to let each project speak at length rather than compete for attention in a grid. It suits an online education platform showing off course builder tools, learning management systems, or student-facing products where a short narrative and a visible tech stack reassure prospective clients or employers that each build solved a real problem. Compared to a Standard Grid, the alternating rows slow the reader down just enough to absorb the description before moving on.
A natural flow around it on a Portfolio page:
Before
After
Each row is a self-contained project story, so the content you put inside shapes what the block communicates. A few directions that work well for education-focused work:
Tip: keep each description to three or four sentences so every row stays balanced and the page scrolls at a steady, readable pace.