ONE COMPONENT
PER LAYOUT
PER LAYOUT
The old way: a hero component, a grid component, a card component, a stats-strip component. Each with its own markup shape, its own CSS, its own quirks to relearn.
ONE COMPONENT,
ANY LAYOUT
The steam-block way: the same element, a few CSS variables. A hero banner this morning, a two-column spread this afternoon, no new markup shape to learn.
Code
<style>
.text-columns {
--steam-block-media-width: 0;
--steam-block-media-min-width: 0;
--steam-block-content-display: grid;
--steam-block-content-grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
--steam-block-content-gap: 3rem;
}
</style>
<steam-block class="text-columns">
<div slot="content"><h3>Column one</h3><p>...</p></div>
<div slot="content"><h3>Column two</h3><p>...</p></div>
<!-- no slot="media" element at all -->
</steam-block>