Component | Standard Tile

styleKeysstandardTile

The Standard Tile represents our usual way to promote products, or for other instances where an image should be followed by some descriptive text. It is a versatile component with many variations, designed to handle most (but not all) tile needs.

Every Standard Tile includes:

an "image" sub-component
a "contents" sub-component that contains the tile's name, plus some other optional sub-components such as a description, pricing, promo code, or a badge.

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.

Develop

<StandardTile>
  {' '}
  {/* use component="a" as appropriate */}
  <StandardTileImage>
    {/* Responsive or Fluid Image goes here */}
  </StandardTileImage>
  <StandardTileContents>
    <StandardTileName>Name</StandardTileName>
    <StandardTileDescription>Description</StandardTileDescription>
  </StandardTileContents>
</StandardTile>
<div class="standard-tile">
  <!-- use <a> instead of <div> as appropriate -->
  <div class="standard-tile-image">
    <!-- Responsive or Fluid Image goes here -->
  </div>
  <div class="standard-tile-contents">
    <div class="standard-tile-name">Name</div>
    <div class="standard-tile-description">Description</div>
  </div>
</div>

The default tile contains many optional elements. Only the tile image and tile name are required.

The "gallery" skin is for displaying a design choice, where clicking on the tile selects or drills down on that choice, rather than going to a product page for the product.

Tiles with the "gallery" skin should only be used inside a Grid using the "tight" option.

The "gallery" skin can also take a background image for the tile, using the "Background" sub-component. The tile will then put a background color under the tile contents, so that they can be seen against that background image.

Setting background="translucent" on a gallery tile will set its background to translucent grey, so that it can be overlaid on colored backgrounds.

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

Tiles with the "circular" skin should use the FluidImage component for the tile's image.

Standard Tiles should use the "product" skin when clicking on them takes you to a product/category page.

Tiles with the "product" skin can also specify the "full-bleed" option, making the tile's image touch the sides of the tile.

We often want our Standard Tile to act as a link to another page. If that's the case, you can make the entire tile be a link.

<StandardTile skin="product" component="a" href="#">
  <StandardTileImage>{/* image goes here */}</StandardTileImage>
  <StandardTileContents>
    <StandardTileName>Name</StandardTileName>
    <StandardTileDescription>Description</StandardTileDescription>
  </StandardTileContents>
</StandardTile>
<a href="somehref" class="standard-tile standard-tile-skin-product">
  <div class="standard-tile-image">
    <!--image goes here -->
  </div>
  <div class="standard-tile-contents">
    <div class="standard-tile-name">Name</div>
    <div class="standard-tile-description">Description</div>
  </div>
</a>

If you cannot make the entire tile be a link, you should place the tile inside a Link with the "unstyled" skin to prevent the link from styling the tile's contents.

<Link href="someurl" skin="unstyled">
  <StandardTile>etc.</StandardTile>
</Link>
<a href="somehref" class="link-skin-unstyled">
  <div class="standard-tile">
    <!-- etc -->
  </div>
</a>

Tiles can take an optional "price" sub-element to show a product price. The content inside of this "price" element should follow the standard pricing API.

<StandardTileContents>
  <StandardTileName>Name</StandardTileName>
  <StandardTileDescription>Description</StandardTileDescription>
  <StandardTilePrice>{/* pricing goes here */}</StandardTilePrice>
</StandardTileContents>
<div class="standard-tile-contents">
  <div class="standard-tile-name">Name</div>
  <div class="standard-tile-description">Description</div>
  <div class="standard-tile-price">
    <!-- pricing goes here, using standard Pricing API -->
  </div>
</div>

Standard Tiles can also take a set of Color Swatches. To support this, wrap the Color Swatches component with the Standard Tiles Swatches sub-component.

If there are a large number of swatches, you can use the "color swatch" variant of the Accordion to hide some of them.

Place this Accordion in the Standard Tile Contents sub-component, and then place the Standard Tile Swatches sub-component inside the Accordion's content zone.

Each Standard Tile has an "overlay" sub-component that goes on top of the tile. You can put a Callout inside this "overlay" sub-component to make it appear on top of the tile's contents.

<StandardTile skin="product">
  <StandardTileOverlay>
    <Callout>Callout</Callout>
  </StandardTileOverlay>
  <StandardTileImage>// image goes here</StandardTileImage>
  <StandardTileContents>
    <StandardTileName>Name</StandardTileName>
    <StandardTileDescription>Description</StandardTileDescription>
  </StandardTileContents>
</StandardTile>
<div class="standard-tile standard-tile-skin-product">
  <div class="standard-tile-overlay">
    <span class="callout">Callout</span>
  </div>
  <div class="standard-tile-image">
    <!-- image goes here -->
  </div>
  <div class="standard-tile-contents">
    <div class="standard-tile-name">Name</div>
    <div class="standard-tile-description">Description</div>
  </div>
</div>

You can place multiple elements inside the tile's overlay. The items will be displayed in a row across the top of the tile.

(If you want the last item in that row to sit in the top right corner of the tile, you'll need to align that item's content to the right.)

If you want to add a Promo Code to a tile, place it inside an optional "tile promo code" sub-component.

These should not be used with tiles that are using the "product" or "gallery" skins.

If you are using the default skin, you may also want to add an optional "CTA" visual to the tile to emphasize that the tile is clickable. Note: this "CTA" should not be an actual link! (HTML prohibits putting an <a> link inside another <a>.) Instead, use Visage's "CTA" skin to give the appearance of a link; React's StandardTileCTA component takes care of these semantics for you.

Note: if the only text element on the tile is the tile's name, it should still use the "name" sub-component, and should not be a "CTA".

If you are using the default skin and want to add a Badge above tile's name, place it inside an optional "tile badge" sub-component.

Tiles with the default skin do not automatically align their content to the bottom of the tile, unlike the other skins. Thus, default tiles can add an optional footer, which sits below the "contents" sub-component. The footer will always be vertically aligned to the bottom of the tile.

<StandardTile>
  <StandardTileImage>{/* image goes here */}</StandardTileImage>
  <StandardTileContents>
    <StandardTileName>Name</StandardTileName>
    <StandardTileDescription>Description</StandardTileDescription>
  </StandardTileContents>
  <StandardTileFooter>Footer</StandardTileFooter>
</StandardTile>
<div class="standard-tile">
  <div class="standard-tile-image">
    <!-- image goes here -->
  </div>
  <div class="standard-tile-contents">
    <div class="standard-tile-name">Name</div>
    <div class="standard-tile-description">
      This tile's link is in a Standard Tile Footer.
    </div>
  </div>
  <div class="standard-tile-footer">
    <div class="link link-skin-cta">Get Started</div>
  </div>
</div>

You can set a tile with the default skin to have a horizontal layout, with the image at left and the text contents at right.

<StandardTile layout="horizontal">...</StandardTile>
<div class="standard-tile standard-tile-horizontal"></div>