Standard Tile

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

styleKeys: standardTile

UsageGuidelinesAPI

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.

ReactVanilla

<StandardTile
  layout="vertical"
  imageWidth="standard"
  render={props => (
    <a href="#" style={{ width: 300 }} className={props.className}>
      {props.children}
    </a>
  )}
>
  <StandardTileImage>
    <BasicResponsiveImage
      aspectRatio={1}
      src="https://via.placeholder.com/1600x1600/?text=a square image"
    />
  </StandardTileImage>
  <StandardTileContents>
    <StandardTileName>Name</StandardTileName>
  </StandardTileContents>
</StandardTile>

<StandardTile
  layout="vertical"
  imageWidth="standard"
  render={props => (
    <a href="#" style={{ width: 300 }} className={props.className}>
      {props.children}
    </a>
  )}
>
  <StandardTileImage>
    <BasicResponsiveImage
      aspectRatio={1}
      src="https://via.placeholder.com/1600x1600/?text=a square image"
    />
  </StandardTileImage>
  <StandardTileContents>
    <StandardTileName>Name</StandardTileName>
  </StandardTileContents>
</StandardTile>

<a href="#" class="swan-standard-tile" style="width: 300px">
  <div class="swan-standard-tile-image">
    <div
      class="swan-responsive-image-wrapper swan-aspect-ratio-container"
      style="padding-bottom: 100%"
    >
      <div class="swan-aspect-ratio-content">
        <img
          src="https://via.placeholder.com/1600x1600/?text=a square image"
          class="swan-responsive-image"
        />
      </div>
    </div>
  </div>
  <div class="swan-standard-tile-contents">
    <div class="swan-standard-tile-name">Name</div>
  </div>
</a>

<a href="#" class="swan-standard-tile" style="width: 300px">
  <div class="swan-standard-tile-image">
    <div
      class="swan-responsive-image-wrapper swan-aspect-ratio-container"
      style="padding-bottom: 100%"
    >
      <div class="swan-aspect-ratio-content">
        <img
          src="https://via.placeholder.com/1600x1600/?text=a square image"
          class="swan-responsive-image"
        />
      </div>
    </div>
  </div>
  <div class="swan-standard-tile-contents">
    <div class="swan-standard-tile-name">Name</div>
  </div>
</a>

Product

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

Use a Fluid Image for tiles with skin="product", as these tiles already have a specified height for the image.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={4}>
      <StandardTile
        skin="product"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/400" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile
        skin="product"
        as="a"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/600?q=1" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile
        skin="product"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/600/400?q=3" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile
        skin="product"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/400?q=4" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTilePrice>
            <Pricing>
              <PricingOffer>100 Starting at</PricingOffer>{' '}
              <PricingComparison>
                <ListPrice>€10.99</ListPrice>{' '}
                <DiscountPrice>€8.99</DiscountPrice>
              </PricingComparison>{' '}
              <ShortTaxMessage>Inc. VAT</ShortTaxMessage>
            </Pricing>
          </StandardTilePrice>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile
        skin="product"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileOverlay>
          <Callout>Callout</Callout>
        </StandardTileOverlay>
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/400?q=5" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
        </StandardTileContents>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={4}>
      <StandardTile
        skin="product"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/400" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile
        skin="product"
        as="a"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/600?q=1" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile
        skin="product"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/600/400?q=3" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile
        skin="product"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/400?q=4" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTilePrice>
            <Pricing>
              <PricingOffer>100 Starting at</PricingOffer>{' '}
              <PricingComparison>
                <ListPrice>€10.99</ListPrice>{' '}
                <DiscountPrice>€8.99</DiscountPrice>
              </PricingComparison>{' '}
              <ShortTaxMessage>Inc. VAT</ShortTaxMessage>
            </Pricing>
          </StandardTilePrice>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile
        skin="product"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileOverlay>
          <Callout>Callout</Callout>
        </StandardTileOverlay>
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/400?q=5" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
        </StandardTileContents>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <a href="#" class="swan-standard-tile swan-standard-tile-skin-product"
        ><div class="swan-standard-tile-image">
          <img src="https://picsum.photos/400/400" class="swan-fluid-image" />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div></a
      >
    </div>
    <div class="swan-col-4">
      <a href="#" class="swan-standard-tile swan-standard-tile-skin-product"
        ><div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/400/600?q=1"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div></a
      >
    </div>
    <div class="swan-col-4">
      <a href="#" class="swan-standard-tile swan-standard-tile-skin-product"
        ><div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/600/400?q=3"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div></a
      >
    </div>
    <div class="swan-col-4">
      <a href="#" class="swan-standard-tile swan-standard-tile-skin-product"
        ><div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/400/400?q=4"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-price">
            <span class="swan-pricing"
              ><span class="swan-pricing-offer">100 Starting at</span>
              <span class="swan-pricing-comparison"
                ><span class="swan-list-price">€10.99</span>
                <span class="swan-discount-price">€8.99</span></span
              >
              <span class="swan-short-tax-message">Inc. VAT</span></span
            >
          </div>
        </div></a
      >
    </div>
    <div class="swan-col-4">
      <a href="#" class="swan-standard-tile swan-standard-tile-skin-product"
        ><div class="swan-standard-tile-overlay">
          <span class="swan-callout">Callout</span>
        </div>
        <div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/400/400?q=5"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
        </div></a
      >
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <a href="#" class="swan-standard-tile swan-standard-tile-skin-product"
        ><div class="swan-standard-tile-image">
          <img src="https://picsum.photos/400/400" class="swan-fluid-image" />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div></a
      >
    </div>
    <div class="swan-col-4">
      <a href="#" class="swan-standard-tile swan-standard-tile-skin-product"
        ><div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/400/600?q=1"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div></a
      >
    </div>
    <div class="swan-col-4">
      <a href="#" class="swan-standard-tile swan-standard-tile-skin-product"
        ><div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/600/400?q=3"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div></a
      >
    </div>
    <div class="swan-col-4">
      <a href="#" class="swan-standard-tile swan-standard-tile-skin-product"
        ><div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/400/400?q=4"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-price">
            <span class="swan-pricing"
              ><span class="swan-pricing-offer">100 Starting at</span>
              <span class="swan-pricing-comparison"
                ><span class="swan-list-price">€10.99</span>
                <span class="swan-discount-price">€8.99</span></span
              >
              <span class="swan-short-tax-message">Inc. VAT</span></span
            >
          </div>
        </div></a
      >
    </div>
    <div class="swan-col-4">
      <a href="#" class="swan-standard-tile swan-standard-tile-skin-product"
        ><div class="swan-standard-tile-overlay">
          <span class="swan-callout">Callout</span>
        </div>
        <div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/400/400?q=5"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
        </div></a
      >
    </div>
  </div>
</div>

Full-bleed

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

ReactVanilla

<GridContainer>
  <Row>
    <Column span={4}>
      <StandardTile
        skin="product"
        imageWidth="full-bleed"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/1600/1300?text=16:13 image" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile
        skin="product"
        imageWidth="full-bleed"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/400?q=1" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile
        skin="product"
        imageWidth="full-bleed"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/1600/1300?text=16:13 image" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile
        skin="product"
        imageWidth="full-bleed"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/400?q=4" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile
        skin="product"
        imageWidth="full-bleed"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/600?q=5" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTilePrice>
            <Pricing>
              <PricingOffer>100 Starting at</PricingOffer>{' '}
              <PricingComparison>
                <ListPrice>€10.99</ListPrice>{' '}
                <DiscountPrice>€8.99</DiscountPrice>
              </PricingComparison>{' '}
              <ShortTaxMessage>Inc. VAT</ShortTaxMessage>
            </Pricing>
          </StandardTilePrice>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile
        skin="product"
        imageWidth="full-bleed"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileOverlay>
          <Callout>Callout</Callout>
        </StandardTileOverlay>
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/600/400?q=1" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
        </StandardTileContents>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={4}>
      <StandardTile
        skin="product"
        imageWidth="full-bleed"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/1600/1300?text=16:13 image" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile
        skin="product"
        imageWidth="full-bleed"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/400?q=1" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile
        skin="product"
        imageWidth="full-bleed"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/1600/1300?text=16:13 image" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile
        skin="product"
        imageWidth="full-bleed"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/400?q=4" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile
        skin="product"
        imageWidth="full-bleed"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/600?q=5" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTilePrice>
            <Pricing>
              <PricingOffer>100 Starting at</PricingOffer>{' '}
              <PricingComparison>
                <ListPrice>€10.99</ListPrice>{' '}
                <DiscountPrice>€8.99</DiscountPrice>
              </PricingComparison>{' '}
              <ShortTaxMessage>Inc. VAT</ShortTaxMessage>
            </Pricing>
          </StandardTilePrice>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile
        skin="product"
        imageWidth="full-bleed"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileOverlay>
          <Callout>Callout</Callout>
        </StandardTileOverlay>
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/600/400?q=1" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
        </StandardTileContents>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <a
        href="#"
        class="swan-standard-tile swan-standard-tile-skin-product swan-standard-tile-full-bleed"
        ><div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/1600/1300?text=16:13 image"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div></a
      >
    </div>
    <div class="swan-col-4">
      <a
        href="#"
        class="swan-standard-tile swan-standard-tile-skin-product swan-standard-tile-full-bleed"
        ><div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/400/400?q=1"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div></a
      >
    </div>
    <div class="swan-col-4">
      <a
        href="#"
        class="swan-standard-tile swan-standard-tile-skin-product swan-standard-tile-full-bleed"
        ><div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/1600/1300?text=16:13 image"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div></a
      >
    </div>
    <div class="swan-col-4">
      <a
        href="#"
        class="swan-standard-tile swan-standard-tile-skin-product swan-standard-tile-full-bleed"
        ><div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/400/400?q=4"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div></a
      >
    </div>
    <div class="swan-col-4">
      <a
        href="#"
        class="swan-standard-tile swan-standard-tile-skin-product swan-standard-tile-full-bleed"
        ><div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/400/600?q=5"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-price">
            <span class="swan-pricing"
              ><span class="swan-pricing-offer">100 Starting at</span>
              <span class="swan-pricing-comparison"
                ><span class="swan-list-price">€10.99</span>
                <span class="swan-discount-price">€8.99</span></span
              >
              <span class="swan-short-tax-message">Inc. VAT</span></span
            >
          </div>
        </div></a
      >
    </div>
    <div class="swan-col-4">
      <a
        href="#"
        class="swan-standard-tile swan-standard-tile-skin-product swan-standard-tile-full-bleed"
        ><div class="swan-standard-tile-overlay">
          <span class="swan-callout">Callout</span>
        </div>
        <div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/600/400?q=1"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
        </div></a
      >
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <a
        href="#"
        class="swan-standard-tile swan-standard-tile-skin-product swan-standard-tile-full-bleed"
        ><div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/1600/1300?text=16:13 image"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div></a
      >
    </div>
    <div class="swan-col-4">
      <a
        href="#"
        class="swan-standard-tile swan-standard-tile-skin-product swan-standard-tile-full-bleed"
        ><div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/400/400?q=1"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div></a
      >
    </div>
    <div class="swan-col-4">
      <a
        href="#"
        class="swan-standard-tile swan-standard-tile-skin-product swan-standard-tile-full-bleed"
        ><div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/1600/1300?text=16:13 image"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div></a
      >
    </div>
    <div class="swan-col-4">
      <a
        href="#"
        class="swan-standard-tile swan-standard-tile-skin-product swan-standard-tile-full-bleed"
        ><div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/400/400?q=4"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div></a
      >
    </div>
    <div class="swan-col-4">
      <a
        href="#"
        class="swan-standard-tile swan-standard-tile-skin-product swan-standard-tile-full-bleed"
        ><div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/400/600?q=5"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-price">
            <span class="swan-pricing"
              ><span class="swan-pricing-offer">100 Starting at</span>
              <span class="swan-pricing-comparison"
                ><span class="swan-list-price">€10.99</span>
                <span class="swan-discount-price">€8.99</span></span
              >
              <span class="swan-short-tax-message">Inc. VAT</span></span
            >
          </div>
        </div></a
      >
    </div>
    <div class="swan-col-4">
      <a
        href="#"
        class="swan-standard-tile swan-standard-tile-skin-product swan-standard-tile-full-bleed"
        ><div class="swan-standard-tile-overlay">
          <span class="swan-callout">Callout</span>
        </div>
        <div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/600/400?q=1"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
        </div></a
      >
    </div>
  </div>
</div>

Circular

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

ReactVanilla

<GridContainer>
  <Row>
    <Column span={4}>
      <StandardTile
        skin="circular"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/400" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
        </StandardTileContents>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={4}>
      <StandardTile
        skin="circular"
        render={props => <a className={props.className}>{props.children}</a>}
      >
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/400" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
        </StandardTileContents>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <a href="#" class="swan-standard-tile swan-standard-tile-skin-circular"
        ><div class="swan-standard-tile-image">
          <img src="https://picsum.photos/400/400" class="swan-fluid-image" />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
        </div></a
      >
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <a href="#" class="swan-standard-tile swan-standard-tile-skin-circular"
        ><div class="swan-standard-tile-image">
          <img src="https://picsum.photos/400/400" class="swan-fluid-image" />
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
        </div></a
      >
    </div>
  </div>
</div>

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.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={4}>
      <StandardTile>
        <StandardTileOverlay>
          <Callout>Callout</Callout>
          <Checkbox skin="favorite" aria-label="Add to favorites" />
        </StandardTileOverlay>
        <StandardTileImage>
          <BasicResponsiveImage
            aspectRatio={1}
            src="https://picsum.photos/400/400"
          />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile>
        <StandardTileOverlay>
          <Callout>Callout</Callout>
          <Typography>
            <Icon iconType="check" />
            <Span>Design templates</Span>
          </Typography>
        </StandardTileOverlay>
        <StandardTileImage>
          <BasicResponsiveImage
            aspectRatio={1}
            alt="placeholder image"
            src="https://via.placeholder.com/400x400/c0e6df/000000?text=image"
          />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={4}>
      <StandardTile>
        <StandardTileOverlay>
          <Callout>Callout</Callout>
          <Checkbox skin="favorite" aria-label="Add to favorites" />
        </StandardTileOverlay>
        <StandardTileImage>
          <BasicResponsiveImage
            aspectRatio={1}
            src="https://picsum.photos/400/400"
          />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile>
        <StandardTileOverlay>
          <Callout>Callout</Callout>
          <Typography>
            <Icon iconType="check" />
            <Span>Design templates</Span>
          </Typography>
        </StandardTileOverlay>
        <StandardTileImage>
          <BasicResponsiveImage
            aspectRatio={1}
            alt="placeholder image"
            src="https://via.placeholder.com/400x400/c0e6df/000000?text=image"
          />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <div class="swan-standard-tile">
        <div class="swan-standard-tile-overlay">
          <span class="swan-callout">Callout</span>
          <span
            ><input
              type="checkbox"
              class="swan-checkbox swan-checkbox-skin-favorite"
              aria-label="Add to favorites"
          /></span>
        </div>
        <div class="swan-standard-tile-image">
          <div
            class="swan-responsive-image-wrapper swan-aspect-ratio-container"
            style="padding-bottom: 100%"
          >
            <div class="swan-aspect-ratio-content">
              <img
                src="https://picsum.photos/400/400"
                class="swan-responsive-image"
              />
            </div>
          </div>
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div>
      </div>
    </div>
    <div class="swan-col-4">
      <div class="swan-standard-tile">
        <div class="swan-standard-tile-overlay">
          <span class="swan-callout">Callout</span>
          <div>
            <img
              src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
              alt=""
              class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-check"
              style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3.0.0-beta.1-hashed/icons/check.433ef8b9d9cf3d5e5f668f4178e2e4ad.svg");'
            /><span>Design templates</span>
          </div>
        </div>
        <div class="swan-standard-tile-image">
          <span
            class="swan-responsive-image-wrapper swan-aspect-ratio-container"
            style="padding-bottom: 100%;"
            ><span class="swan-aspect-ratio-content"
              ><img
                alt="placeholder image"
                src="https://via.placeholder.com/400x400/c0e6df/000000?text=image"
                class="swan-responsive-image" /></span
          ></span>
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <div class="swan-standard-tile">
        <div class="swan-standard-tile-overlay">
          <span class="swan-callout">Callout</span>
          <span
            ><input
              type="checkbox"
              class="swan-checkbox swan-checkbox-skin-favorite"
              aria-label="Add to favorites"
          /></span>
        </div>
        <div class="swan-standard-tile-image">
          <div
            class="swan-responsive-image-wrapper swan-aspect-ratio-container"
            style="padding-bottom: 100%"
          >
            <div class="swan-aspect-ratio-content">
              <img
                src="https://picsum.photos/400/400"
                class="swan-responsive-image"
              />
            </div>
          </div>
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div>
      </div>
    </div>
    <div class="swan-col-4">
      <div class="swan-standard-tile">
        <div class="swan-standard-tile-overlay">
          <span class="swan-callout">Callout</span>
          <div>
            <img
              src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
              alt=""
              class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-check"
              style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3.0.0-beta.1-hashed/icons/check.433ef8b9d9cf3d5e5f668f4178e2e4ad.svg");'
            /><span>Design templates</span>
          </div>
        </div>
        <div class="swan-standard-tile-image">
          <span
            class="swan-responsive-image-wrapper swan-aspect-ratio-container"
            style="padding-bottom: 100%;"
            ><span class="swan-aspect-ratio-content"
              ><img
                alt="placeholder image"
                src="https://via.placeholder.com/400x400/c0e6df/000000?text=image"
                class="swan-responsive-image" /></span
          ></span>
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div>
      </div>
    </div>
  </div>
</div>

Color Swatches

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

ReactVanilla

<StandardTile style={{ width: 300 }}>
  <StandardTileImage>
    <BasicResponsiveImage
      alt="image-alt"
      aspectRatio={1}
      src="https://picsum.photos/400/400"
    />
  </StandardTileImage>
  <StandardTileContents>
    <StandardTileSwatches>
      <SelectionSet defaultSelectedValue="indigo">
        <ColorSwatches>
          <SelectionSetInput value="red/black">
            <SelectionSetLabel aria-label="red/black">
              <ColorSwatch
                primaryColor="red"
                secondaryColor="black"
                title="color red/black"
              />
            </SelectionSetLabel>
          </SelectionSetInput>
          <SelectionSetInput value="indigo">
            <SelectionSetLabel aria-label="indigo">
              <ColorSwatch primaryColor="indigo" title="color indigo" />
            </SelectionSetLabel>
          </SelectionSetInput>
          <SelectionSetInput value="green">
            <SelectionSetLabel aria-label="green">
              <ColorSwatch primaryColor="green" title="color green" />
            </SelectionSetLabel>
          </SelectionSetInput>
          <SelectionSetInput value="gold">
            <SelectionSetLabel aria-label="gold">
              <ColorSwatch primaryColor="gold" title="color gold" />
            </SelectionSetLabel>
          </SelectionSetInput>
          <SelectionSetInput value="blue">
            <SelectionSetLabel aria-label="blue">
              <ColorSwatch primaryColor="blue" title="color blue" />
            </SelectionSetLabel>
          </SelectionSetInput>
          <SelectionSetInput value="orange">
            <SelectionSetLabel aria-label="orange">
              <ColorSwatch primaryColor="orange" title="color orange" />
            </SelectionSetLabel>
          </SelectionSetInput>
          <SelectionSetInput value="pink">
            <SelectionSetLabel aria-label="pink">
              <ColorSwatch primaryColor="pink" title="color pink" />
            </SelectionSetLabel>
          </SelectionSetInput>
          <SelectionSetInput value="brown">
            <SelectionSetLabel aria-label="brown">
              <ColorSwatch primaryColor="brown" title="color brown" />
            </SelectionSetLabel>
          </SelectionSetInput>
          <SelectionSetInput disabled value="limegreen">
            <SelectionSetLabel aria-label="limegreen">
              <ColorSwatch primaryColor="limegreen" title="color lime green" />
            </SelectionSetLabel>
          </SelectionSetInput>
          <SelectionSetInput disabled value="darkmagenta">
            <SelectionSetLabel aria-label="darkmagenta">
              <ColorSwatch
                primaryColor="darkmagenta"
                title="color dark magenta"
              />
            </SelectionSetLabel>
          </SelectionSetInput>
        </ColorSwatches>
      </SelectionSet>
    </StandardTileSwatches>
    <StandardTileName>Name</StandardTileName>
    <StandardTilePrice>$price</StandardTilePrice>
  </StandardTileContents>
</StandardTile>

<StandardTile style={{ width: 300 }}>
  <StandardTileImage>
    <BasicResponsiveImage
      alt="image-alt"
      aspectRatio={1}
      src="https://picsum.photos/400/400"
    />
  </StandardTileImage>
  <StandardTileContents>
    <StandardTileSwatches>
      <SelectionSet defaultSelectedValue="indigo">
        <ColorSwatches>
          <SelectionSetInput value="red/black">
            <SelectionSetLabel aria-label="red/black">
              <ColorSwatch
                primaryColor="red"
                secondaryColor="black"
                title="color red/black"
              />
            </SelectionSetLabel>
          </SelectionSetInput>
          <SelectionSetInput value="indigo">
            <SelectionSetLabel aria-label="indigo">
              <ColorSwatch primaryColor="indigo" title="color indigo" />
            </SelectionSetLabel>
          </SelectionSetInput>
          <SelectionSetInput value="green">
            <SelectionSetLabel aria-label="green">
              <ColorSwatch primaryColor="green" title="color green" />
            </SelectionSetLabel>
          </SelectionSetInput>
          <SelectionSetInput value="gold">
            <SelectionSetLabel aria-label="gold">
              <ColorSwatch primaryColor="gold" title="color gold" />
            </SelectionSetLabel>
          </SelectionSetInput>
          <SelectionSetInput value="blue">
            <SelectionSetLabel aria-label="blue">
              <ColorSwatch primaryColor="blue" title="color blue" />
            </SelectionSetLabel>
          </SelectionSetInput>
          <SelectionSetInput value="orange">
            <SelectionSetLabel aria-label="orange">
              <ColorSwatch primaryColor="orange" title="color orange" />
            </SelectionSetLabel>
          </SelectionSetInput>
          <SelectionSetInput value="pink">
            <SelectionSetLabel aria-label="pink">
              <ColorSwatch primaryColor="pink" title="color pink" />
            </SelectionSetLabel>
          </SelectionSetInput>
          <SelectionSetInput value="brown">
            <SelectionSetLabel aria-label="brown">
              <ColorSwatch primaryColor="brown" title="color brown" />
            </SelectionSetLabel>
          </SelectionSetInput>
          <SelectionSetInput disabled value="limegreen">
            <SelectionSetLabel aria-label="limegreen">
              <ColorSwatch primaryColor="limegreen" title="color lime green" />
            </SelectionSetLabel>
          </SelectionSetInput>
          <SelectionSetInput disabled value="darkmagenta">
            <SelectionSetLabel aria-label="darkmagenta">
              <ColorSwatch
                primaryColor="darkmagenta"
                title="color dark magenta"
              />
            </SelectionSetLabel>
          </SelectionSetInput>
        </ColorSwatches>
      </SelectionSet>
    </StandardTileSwatches>
    <StandardTileName>Name</StandardTileName>
    <StandardTilePrice>$price</StandardTilePrice>
  </StandardTileContents>
</StandardTile>

<div class="swan-standard-tile" style="width: 300px;">
  <div class="swan-standard-tile-image">
    <span
      class="swan-responsive-image-wrapper swan-aspect-ratio-container"
      style="padding-bottom: 100%;"
      ><span class="swan-aspect-ratio-content"
        ><img
          alt="image-alt"
          src="https://picsum.photos/400/400"
          class="swan-responsive-image" /></span
    ></span>
  </div>
  <div class="swan-standard-tile-contents">
    <div class="swan-standard-tile-swatches">
      <div role="radiogroup" class="swan-selection-set">
        <div class="swan-color-swatches">
          <input
            type="radio"
            class="swan-selection-set-input swan-radio"
            value="red/black"
            id="auto-id-knm9fqzg0-272"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="red/black"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-272"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: red; color: black;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color red/black</span
              ></span
            ></label
          ><input
            type="radio"
            class="swan-selection-set-input swan-radio"
            value="indigo"
            checked=""
            id="auto-id-knm9fqzg0-273"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="indigo"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-273"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: indigo;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color indigo</span
              ></span
            ></label
          ><input
            type="radio"
            class="swan-selection-set-input swan-radio"
            value="green"
            id="auto-id-knm9fqzg0-274"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="green"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-274"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: green;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color green</span
              ></span
            ></label
          ><input
            type="radio"
            class="swan-selection-set-input swan-radio"
            value="gold"
            id="auto-id-knm9fqzg0-275"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="gold"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-275"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: gold;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color gold</span
              ></span
            ></label
          ><input
            type="radio"
            class="swan-selection-set-input swan-radio"
            value="blue"
            id="auto-id-knm9fqzg0-276"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="blue"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-276"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: blue;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color blue</span
              ></span
            ></label
          ><input
            type="radio"
            class="swan-selection-set-input swan-radio"
            value="orange"
            id="auto-id-knm9fqzg0-277"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="orange"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-277"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: orange;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color orange</span
              ></span
            ></label
          ><input
            type="radio"
            class="swan-selection-set-input swan-radio"
            value="pink"
            id="auto-id-knm9fqzg0-278"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="pink"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-278"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: pink;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color pink</span
              ></span
            ></label
          ><input
            type="radio"
            class="swan-selection-set-input swan-radio"
            value="brown"
            id="auto-id-knm9fqzg0-279"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="brown"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-279"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: brown;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color brown</span
              ></span
            ></label
          ><input
            type="radio"
            disabled=""
            class="swan-selection-set-input swan-radio"
            value="limegreen"
            id="auto-id-knm9fqzg0-280"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="limegreen"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-280"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: limegreen;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color lime green</span
              ></span
            ></label
          ><input
            type="radio"
            disabled=""
            class="swan-selection-set-input swan-radio"
            value="darkmagenta"
            id="auto-id-knm9fqzg0-281"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="darkmagenta"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-281"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: darkmagenta;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color dark magenta</span
              ></span
            ></label
          >
        </div>
      </div>
    </div>
    <div class="swan-standard-tile-name">Name</div>
    <div class="swan-standard-tile-price">$price</div>
  </div>
</div>

<div class="swan-standard-tile" style="width: 300px;">
  <div class="swan-standard-tile-image">
    <span
      class="swan-responsive-image-wrapper swan-aspect-ratio-container"
      style="padding-bottom: 100%;"
      ><span class="swan-aspect-ratio-content"
        ><img
          alt="image-alt"
          src="https://picsum.photos/400/400"
          class="swan-responsive-image" /></span
    ></span>
  </div>
  <div class="swan-standard-tile-contents">
    <div class="swan-standard-tile-swatches">
      <div role="radiogroup" class="swan-selection-set">
        <div class="swan-color-swatches">
          <input
            type="radio"
            class="swan-selection-set-input swan-radio"
            value="red/black"
            id="auto-id-knm9fqzg0-272"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="red/black"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-272"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: red; color: black;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color red/black</span
              ></span
            ></label
          ><input
            type="radio"
            class="swan-selection-set-input swan-radio"
            value="indigo"
            checked=""
            id="auto-id-knm9fqzg0-273"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="indigo"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-273"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: indigo;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color indigo</span
              ></span
            ></label
          ><input
            type="radio"
            class="swan-selection-set-input swan-radio"
            value="green"
            id="auto-id-knm9fqzg0-274"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="green"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-274"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: green;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color green</span
              ></span
            ></label
          ><input
            type="radio"
            class="swan-selection-set-input swan-radio"
            value="gold"
            id="auto-id-knm9fqzg0-275"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="gold"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-275"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: gold;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color gold</span
              ></span
            ></label
          ><input
            type="radio"
            class="swan-selection-set-input swan-radio"
            value="blue"
            id="auto-id-knm9fqzg0-276"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="blue"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-276"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: blue;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color blue</span
              ></span
            ></label
          ><input
            type="radio"
            class="swan-selection-set-input swan-radio"
            value="orange"
            id="auto-id-knm9fqzg0-277"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="orange"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-277"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: orange;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color orange</span
              ></span
            ></label
          ><input
            type="radio"
            class="swan-selection-set-input swan-radio"
            value="pink"
            id="auto-id-knm9fqzg0-278"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="pink"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-278"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: pink;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color pink</span
              ></span
            ></label
          ><input
            type="radio"
            class="swan-selection-set-input swan-radio"
            value="brown"
            id="auto-id-knm9fqzg0-279"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="brown"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-279"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: brown;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color brown</span
              ></span
            ></label
          ><input
            type="radio"
            disabled=""
            class="swan-selection-set-input swan-radio"
            value="limegreen"
            id="auto-id-knm9fqzg0-280"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="limegreen"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-280"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: limegreen;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color lime green</span
              ></span
            ></label
          ><input
            type="radio"
            disabled=""
            class="swan-selection-set-input swan-radio"
            value="darkmagenta"
            id="auto-id-knm9fqzg0-281"
            name="auto-id-knm9fqzg0-282"
          /><label
            aria-label="darkmagenta"
            class="swan-selection-set-label"
            for="auto-id-knm9fqzg0-281"
            ><span class="swan-color-swatch-wrapper"
              ><div
                aria-disabled="false"
                role="presentation"
                class="swan-color-swatch"
                style="background-color: darkmagenta;"
              ></div>
              <span
                class="swan-color-swatch-accessible-label swan-visually-hidden"
                >color dark magenta</span
              ></span
            ></label
          >
        </div>
      </div>
    </div>
    <div class="swan-standard-tile-name">Name</div>
    <div class="swan-standard-tile-price">$price</div>
  </div>
</div>

Price

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

ReactVanilla

<StandardTile style={{ width: 300 }}>
  <StandardTileImage>
    <BasicResponsiveImage aspectRatio={1} src="https://picsum.photos/400/400" />
  </StandardTileImage>
  <StandardTileContents>
    <StandardTileName>Name</StandardTileName>
    <StandardTileDescription>Description</StandardTileDescription>
    <StandardTilePrice>
      <Pricing>
        <PricingOffer>100 Starting at</PricingOffer>{' '}
        <PricingComparison>
          <ListPrice>€10.99</ListPrice> <DiscountPrice>€8.99</DiscountPrice>
        </PricingComparison>{' '}
        <ShortTaxMessage>Inc. VAT</ShortTaxMessage>
      </Pricing>
    </StandardTilePrice>
  </StandardTileContents>
</StandardTile>

<StandardTile style={{ width: 300 }}>
  <StandardTileImage>
    <BasicResponsiveImage aspectRatio={1} src="https://picsum.photos/400/400" />
  </StandardTileImage>
  <StandardTileContents>
    <StandardTileName>Name</StandardTileName>
    <StandardTileDescription>Description</StandardTileDescription>
    <StandardTilePrice>
      <Pricing>
        <PricingOffer>100 Starting at</PricingOffer>{' '}
        <PricingComparison>
          <ListPrice>€10.99</ListPrice> <DiscountPrice>€8.99</DiscountPrice>
        </PricingComparison>{' '}
        <ShortTaxMessage>Inc. VAT</ShortTaxMessage>
      </Pricing>
    </StandardTilePrice>
  </StandardTileContents>
</StandardTile>

<div class="swan-standard-tile" style="width: 300px">
  <div class="swan-standard-tile-image">
    <div
      class="swan-responsive-image-wrapper swan-aspect-ratio-container"
      style="padding-bottom: 100%"
    >
      <div class="swan-aspect-ratio-content">
        <img
          src="https://picsum.photos/400/400"
          class="swan-responsive-image"
        />
      </div>
    </div>
  </div>
  <div class="swan-standard-tile-contents">
    <div class="swan-standard-tile-name">Name</div>
    <div class="swan-standard-tile-description">Description</div>
    <div class="swan-standard-tile-price">
      <span class="swan-pricing"
        ><span class="swan-pricing-offer">100 Starting at</span>
        <span class="swan-pricing-comparison"
          ><span class="swan-list-price">€10.99</span>
          <span class="swan-discount-price">€8.99</span></span
        >
        <span class="swan-short-tax-message">Inc. VAT</span></span
      >
    </div>
  </div>
</div>

<div class="swan-standard-tile" style="width: 300px">
  <div class="swan-standard-tile-image">
    <div
      class="swan-responsive-image-wrapper swan-aspect-ratio-container"
      style="padding-bottom: 100%"
    >
      <div class="swan-aspect-ratio-content">
        <img
          src="https://picsum.photos/400/400"
          class="swan-responsive-image"
        />
      </div>
    </div>
  </div>
  <div class="swan-standard-tile-contents">
    <div class="swan-standard-tile-name">Name</div>
    <div class="swan-standard-tile-description">Description</div>
    <div class="swan-standard-tile-price">
      <span class="swan-pricing"
        ><span class="swan-pricing-offer">100 Starting at</span>
        <span class="swan-pricing-comparison"
          ><span class="swan-list-price">€10.99</span>
          <span class="swan-discount-price">€8.99</span></span
        >
        <span class="swan-short-tax-message">Inc. VAT</span></span
      >
    </div>
  </div>
</div>

Use StandardTilePromoCodeLabel to add a Promo Code to a tile.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={4}>
      <StandardTile>
        <StandardTileImage>
          <BasicResponsiveImage
            aspectRatio={1}
            src="https://picsum.photos/400/400"
          />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
          <StandardTilePromoCode>
            <StandardTilePromoCodeLabel>
              50% off with promo code
            </StandardTilePromoCodeLabel>
            <PromoCode>Promo Code</PromoCode>
          </StandardTilePromoCode>
        </StandardTileContents>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={4}>
      <StandardTile>
        <StandardTileImage>
          <BasicResponsiveImage
            aspectRatio={1}
            src="https://picsum.photos/400/400"
          />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
          <StandardTilePromoCode>
            <StandardTilePromoCodeLabel>
              50% off with promo code
            </StandardTilePromoCodeLabel>
            <PromoCode>Promo Code</PromoCode>
          </StandardTilePromoCode>
        </StandardTileContents>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <div class="swan-standard-tile">
        <div class="swan-standard-tile-image">
          <div
            class="swan-responsive-image-wrapper swan-aspect-ratio-container"
            style="padding-bottom: 100%"
          >
            <div class="swan-aspect-ratio-content">
              <img
                src="https://picsum.photos/400/400"
                class="swan-responsive-image"
              />
            </div>
          </div>
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
          <div class="swan-standard-tile-promo-code">
            <div class="swan-standard-tile-promo-code-label">
              50% off with promo code
            </div>
            <div class="swan-promo-code">Promo Code</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <div class="swan-standard-tile">
        <div class="swan-standard-tile-image">
          <div
            class="swan-responsive-image-wrapper swan-aspect-ratio-container"
            style="padding-bottom: 100%"
          >
            <div class="swan-aspect-ratio-content">
              <img
                src="https://picsum.photos/400/400"
                class="swan-responsive-image"
              />
            </div>
          </div>
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
          <div class="swan-standard-tile-promo-code">
            <div class="swan-standard-tile-promo-code-label">
              50% off with promo code
            </div>
            <div class="swan-promo-code">Promo Code</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

ReactVanilla

<StandardTileContents>
  <StandardTileName>Name</StandardTileName>
  <StandardTileDescription>Description</StandardTileDescription>
  <StandardTilePromoCode>
    <StandardTilePromoCodeLabel>
      50% off with promo code
    </StandardTilePromoCodeLabel>
    <PromoCode>Promo Code</PromoCode>
  </StandardTilePromoCode>
</StandardTileContents>

<StandardTileContents>
  <StandardTileName>Name</StandardTileName>
  <StandardTileDescription>Description</StandardTileDescription>
  <StandardTilePromoCode>
    <StandardTilePromoCodeLabel>
      50% off with promo code
    </StandardTilePromoCodeLabel>
    <PromoCode>Promo Code</PromoCode>
  </StandardTilePromoCode>
</StandardTileContents>

<div class="swan-standard-tile-contents">
  <div class="swan-standard-tile-name">Name</div>
  <div class="swan-standard-tile-description">Description</div>
  <div class="swan-standard-tile-promo-code">
    <div class="swan-standard-tile-promo-code-label">
      50% off with promo code
    </div>
    <div class="swan-promo-code">Promo Code</div>
  </div>
</div>

<div class="swan-standard-tile-contents">
  <div class="swan-standard-tile-name">Name</div>
  <div class="swan-standard-tile-description">Description</div>
  <div class="swan-standard-tile-promo-code">
    <div class="swan-standard-tile-promo-code-label">
      50% off with promo code
    </div>
    <div class="swan-promo-code">Promo Code</div>
  </div>
</div>

Footer

Use StandardTileFooter to bottom align the tile’s footer.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={4}>
      <StandardTile>
        <StandardTileImage>
          <BasicResponsiveImage
            aspectRatio={1}
            src="https://picsum.photos/400/400?text=image"
          />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>A short description</StandardTileDescription>
        </StandardTileContents>
        <StandardTileFooter>
          <Button width="full-width" skin="secondary">
            Add to cart
          </Button>
        </StandardTileFooter>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile>
        <StandardTileImage>
          <BasicResponsiveImage
            aspectRatio={1}
            src="https://picsum.photos/400/400?text=image"
          />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>
            This tile is much, much, much, much, much, much, much, much, much,
            much, much, much, much, much, much, much, much, much taller.
          </StandardTileDescription>
        </StandardTileContents>
        <StandardTileFooter>
          <Button width="full-width" skin="secondary">
            Add to cart
          </Button>
        </StandardTileFooter>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={4}>
      <StandardTile>
        <StandardTileImage>
          <BasicResponsiveImage
            aspectRatio={1}
            src="https://picsum.photos/400/400?text=image"
          />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>A short description</StandardTileDescription>
        </StandardTileContents>
        <StandardTileFooter>
          <Button width="full-width" skin="secondary">
            Add to cart
          </Button>
        </StandardTileFooter>
      </StandardTile>
    </Column>
    <Column span={4}>
      <StandardTile>
        <StandardTileImage>
          <BasicResponsiveImage
            aspectRatio={1}
            src="https://picsum.photos/400/400?text=image"
          />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>
            This tile is much, much, much, much, much, much, much, much, much,
            much, much, much, much, much, much, much, much, much taller.
          </StandardTileDescription>
        </StandardTileContents>
        <StandardTileFooter>
          <Button width="full-width" skin="secondary">
            Add to cart
          </Button>
        </StandardTileFooter>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <div class="swan-standard-tile">
        <div class="swan-standard-tile-image">
          <span
            class="swan-responsive-image-wrapper swan-aspect-ratio-container"
            style="padding-bottom: 100%;"
            ><span class="swan-aspect-ratio-content"
              ><img
                src="https://picsum.photos/400/400?text=image"
                class="swan-responsive-image" /></span
          ></span>
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">A short description</div>
        </div>
        <div class="swan-standard-tile-footer">
          <button
            type="button"
            class="swan-button swan-button-skin-secondary swan-button-full-width"
          >
            Add to cart
          </button>
        </div>
      </div>
    </div>
    <div class="swan-col-4">
      <div class="swan-standard-tile">
        <div class="swan-standard-tile-image">
          <span
            class="swan-responsive-image-wrapper swan-aspect-ratio-container"
            style="padding-bottom: 100%;"
            ><span class="swan-aspect-ratio-content"
              ><img
                src="https://picsum.photos/400/400?text=image"
                class="swan-responsive-image" /></span
          ></span>
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">
            This tile is much, much, much, much, much, much, much, much, much,
            much, much, much, much, much, much, much, much, much taller.
          </div>
        </div>
        <div class="swan-standard-tile-footer">
          <button
            type="button"
            class="swan-button swan-button-skin-secondary swan-button-full-width"
          >
            Add to cart
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <div class="swan-standard-tile">
        <div class="swan-standard-tile-image">
          <span
            class="swan-responsive-image-wrapper swan-aspect-ratio-container"
            style="padding-bottom: 100%;"
            ><span class="swan-aspect-ratio-content"
              ><img
                src="https://picsum.photos/400/400?text=image"
                class="swan-responsive-image" /></span
          ></span>
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">A short description</div>
        </div>
        <div class="swan-standard-tile-footer">
          <button
            type="button"
            class="swan-button swan-button-skin-secondary swan-button-full-width"
          >
            Add to cart
          </button>
        </div>
      </div>
    </div>
    <div class="swan-col-4">
      <div class="swan-standard-tile">
        <div class="swan-standard-tile-image">
          <span
            class="swan-responsive-image-wrapper swan-aspect-ratio-container"
            style="padding-bottom: 100%;"
            ><span class="swan-aspect-ratio-content"
              ><img
                src="https://picsum.photos/400/400?text=image"
                class="swan-responsive-image" /></span
          ></span>
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">
            This tile is much, much, much, much, much, much, much, much, much,
            much, much, much, much, much, much, much, much, much taller.
          </div>
        </div>
        <div class="swan-standard-tile-footer">
          <button
            type="button"
            class="swan-button swan-button-skin-secondary swan-button-full-width"
          >
            Add to cart
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Horizontal

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

ReactVanilla

<GridContainer>
  <Row>
    <Column span={6}>
      <StandardTile layout="horizontal">
        <StandardTileImage>
          <BasicResponsiveImage
            aspectRatio={1}
            src="https://picsum.photos/400/400?text=image"
          />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={6}>
      <StandardTile layout="horizontal">
        <StandardTileImage>
          <BasicResponsiveImage
            aspectRatio={1}
            src="https://picsum.photos/400/400?text=image"
          />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>Name</StandardTileName>
          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6">
      <div class="swan-standard-tile swan-standard-tile-horizontal">
        <div class="swan-standard-tile-image">
          <div
            class="swan-responsive-image-wrapper swan-aspect-ratio-container"
            style="padding-bottom: 100%"
          >
            <div class="swan-aspect-ratio-content">
              <img
                src="https://picsum.photos/400/400?text=image"
                class="swan-responsive-image"
              />
            </div>
          </div>
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6">
      <div class="swan-standard-tile swan-standard-tile-horizontal">
        <div class="swan-standard-tile-image">
          <div
            class="swan-responsive-image-wrapper swan-aspect-ratio-container"
            style="padding-bottom: 100%"
          >
            <div class="swan-aspect-ratio-content">
              <img
                src="https://picsum.photos/400/400?text=image"
                class="swan-responsive-image"
              />
            </div>
          </div>
        </div>
        <div class="swan-standard-tile-contents">
          <div class="swan-standard-tile-name">Name</div>
          <div class="swan-standard-tile-description">Description</div>
        </div>
      </div>
    </div>
  </div>
</div>

As a Link

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

Only wrap the Link around the content that should be included in the accessible name, which is usually the title or call-to-action.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={4}>
      <StandardTile>
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/400?id=1" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>
            {' '}
            <Link href="#" covering>
              Title link{' '}
            </Link>
          </StandardTileName>

          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={4}>
      <StandardTile>
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/400?id=1" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>
            {' '}
            <Link href="#" covering>
              Title link{' '}
            </Link>
          </StandardTileName>

          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <div class="swan-standard-tile">
        <div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/400/400?id=1"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <a href="#" class="swan-link swan-link-covering"
            ><div class="swan-standard-tile-name">Title link</div></a
          >
          <div class="swan-standard-tile-description">Description</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <div class="swan-standard-tile">
        <div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/400/400?id=1"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <a href="#" class="swan-link swan-link-covering"
            ><div class="swan-standard-tile-name">Title link</div></a
          >
          <div class="swan-standard-tile-description">Description</div>
        </div>
      </div>
    </div>
  </div>
</div>

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

ReactVanilla

<GridContainer>
  <Row>
    <Column span={4}>
      <StandardTile>
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/400?id=1" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>
            <Link href="#" covering skin="unstyled">
              {' '}
            </Link>
            Title link
          </StandardTileName>

          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={4}>
      <StandardTile>
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/400?id=1" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>
            <Link href="#" covering skin="unstyled">
              {' '}
            </Link>
            Title link
          </StandardTileName>

          <StandardTileDescription>Description</StandardTileDescription>
        </StandardTileContents>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <div class="swan-standard-tile">
        <div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/400/400?id=1"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <a
            href="#"
            class="swan-link swan-link-skin-unstyled swan-link-covering"
            ><div class="swan-standard-tile-name">Title link</div></a
          >
          <div class="swan-standard-tile-description">Description</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <div class="swan-standard-tile">
        <div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/400/400?id=1"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <a
            href="#"
            class="swan-link swan-link-skin-unstyled swan-link-covering"
            ><div class="swan-standard-tile-name">Title link</div></a
          >
          <div class="swan-standard-tile-description">Description</div>
        </div>
      </div>
    </div>
  </div>
</div>

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

ReactVanilla

<GridContainer>
  <Row>
    <Column span={4}>
      <StandardTile>
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/400?id=1" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>
            {' '}
            <Link href="#" covering>
              Title link{' '}
            </Link>
          </StandardTileName>

          <StandardTileDescription>Description</StandardTileDescription>
          <StandardTileSeparatelyClickableContents>
            <Link href="#otherlink">Separate link</Link>
          </StandardTileSeparatelyClickableContents>
        </StandardTileContents>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={4}>
      <StandardTile>
        <StandardTileImage>
          <FluidImage src="https://picsum.photos/400/400?id=1" />
        </StandardTileImage>
        <StandardTileContents>
          <StandardTileName>
            {' '}
            <Link href="#" covering>
              Title link{' '}
            </Link>
          </StandardTileName>

          <StandardTileDescription>Description</StandardTileDescription>
          <StandardTileSeparatelyClickableContents>
            <Link href="#otherlink">Separate link</Link>
          </StandardTileSeparatelyClickableContents>
        </StandardTileContents>
      </StandardTile>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <div class="swan-standard-tile">
        <div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/400/400?id=1"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <a href="#" class="swan-link swan-link-covering"
            ><div class="swan-standard-tile-name">Title link</div></a
          >
          <div class="swan-standard-tile-description">Description</div>
          <div class="swan-standard-tile-separately-clickable-contents">
            <a href="#otherlink" class="swan-link">Separate link</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <div class="swan-standard-tile">
        <div class="swan-standard-tile-image">
          <img
            src="https://picsum.photos/400/400?id=1"
            class="swan-fluid-image"
          />
        </div>
        <div class="swan-standard-tile-contents">
          <a href="#" class="swan-link swan-link-covering"
            ><div class="swan-standard-tile-name">Title link</div></a
          >
          <div class="swan-standard-tile-description">Description</div>
          <div class="swan-standard-tile-separately-clickable-contents">
            <a href="#otherlink" class="swan-link">Separate link</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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.