Documentation

steam-block is a dependency-free custom element for building text + media sections: hero banners, product spotlights, CTA blocks, zig-zag content pages. Even text columns.

It ships two layout templates (split and hero), two content slots (content and media), and a large set of CSS variables so it can be restyled to match any design system without touching its source.

There’s nothing to configure to get started. Drop in the script, write your markup, then reach for CSS variables when you want to make it your own.

Where to go next

• Installation ← one script tag, no build step.
• Usage ← basic and advanced examples, explained.
• Slots ← content and media.
• Attributes ← type, media, order, overlay, prefix, emerge.
• CSS Variables ← a copy-pasteable starting theme and the full reference.
• Visual reference ← every CSS variable rendered live: default next to modified plus combinations.
• Parts: style the inside of the component directly with ::part(), for hover states, animations and any CSS property.
• Helpers ← data-size="auto", the steam-emerge scroll-reveal module and some helpful resources for styling your steam-block.