Guidelines block

Share rules or tips on how to use your design system, including do and don’t examples.

Guidelines block - menu

Overview

The guidelines block helps to communicate best practices in your design system in a concise and consistent way. For example, outlining “Do’s and Don’ts” for components rules or content guidelines.

These blocks can contain rich text and images, can have multiple columns, and you can their appearance using a few different style variants.

Example of a guidelines block.

Example of a guidelines block.

Types of guidelines

A guidelines block can contain multiple items, and each of these items can choose from one of the three types we offer:

  • Do: Show best practices
  • Don't: Illustrate approaches to avoid
  • Caution: Flag areas requiring attention
Guidelines block - types

Add a guidelines block

To add a guidelines block to your documentation:

  1. Select Guidelines from the block menu.
  2. Add your content to the block as desired. Click + Add guideline to add additional items.
  3. Assign a type to the guideline using the dropdown or the Type option in the block property panel. The default type is “Do”.
  4. In the property panel, select a variant to determine how this block will be styled in your published documentation.

Add a new guideline

Guidelines block - edit guideline type

You can add as many guidelines to the block as you like. To do so:

  1. Click + Add guideline in the block.
  2. Add your content, and an image (optional).
  3. Assign a type to the guideline using the dropdown or the Type option in the block property panel. The default type is “Do”.

Remove a guideline

To remove a guideline:

  1. In the Guidelines block, hover the item you would like to delete.
  2. Click on the ••• button at the top of the item.
  3. Click Delete item to remove it.
Deleting an item from the block.

Deleting an item from the block.


Variants

t

The guidelines block supports four style variants:

  • Prominent
  • Simple
  • Contained
  • Side border

Examples

The Simple style variant features a badge at the top of the block.

Do

Do use radio buttons if only one of the options can be selected.

Don't

Don’t use checkboxes if only one of the options can be selected.

The Prominent style variant puts extra emphasis on the guidelines using color backgrounds. This style is recommended when you need your guidelines to stand out.

Do

Do use radio buttons if only one of the options can be selected.

Don't

Don’t use checkboxes if only one of the options can be selected.

The Contained style variant features a top border, and is perfect for guidelines using images with bigger surrounding margins.

Do

Do use radio buttons if only one of the options can be selected.

Don't

Don’t use checkboxes if only one of the options can be selected.

Side border makes this style variant well suited for guidelines with longer text — content guidelines, for example.

Do

Do use radio buttons if only one of the options can be selected.

Don't

Don’t use checkboxes if only one of the options can be selected.