Zigzag

← All examples

ZIG

Alternate order="flip" on the second steam-block and set --steam-block-gap to 0 so all media corners touch.

ZAG

--steam-block-content-padding keeps the text off the media instead.

ZIG

Leave out spacing between the blocks, or the corners drift apart. Works with media="fluid" as well.

Code

<style>
.zigzag {
  --steam-block-gap: 0;
  --steam-block-content-padding: 0 5vw;
}
</style>
<steam-block class="zigzag">
  <img slot="media" src="photo-1.jpg" alt="">
  <div slot="content"><h1>Zig</h1></div>
</steam-block>
<steam-block class="zigzag" order="flip">
  <img slot="media" src="photo-2.jpg" alt="">
  <div slot="content"><h1>Zag</h1></div>
</steam-block>
<steam-block class="zigzag">
  <img slot="media" src="photo-3.jpg" alt="">
  <div slot="content"><h1>Zig</h1></div>
</steam-block>