Images with overlay text

Three layers: the photograph, a bottom-up gradient to black, and the content block at Padding/Medium (16 px).

The gradient is attached to the content block rather than being a fixed slice of the frame. That matters: when the card narrows and the headline wraps to more lines, the scrim grows with it. A fixed-height scrim leaves the extra lines sitting on bare photograph.

Content

• Headline — Title 3 in-container, 26/30 ExtraBold, in Foreground/On brand
• Action — the standard secondary button, optional

Text is left-aligned and bottom-aligned, which is the opposite of the category tile. The two components sit on the same page types and do not agree.

Four variants from two properties, and this time the naming holds. Size sets the height; Grid sets how many fit across the container.

Because only the width changes with Grid, the 3-up variants are portrait while the 2-up variants are landscape — same height, narrower frame.

A bottom-up gradient to solid black, sized to the content it sits behind. It is part of the component, not the photograph.

This is what makes the component robust: the headline stays legible whether the underlying image is a dark workshop or a bright outdoor shot.

Compare with the category tile

The category tile has no scrim, and depends on every photograph being dark in the lower band. The system therefore contains both the problem and its solution, on two components used on the same kinds of page.

Two or three across the container at Large and Medium, with an 8 px gap. At Small the images go full width and the row becomes a horizontal rail.

The page also holds a four-up rail with a pair of 40×40 chevrons at its lower-right — larger than the 30×30 chevrons on the PDP slider.

The page’s wrapper carousels use a second overlay variant: same photograph-and-scrim construction, but the content is a headline and a descriptive paragraph, with no action.

The frame is 435×462 — slightly portrait — and four sit across a 1320 px container with the paging chevrons placed beneath, right-aligned.

Type

• Headline — Web/Title/Title 3, 24/32 Bold 700
• Body — Web/Body/Body 2, 14/20 Regular
• Both in Generic/Foreground/On brand (#ffffff)

Padding is Padding/X-Large (24 px).

A separate carousel component: a 435×245 photograph with a dark band across the foot carrying a 48×48 icon and a Title 4 label.

Sixteen cards ship — Concrete, Machine, Wood Carving, Painting, Gardening, Masonry, Blacksmith, Glazing, Industrial, Tool Set, Machinist, Electrical, DIY, Wood Working, Jewelry and Automotive tools.

Each carries a distinct line icon drawn for that trade.