Shortcut block

Shortcut block - menu
Shortcut block - empty
  1. Select Shortcut link from the block menu.
  2. In the property panel to the right of the editor, click the Add link button in the Link section.
  3. To link a page from your documentation site, select a page from the dropdown in the Page tab of the dialog.
  4. To link to an external URL, go to the External link tab in the dialog and paste your link the URL field.
  5. In the Link section of the property panel, toggle Open in new tab to On if you want the link to open in a new tab.

 

  1. To add an image or an icon, click the Add image dropdown in the shortcut block. You can either upload an image file, or select a Figma frame from your connected files. You can also add an image or icon from the property panel, in the Image section.
  2. Add alt text in the Alt text field in the property panel. This is strongly recommended for improving the accessibility of your documentation site.
  3. To add a title or description, type in the Title and Description fields.

 

You can add multiple shortcut links to the same block. To add another link to the same block:

  1. Click the + Add link button in the block.
  2. Add a new link following the same steps as above.
  3. Repeat as many times as you need.

Block variants

You can choose between four different display variants for this block — Image on top or image on the left, and icon on top, or icon on the left.

Shortcut block - variants

Edit shortcuts

You can edit the shortcut link using the property panel to the right.

  • To change the link, click the Edit button beside the Link field.

Edit the image or icon

  • To change the image or icon, click the Replace buttonbeside the image or icon preview. Choose a new image file or Figma frame.
  • To delete the image or icon frame, click ... beside the image or icon preview to open the context menu, and click Remove frame.
  • If you've uploaded an image file, you can click the trash icon to the right of the preview to delete it.
  • To change the alignment, use the buttons below the image preview.
  • You can also edit the title and description.
  • To replace the current image or frame with a new frame, select Replace with Figma frame
  • To remove an image or frame, select Remove image or Remove frame (depending on what the current content format is).