Tiles

A guide to thumbnail and icon tiles

Overview

Thumbnail and icon tiles utilise the HTML5 spec that now allows an HTML anchor element to wrap around any other content.

The thumbnail displays an image and link text, whilst the icon displays an icon (controlled by it's CSS class).

Both the Thumbnail and icon tiles utilise the link details information which controls the url of the item, the link title, image or icon.

Example
WCMS use

1. From the Experience Editor, in a placeholder press the 'add here' insert option
2. Browse Renderings > Building Blocks > Grid> Link Grid
3. Select the required number of grid columns
4. Within a grid column placeholder, press the "add here" insert options and select either a Tile (icon) or Tile (Image)

5. Next select your required page, ensuring by checking in the content editor that the page's link detail fields have all been completed

 

 

In this example a Tile Icon has been chosen.

 

If required you can change the Tile Icon to a Tile Image rendering by clicking on the Compatible Renderings button (highlighted in red below)

In the replacement rendering window, available compatible renderings will be displayed. Select the Tile Image rendering

The Tile Icon will now change to Tile Image rendering.

 

MVC.net use
Code

<a class="thumbnail center" href="/tradingstandards/consumeradvice/coldcallingzones/nocoldcallingzones">
    <p>
        <i class="large pink trading-standards-icon home icon" style="display: inline;"></i>
    </p>
    <p>Setting up a "No Cold Calling" zone</p>
</a> 
Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release