
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.
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
Add a guidelines block
To add a guidelines block to your documentation:
- Select Guidelines from the block menu.
- Add your content to the block as desired. Click + Add guideline to add additional items.
- Assign a type to the guideline using the dropdown or the Type option in the block property panel. The default type is “Do”.
- In the property panel, select a variant to determine how this block will be styled in your published documentation.
Add a new guideline

You can add as many guidelines to the block as you like. To do so:
- Click + Add guideline in the block.
- Add your content, and an image (optional).
- 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:
- In the Guidelines block, hover the item you would like to delete.
- Click on the ••• button at the top of the item.
- Click Delete item to remove it.

Deleting an item from the block.
Variants

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 use radio buttons if only one of the options can be selected.

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 use radio buttons if only one of the options can be selected.

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 use radio buttons if only one of the options can be selected.

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 use radio buttons if only one of the options can be selected.

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