Inline Promo Tile

An in-grid ad placement dropped into a collection page, always laid out inline with Product Card — span controls how many product-card columns it occupies. The live site uses an art-directed lifestyle photo here; we use a placeholder background instead of embedding that image, same approach as Stay In Touch's illustration.

Composed ofButton

Configurator

Reduce Redness

Gently clear and soothe blemish-prone skin.

Shop Now

Bestseller Hyaluronic Acid 2% + B5 (with Ceramides)

Hyaluronic Acid 2% + B5 (with Ceramides)

4.4(1,881)

Plumps, Smooths

$9.90 USD

SpanHeadlineDescriptionCTA label

Usage

<InlinePromoTile
  span={2}
  headline="Reduce Redness"
  description="Gently clear and soothe blemish-prone skin."
  ctaLabel="Shop Now"
  ctaHref="/collections/blemish-prone-skin"
/>

Props

Prop	Type	Default	Description
image	string	—	Optional photo; falls back to a camera-icon placeholder on a mint background when omitted.
headline	string	—	Bold heading below the image.
description	string	—	One line of supporting copy below the headline.
ctaLabel	string	—	Pill-button link text.
ctaHref	string	"#"	Where the CTA links to — typically a collection or landing page.
span	1 \| 2 \| 3	1	How many product-card columns to occupy. The image always fills the resulting width and stretches to the height of the grid row (matching the neighboring Product Cards); the copy stays pinned below it.

Do's and Don'ts

·Set span to match the number of Product Card columns you want it to replace in that row — the component handles the col-span and image sizing for you.
·Place it inside a CSS grid — the image relies on the grid's default row-stretch behavior to fill to the row's height.
·Point ctaHref at a real collection or landing page — this tile is meant to route traffic, not just decorate the grid.

Don't

·Don't place two Inline Promo Tiles adjacent to each other in the same grid — it's meant to be a single interruption in a run of products.
·Don't write more than one short sentence for description; the tile has no room for a second line before the CTA.