<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Standard Tile

An image paired with descriptive text. Often used to present products.
styleKeys: standardTile

Use Standard Tile...

  • To pair an image with a title, and optional descriptive text and attributes.
  • To promote products.

Don't use Standard Tile...

  • To serve as a Radio or Checkbox. Use Selection Set instead.
  • If your container requires flexible styling choices, such as a background color or a border. Use Card instead.

Every Standard Tile includes:

  • StandardTileImage sub-component: use either a Fluid Image or a Responsive Image unless specified otherwise.
  • StandardTileContents sub-component that contains the tile's name, and may contain some other optional sub-components such as a description, pricing, promo code, or a callout.

Skins

Standard

Use skin="standard", or no skin prop at all to display the default Standard Tile.

The preview has been updated.

Product

Use skin="product" to navigate to a product/category page.

The preview has been updated.

Full-bleed

Use imageWidth="full-bleed" in tiles with skin="product" to extend the image to the edges of the tile.

The preview has been updated.

Circular

  • Use skin="circular" to render the tile image as a disc. Refer to guidelines.
  • Use Fluid Image for the tile's image.

The preview has been updated.

Overlay

Use StandardTileOverlay to:

  • Position a Callout and a Favorite checkbox on top of the tile's contents.
  • In general, display distributed multiple items in a row, across the top of the tile.

The preview has been updated.

Contents

Color Swatches

Use StandardTileSwatches to present color options. Refer to Color Swatches for more guidelines.

The preview has been updated.

Price

Use StandardTilePrice to display product prices. Ensure that the content follows the Pricing component.

The preview has been updated.

Promo Code

Use StandardTilePromoCodeLabel to add a Promo Code  to a tile.

The preview has been updated.

The preview has been updated.

Use StandardTileFooter to bottom align the tile’s footer.

The preview has been updated.

Horizontal

Use layout="horizontal" to position the image on the left and the text contents on the right.

The preview has been updated.

Use a Link with covering to make the entire Tile behave as a Link. Refer to covering guidelines.

The preview has been updated.