Hero banners, split sections and zig-zag pages.
One custom element.

Import the script, write real HTML, style with plain CSS.
Zero config. No build step. Opt-in scroll-reveal animations.

Try it out, this just works:

<script src="https://cdn.jsdelivr.net/npm/steam-block@1.1.1/dist/steam-block.js" integrity="sha384-iQB69ION+fOI85hIazKAsDqsORX4sV3IemwxcTiqslH/JsGXlJly9as9oMh12ob8" crossorigin="anonymous" defer></script>
<!-- Hero: Image with content on top -->
  <steam-block type="hero">
    <img slot="media" src="https://picsum.photos/id/500/2048/1365" alt="One World Trade Center, photo by Greg Shield">
    <div slot="content"><h1>Hero title</h1><p>steam-block is a dependency-free web component for hero and split content + media sections.</p></div>
  </steam-block>
<!-- Split: Content left, image right -->
  <steam-block type="split">
    <img slot="media" src="https://picsum.photos/id/508/2955/3892" alt="Inside the Hallgrímskirkja, a church in Reykjavík, Iceland. Photo by Jeff Sheldon">
    <div slot="content"><h2>Split title</h2><p>steam-block is perfect for the stuff they want you to do now.</p></div>
  </steam-block>

Source on GitHub · npm

<steam-block>is the fastest way to add marketing sections to static websites and site generators like Hugo, Eleventy and Astro.

Get started or read the docs →

~3kbgzipped
2slots
6attributes
~80CSS variables
0dependencies

From: Li <marketing@your-agency.com>
To: Dave <dev@your-agency.com>
Cc: Robert <ceo@your-agency.com>
Subject: New product launch needs landing page

Hi Dave,
Bob wants the new product live this afternoon, beta or not. The lander just needs to tell the story for now.
Sue sends images and copy before noon.

Thanks,
Li

PS: Confirm with Bob directly once it's live, I'm out this afternoon.

A <steam-block> is perfect for the stuff they want you to do now

Setup a whole page in minutes with <steam-block>. Have fun with CSS variables if there's time left. (Bob, here's your lander.)

See it in action

The block below has type="hero" which means media fills the background, content sits on top. Toggle it and watch it become type="split". Now content and media are side by side.
Same markup, same script tag, one attribute.

This is a <steam-block>

Content overlaid on top of the media: the hero template.

media="fluid" is added so the media bleeds edge to edge of the viewport. The media slot takes any embeddable element: image, video, iframe, inline SVG.

Toggle hero ↔ split or see more examples →

Same element

type="split" instead of type="hero".

Content and media side by side. Every attribute works across both templates.

Toggle hero ↔ split or see more examples →

Same element again, now with `type="split" order="flip"`

Every visual detail (background, borders, gaps, column widths, media blend modes, masks) is a CSS variable. Nothing to configure through Javascript.

Toggle hero ↔ split or see more examples →

Why steam-block

Two layouts

split and hero cover most content-and-media layouts: hero banners, product spotlights, CTA blocks, zig-zag pages. Out of the box.

Your markup

Two slots, content and media. Put anything in them. Crawlers see real, unhidden HTML, not shadow-DOM content.

~80 CSS variables

Borders, masks, blend modes, aspect ratios, column widths, padding. Reshape it entirely from your own stylesheet. No source edits, no build step.

No dependencies

~3kb gzipped, no framework, no runtime dependency. A single custom element that works anywhere HTML does.

Hero banners, split sections and zig-zag pages.
One custom element.

Try it out, this just works:

A <steam-block> is perfect for the stuff they want you to do now

See it in action

This is a <steam-block>

Same element

Same element again, now with `type="split" order="flip"`