Installation

Load it from a CDN, no download, no build step:

<script src="https://cdn.jsdelivr.net/npm/steam-block@1.2.0/dist/steam-block.js" integrity="sha384-oLp3ANpEh8l7QFa7niYEAhVcDMzyFCDiXx/CKeEQuIooSKzW/wc/Gk9KB3kdlrX7" crossorigin="anonymous" defer></script>

See Installation for using npm and the optional scroll reveal script.

Basic usage

Wrap your content and media in a <steam-block>, assigning each piece to the content or media slot:

<steam-block type="split" media="fluid">
  <div slot="content">Your content here</div>
  <img slot="media" src="your-image.jpg" alt="Your media">
</steam-block>

steam-block supports two templates (layouts), chosen with the type attribute:

1. split → content and media side by side, the default
2. hero → media as a background with content overlaid

Add media="fluid" to have the media reach the edge of the viewport. This works in split and hero mode.

In split mode add order="flip" to swap the position of media and content on desktop: media on the left, content on the right. On mobile (meaning below a breakpoint you can adjust with a CSS variable), media and content just stack: media always first, then content.

See the documentation for the full list of attributes and CSS variables.

Split template

Welcome to Steam Block

“Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it's really how it works.”

Split template with order="flip" and media="fluid"

Welcome to Steam Block

“Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it's really how it works.”

Hero template

Your Hero Section

Customizable and responsive design.

Hero template with media="fluid"

Your Hero Section

Customizable and responsive design.

Next steps