Visual reference

Every CSS variable from the reference, rendered live by the real component. Each row shows the default next to a modified version, with the CSS under each card. Only the variables under each card differ.

Three variables have no demo here: the transitions --steam-block-media-transition and --steam-block-content-transition only show while a value changes. The internal --steam-block-scrollbar-width is set by the component itself.

General

These apply to both templates. Every demo on this page forces --steam-block-min-width-breakpoint to 0px, except the breakpoint demo itself, so the wide layout shows even in these narrow cards: side by side for split, content on top of the media for hero.

--steam-block-min-width-breakpoint reference

The width at which the layout switches. Below it a split stacks its columns and a hero puts its content under the media, above it a split goes side by side and a hero overlays the content. It is a media query on the browser viewport, not on the element’s own width, so a steam-block in a narrow sidebar on a wide screen still uses the wide layout. Here 9999px forces the narrow layout and 0px the wide one, whatever your window size.

type="split"

Default

Sample

Sample copy to show the effect.

--steam-block-min-width-breakpoint: 9999px;

Modified

Sample

Sample copy to show the effect.

--steam-block-min-width-breakpoint: 0px;

type="hero"

Default

Sample heading

Sample overlay copy.

--steam-block-min-width-breakpoint: 9999px;

Modified

Sample heading

Sample overlay copy.

--steam-block-min-width-breakpoint: 0px;

--steam-block-background reference

Background of the whole section. Transparent by default. In a hero the media covers the section, so the background only shows around it, here through padding.

type="split"

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-background: #fce7d6;

type="hero"

Default

Sample heading

Sample overlay copy.

--steam-block-padding: 1rem;

Modified

Sample heading

Sample overlay copy.

--steam-block-padding: 1rem;
--steam-block-background: #fce7d6;

--steam-block-padding reference

Padding of the whole section. A background is set on both cards so the padding is visible.

type="split"

Default

Sample

Sample copy to show the effect.

--steam-block-background: #f1f1f1;

Modified

Sample

Sample copy to show the effect.

--steam-block-background: #f1f1f1;
--steam-block-padding: 2rem 1.5rem;

type="hero"

Default

Sample heading

Sample overlay copy.

--steam-block-background: #f1f1f1;

Modified

Sample heading

Sample overlay copy.

--steam-block-background: #f1f1f1;
--steam-block-padding: 2rem 1.5rem;

--steam-block-max-width reference

Caps the width of the section and centers it. Ignored with media="fluid".

type="split"

Default

Sample

Sample copy to show the effect.

--steam-block-background: #f1f1f1;

Modified

Sample

Sample copy to show the effect.

--steam-block-background: #f1f1f1;
--steam-block-max-width: 16rem;

type="hero"

Default

Sample heading

Sample overlay copy.

--steam-block-background: #f1f1f1;

Modified

Sample heading

Sample overlay copy.

--steam-block-background: #f1f1f1;
--steam-block-max-width: 16rem;

--steam-block-border reference

Border of the section, the full border shorthand in one variable.

type="split"

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-border: 4px solid #c2410c;

type="hero"

Default

Sample heading

Sample overlay copy.

No variables set

Modified

Sample heading

Sample overlay copy.

--steam-block-border: 4px solid #c2410c;

--steam-block-border-top, --steam-block-border-right, --steam-block-border-bottom, --steam-block-border-left reference

One side of the section border. Overrides --steam-block-border for that side only.

type="split"

Default

Sample

Sample copy to show the effect.

--steam-block-border: 2px solid #999;

Modified

Sample

Sample copy to show the effect.

--steam-block-border: 2px solid #999;
--steam-block-border-left: 10px solid #c2410c;

type="hero"

Default

Sample heading

Sample overlay copy.

--steam-block-border: 2px solid #999;

Modified

Sample heading

Sample overlay copy.

--steam-block-border: 2px solid #999;
--steam-block-border-left: 10px solid #c2410c;

--steam-block-border-radius reference

Rounds the corners of the section. A hero clips its media to the rounding, a split does not, so its media keeps square corners where it meets a rounded one. Round the media as well with --steam-block-media-border-radius, or keep it off the corner with --steam-block-padding. A border is set on both cards so the rounding is visible.

type="split"

Default

Sample

Sample copy to show the effect.

--steam-block-border: 3px solid #999;

Modified

Sample

Sample copy to show the effect.

--steam-block-border: 3px solid #999;
--steam-block-border-radius: 1.5rem;

type="hero"

Default

Sample heading

Sample overlay copy.

--steam-block-border: 3px solid #999;

Modified

Sample heading

Sample overlay copy.

--steam-block-border: 3px solid #999;
--steam-block-border-radius: 1.5rem;

--steam-block-box-shadow reference

Shadow of the whole section.

type="split"

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-box-shadow: 0 1rem 2rem rgba(0,0,0,.35);

type="hero"

Default

Sample heading

Sample overlay copy.

No variables set

Modified

Sample heading

Sample overlay copy.

--steam-block-box-shadow: 0 1rem 2rem rgba(0,0,0,.35);

--steam-block-content-margin reference

Margin on the content, above the breakpoint only. Negative values pull the content over the media.

Default

Sample

Sample copy to show the effect.

--steam-block-content-background: #111;
--p-color: white;

Modified

Sample

Sample copy to show the effect.

--steam-block-content-background: #111;
--p-color: white;
--steam-block-content-margin: -2rem 0 0;

Content

The box around the content slot.

--steam-block-content-background reference

Background of the content box.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-content-background: #fde68a;

--steam-block-content-padding reference

Padding of the content box. The default is 5vw when stacked, and 0 in a side by side split.

Default

Sample

Sample copy to show the effect.

--steam-block-content-background: #fde68a;

Modified

Sample

Sample copy to show the effect.

--steam-block-content-background: #fde68a;
--steam-block-content-padding: 1.5rem;

--steam-block-content-border reference

Border of the content box, border shorthand.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-content-border: 3px dashed #c2410c;

--steam-block-content-border-top, --steam-block-content-border-right, --steam-block-content-border-bottom, --steam-block-content-border-left reference

One side of the content border. Overrides --steam-block-content-border for that side only.

Default

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1rem;

Modified

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1rem;
--steam-block-content-border-left: 6px solid #c2410c;

--steam-block-content-border-radius reference

Rounds the corners of the content box. The before and after layers follow the same rounding.

Default

Sample

Sample copy to show the effect.

--steam-block-content-border: 3px solid #999;

Modified

Sample

Sample copy to show the effect.

--steam-block-content-border: 3px solid #999;
--steam-block-content-border-radius: 1rem;

--steam-block-content-box-shadow reference

Shadow of the content box.

Default

Sample

Sample copy to show the effect.

--steam-block-content-background: white;

Modified

Sample

Sample copy to show the effect.

--steam-block-content-background: white;
--steam-block-content-box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.3);

--steam-block-content-transform reference

Transform of the content box: rotate, scale, translate.

Default

Sample

Sample copy to show the effect.

--steam-block-content-background: white;

Modified

Sample

Sample copy to show the effect.

--steam-block-content-background: white;
--steam-block-content-transform: rotate(2deg);

--steam-block-content-clip-path reference

Clips the content box to a shape. Needs a background to show, see the combinations below.

Default

Sample

Sample copy to show the effect.

--steam-block-content-background: #fde68a;
--steam-block-content-padding: 1.5rem;

Modified

Sample

Sample copy to show the effect.

--steam-block-content-background: #fde68a;
--steam-block-content-padding: 1.5rem;
--steam-block-content-clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);

--steam-block-content-mask reference

Masks the content box, text included.

Default

Sample

Sample copy to show the effect.

--steam-block-content-background: #fde68a;
--steam-block-content-padding: 1.5rem;

Modified

Sample

Sample copy to show the effect.

--steam-block-content-background: #fde68a;
--steam-block-content-padding: 1.5rem;
--steam-block-content-mask: linear-gradient(black 40%, transparent);

--steam-block-content-opacity reference

Opacity of the slotted content.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-content-opacity: .35;

--steam-block-content-filter reference

CSS filter on the slotted content.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-content-filter: blur(2px);

--steam-block-content-blend-mode reference

Blend mode of the slotted content. The text blends with whatever is behind it, in a hero the photo.

Default

Blend

No variables set

Modified

Blend

--steam-block-content-blend-mode: difference;

--steam-block-content-display, --steam-block-content-grid-template-columns, --steam-block-content-gap reference

Turns several elements in the content slot into a grid, without a wrapper element.

Default

Item 1

Own element.

Item 2

Own element.

Item 3

Own element.

No variables set

Modified

Item 1

Own element.

Item 2

Own element.

Item 3

Own element.

--steam-block-content-display: grid;
--steam-block-content-grid-template-columns: repeat(3, 1fr);
--steam-block-content-gap: 1rem;

Content, before layer

A layer painted on the content box, behind the text. Same box as the content background.

--steam-block-content-before-background reference

Background of the before layer. On its own it looks just like --steam-block-content-background. It adds something once combined with a blend mode, mask or clip path.

Default

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1.5rem;

Modified

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1.5rem;
--steam-block-content-before-background: #fde68a;

--steam-block-content-before-blend-mode reference

Blend mode of the before layer. It blends with what is behind the content, in a hero the photo.

Default

Sample heading

Sample overlay copy.

--steam-block-content-before-background: #ff5400;

Modified

Sample heading

Sample overlay copy.

--steam-block-content-before-background: #ff5400;
--steam-block-content-before-blend-mode: multiply;

--steam-block-content-before-clip-path reference

Clips the before layer to a shape, the text stays untouched.

Default

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1.5rem;
--steam-block-content-before-background: #fde68a;

Modified

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1.5rem;
--steam-block-content-before-background: #fde68a;
--steam-block-content-before-clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);

--steam-block-content-before-mask reference

Masks the before layer, the text stays untouched.

Default

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1.5rem;
--steam-block-content-before-background: #fde68a;

Modified

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1.5rem;
--steam-block-content-before-background: #fde68a;
--steam-block-content-before-mask: linear-gradient(to right, black, transparent);

--steam-block-content-before-opacity reference

Opacity of the before layer.

Default

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1.5rem;
--steam-block-content-before-background: #ff5400;

Modified

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1.5rem;
--steam-block-content-before-background: #ff5400;
--steam-block-content-before-opacity: .3;

Content, after layer

A layer painted on top of the content box, over the text. Clicks pass through it.

--steam-block-content-after-background reference

Background of the after layer. It covers the text, so use a transparent color, a gradient or a blend mode.

Default

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1.5rem;

Modified

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1.5rem;
--steam-block-content-after-background: linear-gradient(to right, transparent, rgba(255,84,0,.7));

--steam-block-content-after-blend-mode reference

Blend mode of the after layer. Here multiply keeps the dark text and colors the light background.

Default

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1.5rem;
--steam-block-content-background: white;
--steam-block-content-after-background: #ff5400;

Modified

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1.5rem;
--steam-block-content-background: white;
--steam-block-content-after-background: #ff5400;
--steam-block-content-after-blend-mode: multiply;

--steam-block-content-after-clip-path reference

Clips the after layer to a shape.

Default

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1.5rem;
--steam-block-content-after-background: rgba(255,84,0,.5);

Modified

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1.5rem;
--steam-block-content-after-background: rgba(255,84,0,.5);
--steam-block-content-after-clip-path: inset(0 50% 0 0);

--steam-block-content-after-mask reference

Masks the after layer.

Default

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1.5rem;
--steam-block-content-after-background: rgba(255,84,0,.5);

Modified

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1.5rem;
--steam-block-content-after-background: rgba(255,84,0,.5);
--steam-block-content-after-mask: linear-gradient(to bottom, black, transparent);

--steam-block-content-after-opacity reference

Opacity of the after layer.

Default

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1.5rem;
--steam-block-content-after-background: #ff5400;

Modified

Sample

Sample copy to show the effect.

--steam-block-content-padding: 1.5rem;
--steam-block-content-after-background: #ff5400;
--steam-block-content-after-opacity: .3;

Media

The box around the media slot, and the image or video in it.

--steam-block-media-margin reference

Margin on the media box, above the breakpoint only. Negative values let the media bleed out of its column. A hero clips it at its own edge.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-media-margin: -2rem 0 0 -2rem;

--steam-block-media-object-position reference

Which part of the image stays visible when it is cropped. Only matters when the image and the media box have a different shape, here a square photo in a tall box.

Default

Sample

Sample copy to show the effect.

--steam-block-media-aspect-ratio: 1 / 2;

Modified

Sample

Sample copy to show the effect.

--steam-block-media-aspect-ratio: 1 / 2;
--steam-block-media-object-position: left;

--steam-block-media-border reference

Border of the media box, border shorthand.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-media-border: 6px solid #003049;

--steam-block-media-border-top, --steam-block-media-border-right, --steam-block-media-border-bottom, --steam-block-media-border-left reference

One side of the media border. Overrides --steam-block-media-border for that side only.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-media-border-bottom: 10px solid #003049;

--steam-block-media-border-radius reference

Rounds the corners of the media box. The before and after layers follow the same rounding.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-media-border-radius: 2rem;

--steam-block-media-box-shadow reference

Shadow of the media box.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-media-box-shadow: 0 1rem 2rem rgba(0,50,73,.5);

--steam-block-media-clip-path reference

Clips the media box to a shape, its before and after layers included.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-media-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);

--steam-block-media-mask reference

Masks the media box, its before and after layers included.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-media-mask: linear-gradient(to right, black, transparent);

--steam-block-media-blend-mode reference

Blend mode of the image or video. It blends with the media before layer behind it, not with the section background.

Needs: A --steam-block-media-before-background.

Default

Sample

Sample copy to show the effect.

--steam-block-media-before-background: #ff5400;

Modified

Sample

Sample copy to show the effect.

--steam-block-media-before-background: #ff5400;
--steam-block-media-blend-mode: multiply;

--steam-block-media-opacity reference

Opacity of the image or video.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-media-opacity: .35;

--steam-block-media-filter reference

CSS filter on the image or video.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-media-filter: grayscale(1) contrast(1.2);

--steam-block-media-transform reference

Transform of the media box: rotate, scale, translate.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-media-transform: rotate(-2deg) scale(1.05);

Media, before layer

A layer behind the image or video. It only shows where the media lets it through: transparent areas, a lowered opacity or a blend mode. The demos lower the media opacity to show it.

--steam-block-media-before-background reference

Background of the before layer.

Default

Sample

Sample copy to show the effect.

--steam-block-media-opacity: .5;

Modified

Sample

Sample copy to show the effect.

--steam-block-media-opacity: .5;
--steam-block-media-before-background: #ff5400;

--steam-block-media-before-clip-path reference

Clips the before layer to a shape.

Default

Sample

Sample copy to show the effect.

--steam-block-media-opacity: .5;
--steam-block-media-before-background: #ff5400;

Modified

Sample

Sample copy to show the effect.

--steam-block-media-opacity: .5;
--steam-block-media-before-background: #ff5400;
--steam-block-media-before-clip-path: circle(35% at 30% 50%);

--steam-block-media-before-mask reference

Masks the before layer.

Default

Sample

Sample copy to show the effect.

--steam-block-media-opacity: .5;
--steam-block-media-before-background: #ff5400;

Modified

Sample

Sample copy to show the effect.

--steam-block-media-opacity: .5;
--steam-block-media-before-background: #ff5400;
--steam-block-media-before-mask: linear-gradient(to bottom, black, transparent);

--steam-block-media-before-opacity reference

Opacity of the before layer.

Default

Sample

Sample copy to show the effect.

--steam-block-media-opacity: .5;
--steam-block-media-before-background: #ff5400;

Modified

Sample

Sample copy to show the effect.

--steam-block-media-opacity: .5;
--steam-block-media-before-background: #ff5400;
--steam-block-media-before-opacity: .3;

Media, after layer

A layer on top of the image or video. Clicks pass through it, so video controls keep working.

--steam-block-media-after-background reference

Background of the after layer, often a gradient scrim that keeps text readable.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-media-after-background: linear-gradient(to top, rgba(0,0,0,.75), transparent 60%);

--steam-block-media-after-blend-mode, --steam-block-media-after-opacity reference

Blend mode and opacity of the after layer. With color the photo takes the hue of the layer.

Default

Sample

Sample copy to show the effect.

--steam-block-media-after-background: #ff5400;

Modified

Sample

Sample copy to show the effect.

--steam-block-media-after-background: #ff5400;
--steam-block-media-after-blend-mode: color;
--steam-block-media-after-opacity: .8;

--steam-block-media-after-clip-path reference

Clips the after layer to a shape.

Default

Sample

Sample copy to show the effect.

--steam-block-media-after-background: rgba(255,84,0,.6);

Modified

Sample

Sample copy to show the effect.

--steam-block-media-after-background: rgba(255,84,0,.6);
--steam-block-media-after-clip-path: inset(0 50% 0 0);

--steam-block-media-after-mask reference

Masks the after layer.

Default

Sample

Sample copy to show the effect.

--steam-block-media-after-background: rgba(255,84,0,.6);

Modified

Sample

Sample copy to show the effect.

--steam-block-media-after-background: rgba(255,84,0,.6);
--steam-block-media-after-mask: linear-gradient(to right, black, transparent);

--steam-block-media-after-border-image reference

A border image on the after layer, a frame on top of the media. Include a width after the slash, the layer has no border of its own.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-media-after-border-image: repeating-linear-gradient(45deg, #003049, #003049 10px, #fff 10px, #fff 20px) 20 / 18px round;

Hero

For type="hero": content on top of the media.

--steam-block-hero-media-max-width reference

With media="fluid" the media bleeds to the viewport edges. This caps that width and keeps it centered.

Default

Sample heading

Sample overlay copy.

media="fluid"

Modified

Sample heading

Sample overlay copy.

media="fluid"

--steam-block-hero-media-max-width: 32rem;

--steam-block-media-aspect-ratio reference

Aspect ratio of the media. 16 / 9 by default in a hero.

Default

Sample heading

Sample overlay copy.

No variables set

Modified

Sample heading

Sample overlay copy.

--steam-block-media-aspect-ratio: 1 / 1;

--steam-block-media-align-items, --steam-block-media-justify-content reference

Positions the media inside its area. Only visible with data-size="auto" on the image, otherwise the media fills the whole area.

Default

Sample heading

No variables set

Modified

Sample heading

--steam-block-media-align-items: flex-end;
--steam-block-media-justify-content: flex-start;

--steam-block-hero-content-width reference

Width of the content overlay, above the breakpoint. By default the overlay is as wide as its content. New in v1.1.0.

Default

Sample heading

Sample overlay copy.

--steam-block-media-after-background: linear-gradient(to top, rgba(0,0,0,.7), transparent 60%);
--steam-block-content-background: rgba(0,0,0,.5);

Modified

Sample heading

Sample overlay copy.

--steam-block-media-after-background: linear-gradient(to top, rgba(0,0,0,.7), transparent 60%);
--steam-block-content-background: rgba(0,0,0,.5);
--steam-block-hero-content-width: 60%;

--steam-block-hero-content-max-width reference

Caps the width of the content overlay, above the breakpoint. Longer text wraps at the cap.

Default

Sample heading

Sample overlay copy.

--steam-block-media-after-background: linear-gradient(to top, rgba(0,0,0,.7), transparent 60%);
--steam-block-content-background: rgba(0,0,0,.5);

Modified

Sample heading

Sample overlay copy.

--steam-block-media-after-background: linear-gradient(to top, rgba(0,0,0,.7), transparent 60%);
--steam-block-content-background: rgba(0,0,0,.5);
--steam-block-hero-content-max-width: 10rem;

--steam-block-hero-align-items, --steam-block-content-justify-content reference

Position of the content overlay: -hero-align-items horizontally, -content-justify-content vertically. See the full grid below.

Default

Sample heading

Sample overlay copy.

--steam-block-media-after-background: linear-gradient(to top, rgba(0,0,0,.7), transparent 60%);

Modified

Sample heading

Sample overlay copy.

--steam-block-media-after-background: linear-gradient(to top, rgba(0,0,0,.7), transparent 60%);
--steam-block-hero-align-items: flex-end;
--steam-block-content-justify-content: flex-start;

--steam-block-content-text-align reference

Text alignment inside the content. center by default in a hero. Only visible when the overlay is wider than its text, here with --steam-block-hero-content-width.

Default

Sample heading

Sample overlay copy.

--steam-block-media-after-background: linear-gradient(to top, rgba(0,0,0,.7), transparent 60%);
--steam-block-hero-content-width: 80%;

Modified

Sample heading

Sample overlay copy.

--steam-block-media-after-background: linear-gradient(to top, rgba(0,0,0,.7), transparent 60%);
--steam-block-hero-content-width: 80%;
--steam-block-content-text-align: left;

--steam-block-content-background reference

A translucent card behind the text, as an alternative to a scrim over the whole photo.

Default

Sample heading

Sample overlay copy.

--steam-block-media-after-background: linear-gradient(to top, rgba(0,0,0,.7), transparent 60%);

Modified

Sample heading

Sample overlay copy.

--steam-block-media-after-background: linear-gradient(to top, rgba(0,0,0,.7), transparent 60%);
--steam-block-content-background: rgba(0,3,73,.55);
--steam-block-content-padding: 1rem 1.25rem;
--steam-block-content-border-radius: .5rem;

--steam-block-content-margin reference

Moves the content overlay without moving the media. Negative pulls it up, positive pushes it down.

Default

Sample heading

Sample overlay copy.

--steam-block-media-after-background: linear-gradient(to top, rgba(0,0,0,.7), transparent 60%);

Modified

Sample heading

Sample overlay copy.

--steam-block-media-after-background: linear-gradient(to top, rgba(0,0,0,.7), transparent 60%);
--steam-block-content-margin: -3rem 0 0;

--steam-block-hero-align-items, --steam-block-content-justify-content reference

All nine positions of the content overlay. Each label reads -hero-align-items / -content-justify-content. The center cell is the default.

flex-start / flex-start

center / flex-start

flex-end / flex-start

flex-start / center

center / center (default)

flex-end / center

flex-start / flex-end

center / flex-end

flex-end / flex-end

Split

For type="split", the default template: content and media side by side.

--steam-block-gap reference

Space between the two columns, above the breakpoint. Stacked columns sit flush.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-gap: 3rem;

--steam-block-content-width, --steam-block-content-min-width reference

Width of the content column, any grid track size. The min width keeps it from shrinking below a value.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-content-width: 2.5fr;

--steam-block-media-width, --steam-block-media-min-width reference

Width of the media column, any grid track size. The min width keeps it from shrinking below a value.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-media-width: 2.5fr;

--steam-block-media-aspect-ratio reference

Aspect ratio of the media. No ratio by default in a split. The ratio holds as long as the content column is shorter than the media.

Default

Short.

No variables set

Modified

Short.

--steam-block-media-aspect-ratio: 21 / 9;

--steam-block-media-align-items, --steam-block-media-justify-content reference

Positions the media inside its column. Only visible with data-size="auto" on the image, otherwise the media fills the whole column.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-media-align-items: flex-end;
--steam-block-media-justify-content: flex-start;

--steam-block-content-justify-content reference

Vertical position of the content in its column. center by default.

Default

Short.

No variables set

Modified

Short.

--steam-block-content-justify-content: flex-start;

--steam-block-content-text-align reference

Text alignment inside the content. left by default in a split.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

--steam-block-content-text-align: right;

Attributes

The HTML attributes that change the layout. They are no CSS variables, see Attributes for the full list.

order="flip" reference

Swaps the columns of a split: media on the left, content on the right. Below the breakpoint the media stays on top either way.

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

order="flip"

overlay="true" reference

Keeps the content on top of the media below the breakpoint, where a hero otherwise puts it under the media. Both cards force the narrow layout with --steam-block-min-width-breakpoint: 9999px.

Default

Sample heading

Sample overlay copy.

--steam-block-min-width-breakpoint: 9999px;

Modified

Sample heading

Sample overlay copy.

overlay="true"

--steam-block-min-width-breakpoint: 9999px;

media="fluid" reference

Lets the media bleed past the card to the edges of the viewport. In a split only the media column bleeds, the content stays in place.

type="split"

Default

Sample

Sample copy to show the effect.

No variables set

Modified

Sample

Sample copy to show the effect.

media="fluid"

type="hero"

Default

Sample heading

Sample overlay copy.

No variables set

Modified

Sample heading

Sample overlay copy.

media="fluid"

overlay="true" with media="fluid" reference

Below the breakpoint an overlay hero keeps its aspect ratio, so copy taller than the media gets cut off. Add media="fluid" and the media grows with the content instead. Both cards force the narrow layout and a wide 6 / 1 ratio, so the copy does not fit.

Default

Sample heading

Sample overlay copy that runs a little longer than usual.

A second paragraph, so the copy is taller than the media.

overlay="true"

--steam-block-min-width-breakpoint: 9999px;
--steam-block-media-aspect-ratio: 6 / 1;

Modified

Sample heading

Sample overlay copy that runs a little longer than usual.

A second paragraph, so the copy is taller than the media.

media="fluid" overlay="true"

--steam-block-min-width-breakpoint: 9999px;
--steam-block-media-aspect-ratio: 6 / 1;

Combinations

Layers, blend modes, masks and clip paths often do nothing on their own and only show once something else is set. Each row starts from one variable and every next card adds a piece, so you can see where the effect appears.

Duotone: before layer and media blend mode

Brand colored photos without editing the image files.

Needs: The before layer sits under an opaque photo, so it only shows through --steam-block-media-blend-mode or --steam-block-media-opacity below 1.

Before color alone

Sample heading

Sample copy to show the effect.

--steam-block-media-before-background: #ff5400;

+ media blend multiply

Sample heading

Sample copy to show the effect.

--steam-block-media-before-background: #ff5400;
--steam-block-media-blend-mode: multiply;

+ grayscale filter

Sample heading

Sample copy to show the effect.

--steam-block-media-before-background: #ff5400;
--steam-block-media-blend-mode: multiply;
--steam-block-media-filter: grayscale(1) contrast(1.2);

Dark color, screen

Sample heading

Sample copy to show the effect.

--steam-block-media-before-background: #003049;
--steam-block-media-blend-mode: screen;
--steam-block-media-filter: grayscale(1) contrast(1.2);

Tint: four ways to color a photo

The same goal with different variables. Pick the one that fits the rest of your design.

After layer, rgba

Sample heading

Sample copy to show the effect.

--steam-block-media-after-background: rgba(255,84,0,.45);

After layer, blend color

Sample heading

Sample copy to show the effect.

--steam-block-media-after-background: #ff5400;
--steam-block-media-after-blend-mode: color;

After layer, multiply and opacity

Sample heading

Sample copy to show the effect.

--steam-block-media-after-background: #ff5400;
--steam-block-media-after-blend-mode: multiply;
--steam-block-media-after-opacity: .8;

Before layer and media opacity

Sample heading

Sample copy to show the effect.

--steam-block-media-before-background: #ff5400;
--steam-block-media-opacity: .55;

Partial tint: before layer shape and blend

A brand shape running through a photo.

Needs: A clip path or mask on the before layer is invisible under an opaque photo. It needs a media blend mode or opacity, same as the duotone.

Before clip path alone

Sample heading

Sample copy to show the effect.

--steam-block-media-before-background: #ff5400;
--steam-block-media-before-clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);

+ media blend multiply

Sample heading

Sample copy to show the effect.

--steam-block-media-before-background: #ff5400;
--steam-block-media-before-clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);
--steam-block-media-blend-mode: multiply;

Mask instead of clip path

Sample heading

Sample copy to show the effect.

--steam-block-media-before-background: #ff5400;
--steam-block-media-before-mask: linear-gradient(100deg, black 45%, transparent 55%);
--steam-block-media-blend-mode: multiply;

+ grayscale, hard light

Sample heading

Sample copy to show the effect.

--steam-block-media-before-background: #ff5400;
--steam-block-media-before-mask: linear-gradient(100deg, black 45%, transparent 55%);
--steam-block-media-blend-mode: hard-light;
--steam-block-media-filter: grayscale(1);

Backdrop behind transparent media

Product shots or logos on a colored shape.

Needs: Media with transparent areas: PNG, SVG, product cutouts. Here the before layer shows without any blend mode.

Before color

Sample heading

Sample copy to show the effect.

--steam-block-media-before-background: #fde68a;

+ clip path circle

Sample heading

Sample copy to show the effect.

--steam-block-media-before-background: #fde68a;
--steam-block-media-before-clip-path: circle(38%);

Mask, soft glow

Sample heading

Sample copy to show the effect.

--steam-block-media-before-background: #ff5400;
--steam-block-media-before-mask: radial-gradient(closest-side, black 40%, transparent);

Media shape: clip path and mask take the layers along

The before and after layers live inside the media box, so a media clip path or mask shapes them too.

Clip path circle

Sample heading

Sample copy to show the effect.

--steam-block-media-clip-path: circle(45%);

+ after gradient

Sample heading

Sample copy to show the effect.

--steam-block-media-clip-path: circle(45%);
--steam-block-media-after-background: linear-gradient(to top, rgba(255,84,0,.8), transparent);

Mask vignette

Sample heading

Sample copy to show the effect.

--steam-block-media-mask: radial-gradient(closest-side, black 60%, transparent);

+ section background

Sample heading

Sample copy to show the effect.

--steam-block-media-mask: radial-gradient(closest-side, black 60%, transparent);
--steam-block-background: #003049;
--p-color: #fff;
--p-h4-color: #fff;

After layer border image needs a width

Needs: The after layer has no border, so the border image only shows when the value includes a width after the slash.

No width

Sample heading

Sample copy to show the effect.

--steam-block-media-after-border-image: linear-gradient(45deg, #ff5400, #fde68a) 1;

With / 12px

Sample heading

Sample copy to show the effect.

--steam-block-media-after-border-image: linear-gradient(45deg, #ff5400, #fde68a) 1 / 12px;

+ scrim gradient

Sample heading

Sample copy to show the effect.

--steam-block-media-after-border-image: linear-gradient(45deg, #ff5400, #fde68a) 1 / 12px;
--steam-block-media-after-background: linear-gradient(to top, rgba(0,0,0,.7), transparent 60%);

Content blend mode

Display type that reacts to the photo behind it.

Needs: Something behind the text: the hero photo, a content background or the content before layer. A content transform, clip path or mask limits the blending to the content box itself.

Difference

Blend

--steam-block-content-blend-mode: difference;

Overlay

Blend

--steam-block-content-blend-mode: overlay;

Difference and content background

Blend

--steam-block-content-blend-mode: difference;
--steam-block-content-background: rgba(255,84,0,.6);

Difference and transform: photo cut off

Blend

--steam-block-content-blend-mode: difference;
--steam-block-content-transform: rotate(-3deg);

Content before layer: tinted glass

A readable panel that still lets the photo through.

Needs: On its own the before layer looks like --steam-block-content-background. It adds something with a blend mode or mask.

Content background

Sample heading

Sample copy to show the effect.

--steam-block-content-background: rgba(255,84,0,.7);

Before layer, same color

Sample heading

Sample copy to show the effect.

--steam-block-content-before-background: rgba(255,84,0,.7);

+ blend multiply

Sample heading

Sample copy to show the effect.

--steam-block-content-before-background: #ff5400;
--steam-block-content-before-blend-mode: multiply;

Gray and saturation

Sample heading

Sample copy to show the effect.

--steam-block-content-before-background: #808080;
--steam-block-content-before-blend-mode: saturation;

+ mask fade

Sample heading

Sample copy to show the effect.

--steam-block-content-before-background: #808080;
--steam-block-content-before-blend-mode: saturation;
--steam-block-content-before-mask: linear-gradient(to right, black 50%, transparent);

Content after layer: gradient text

Gradient headings. Without the black background the gradient tints the photo as well.

Needs: A black content background under white text, so multiply turns only the text into the gradient.

After gradient alone

Blend

--steam-block-content-background: #000;
--steam-block-content-after-background: linear-gradient(90deg, #ff5400, #fde68a);

+ blend multiply

Blend

--steam-block-content-background: #000;
--steam-block-content-after-background: linear-gradient(90deg, #ff5400, #fde68a);
--steam-block-content-after-blend-mode: multiply;

Without content background

Blend

--steam-block-content-after-background: linear-gradient(90deg, #ff5400, #fde68a);
--steam-block-content-after-blend-mode: multiply;

+ after clip path

Blend

--steam-block-content-background: #000;
--steam-block-content-after-background: linear-gradient(90deg, #ff5400, #fde68a);
--steam-block-content-after-blend-mode: multiply;
--steam-block-content-after-clip-path: inset(0 0 50% 0);

Content shape: clip path and mask

Needs: A content background. Without one there is no visible box to cut.

Clip path alone

Sample heading

Sample copy to show the effect.

--steam-block-content-clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);

+ content background

Sample heading

Sample copy to show the effect.

--steam-block-content-clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
--steam-block-content-background: #003049;
--steam-block-content-padding: 1.5rem 3rem 1.5rem 1.5rem;

Mask fade

Sample heading

Sample copy to show the effect.

--steam-block-content-background: #003049;
--steam-block-content-padding: 1.5rem;
--steam-block-content-mask: linear-gradient(black 50%, transparent);