Shortcut tiles

Brienne Wong
Brienne Wong
  • Updated

You can add shortcut tiles anywhere in your styleguide. These can link to other parts of your styleguide or to external links.

Add shortcut tiles

1) Choose Shortcut tiles from the toolbar

Shortcut Tiles function hovered over

2) Copy a link

3) Click to create a shortcut tile

4) Paste the link

New Shortcut Tile

5) Add a combination of image, title and/or description

Row of Shortcut tiles

6) Viewers will be able to see the shortcuts and click on them to access the link


Shortcut tile options

You can add an image or title or description, or a combination.

Sizes are grouped by the largest tile in a block. Therefore if you want some of your tiles in a block to be full length with a description, and some without, you'll need to create them as separate blocks.

Here we have created a shortcut tile with just a title.

shortcut tile with title only

It will render on the viewer's page view like this:

Shortcut tile with title only in viewer mode

If you have one tile with just a title and one with both an image and a title like so:

Shortcut tiles with a tile with a title only and another title with an image and title

Then it will default to the largest tile in the block and an empty space will appear where there is no image uploaded like so:

Shortcut tiles in viewer mode

Shortcut tile sizes

This feature is available for Professional and Enterprise plans. This is not available for legacy plans. Want this and other premium features? Update your plan here.

You can adjust your shortcut tiles to be full width, three-quarters width, half width or a quarter width. You can also adjust the height to three pre-set heights (small, medium, or large).

Shortcut tile settings

Copy shortcut tiles

1) Click Copy shortcut tiles

Copy shortcut tiles function hovered over

What is the optimum image size/ratio for shortcut tiles?

For shortcut tiles, the best image ratio is 2:1.

If you have the Professional and Enterprise plans, the ratios for the different-sized shortcut tiles are: 

Small 4 column = 2:1
Small 3 column = 3:1
Small 2 column = 4:1
Small 1 column = 8:1

Medium 4 column = 1:1
Medium 3 column = 3:2
Medium 2 column = 2:1
Medium 1 column = 4:1

Large 4 column = 4:5
Large 3 column = 1:1
Large 2 column = 8:5
Large 1 column = 4:1

Was this article helpful?