Vistaprint
styleKeysiconTileSet

Icon Tile Set

An Icon Tile Set consists of a number of Icon Tiles, which give prominence to important standalone links or elements. An Icon Tile Set can be used to create a "brand banner".

Playground

Horizontal

An Icon Tile Set can arrange its contents horizontally, so the icon comes next to the text, rather than above it.

Icon Tile Heading
Icon Tile description
Icon Tile Heading
Icon Tile description
Icon Tile with an internal link
Icon tile description with a link inside it
Share
Share
jsx
<div class="grid-container">
  <div class="row icon-tile-set">
    <div class="col-4">
      <!-- doesn't have to span 4 columns; could also be 3 or 6 -->
      <a class="icon-tile" href="#">
        <!-- this whole tile is a link -->
        <div class="icon-tile-icon"><!-- image goes here --></div>
        <div class="icon-tile-text">
          <div class="icon-tile-heading">Icon Tile Heading</div>
          <div class="icon-tile-description">Icon Tile description</div>
        </div>
      </a>
    </div>
    <div class="col-4">
      <div class="icon-tile" span="4">
        <!-- this tile is not a link -->
        <div class="icon-tile-icon"><!-- image goes here --></div>
        <div class="icon-tile-text">
          <div class="icon-tile-heading">Icon Tile Heading</div>
          <div class="icon-tile-description">Icon Tile description</div>
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="icon-tile" span="4">
        <div class="icon-tile-icon"><!-- image goes here --></div>
        <div class="icon-tile-text">
          <div class="icon-tile-heading">Icon Tile with an internal link</div>
          <div class="icon-tile-description">
            Icon tile description with a <a href="#">link inside it</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
jsx
<IconTileSet component={Row} horizontal />
<div class="row icon-tile-set icon-tile-set-horizontal"></div>

Horizontal with "align left"

By default, horizontal Icon Tile Sets will center their contents. The "align left" option on an Icon Tile will instead align its contents to the left.

Icon Tile Heading
Icon Tile description
Icon Tile Heading
Icon Tile description
Icon Tile with an internal link
Icon tile description with a link inside it
Share
Share
jsx
jsx
<IconTileSet component={Row} horizontal>
  <Column span={4}>
    <IconTile component="a" href="#" align="left">
      etc.
    </IconTile>
  </Column>
</IconTileSet>
<div class="row icon-tile-set icon-tile-set-horizontal">
  <div class="col-4">
    <a class="icon-tile icon-tile-align-left" href="#"> etc. </a>
  </div>
</div>

Components

IconTileSet

PropTypeDefaultDescription
horizontalbooleanfalse

Set alignment of Icon and Text horizontally

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

IconTile

PropTypeDefaultDescription
align"left" | "center"left

Align content of Icon Tile

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

IconTileIcon

IconTileIcon has no props of its own

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

IconTileText

IconTileText has no props of its own

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

IconTileHeading

IconTileHeading has no props of its own

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

IconTileDescription

IconTileDescription has no props of its own

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

Guidelines

Designer Guidelines

  • An Icon Tile Set is often used under the hero image to create a "brand banner".

  • An Icon Tile requires both an icon and a heading. A description beneath the heading is optional.

  • An Icon Tile Set should have no more than four Icon Tiles.

  • Use these sparingly and effectively; when used excessively, they'll lose their prominence.

  • If there is a link for an Icon Tile, it should either be a link for the whole tile (the whole tile is clickable), or the link should be at the very end of the description.