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


2) Copy a link

3) Click to create a shortcut tile

4) Paste the link

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

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.

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

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

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 tile sizes

This feature is available for Professional and Enterprise plans. This is not available for legacy Professional and Enterprise plans. Want shortcut tiles 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).

Screen Shot 2022-08-25 at 9.20.28 AM.png

Copy shortcut tiles

There is currently a workaround to copy shortcut tiles:

1) Select some text above and below the shortcut tiles

2) Copy and paste the tiles


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?