<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.

Use skin="unstyled" on the Link to remove the normal link styling.

The preview has been updated.

Use StandardTileSeparatelyClickableContents wrapped around a separate Link to add an additional Link to the Tile content.

The preview has been updated.

Accessibility

  • If a sequence of tiles is semantically a list, as is usually the case (e.g., a list of products), then the layout grid elements around the tiles should use ul and li tags, so that the tiles are grouped semantically into a list. In the Vanilla API, use <ul class="swan-row"> and <li class="swan-col-N"> for the grid elements around the tiles.
  • Tile images have a specific requirement for alt attributes:
    • Use an empty alt attribute for images when nearby HTML text already describes the image, to prevent screen readers from repeating the same content twice.
    • When SEO is a priority, use role="presentation" and aria-hidden="true" for tile images within the same hyperlink as the tile name. This hides the image from assistive technologies but not from screens or search engines.

Skins

  • Use skin="circular" to navigate to a curated category page or pre-filtered gallery. Do not use it to drive traffic to a PDP or standard Category page.

Layout

  • Standard Tile is most often used inside of aย Gridย element, since it is responsive and will expand its width to fill all available space.
  • Mandatory elements: Every Standard Tile must include an image and a tile name.
  • Optional elements: Additional elements, such as a description, promo code, etc., can be added as needed.
  • Color Swatches:
    • Ensure the tile is at least 3 columns wide on the layout grid.
    • Use a limited set of other optional tile elements.
  • Footer:
    • Use a <StandardTileFooter> when you want the last line of content to align horizontally within a grid.
    • For instance, if a grid of tiles has a CTA link, you may want to use the footer to allow for all CTA links to align to the bottom.
  • CTAs: Use the entire tile as a Link if there is a single CTA.
  • Spacing: If you need to put vertical spacing between rows of tiles, don't modify the Standard Tile's margin, as this may cause visual errors. Instead, place the tile inside a Box component, and add the margin to that wrapper Box.

Images

Standard Tiles do not enforce an aspect ratio on the image. The full image will always be displayed, in its natural aspect ratio.

Content

  • Horizontal tiles should use minimal text.
  • The text area (to the right of the image) should not be taller than the image.

Props

StandardTile
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
skin"standard" | "product" | "circular" | nullfalse
Visual style of the StandardTile. Available options: "standard", "product", "circular"
standard
layout"horizontal" | "vertical" | nullfalse
Specifies whether the tile is vertically or horizontally oriented Available options: "vertical", "horizontal"
vertical
imageWidth"standard" | "full-bleed" | nullfalse
Width setting for the image on the tile Available options: "standard", "full-bleed"
standard
StandardTileSeparatelyClickableContents
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
StandardTilePromoCode
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
StandardTilePromoCodeLabel
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
StandardTilePrice
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
StandardTileOverlay
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
StandardTileName
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
StandardTileImage
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
StandardTileFooter
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
StandardTileDescription
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
StandardTileContents
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
StandardTileSwatches
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.

Related