Vistaprint
styleKeysgradientTile

Gradient Tile

A Gradient Tile is a tile that places a gradient over its image. It places the tile name over the bottom of the image.

To make a Gradient Tile clickable, you can make its outer element an <a> tag.

Tile name

Share
Share
jsx
<div class="gradient-tile">
  <!-- can be an <a> tag if the tile is clickable -->
  <div class="gradient-tile-image">responsive image goes here</div>
  <p class="gradient-tile-name">Tile name</p>
</div>

Components

GradientTile

GradientTile has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <div/>)

GradientTileImage

GradientTileImage has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <div/>)

GradientTileName

GradientTileName has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <p/>)

Guidelines

Designer Guidelines

  • Gradient Tiles must have an image and a tile name, and only those elements.

Accessibility Guidelines

  • The same guidelines that apply to Standard Tiles apply to Gradient Tiles.