Rules

Brienne Wong
Brienne Wong
  • Updated

Our Rules block consists of do's, don'ts, and cautions. These are a staple of any good design system documentation site. You can use them to give examples of how particular components should be used and common mistakes to avoid. 

Add rules

You can add a Rules block from the editor toolbar:

Rules function hovered over in the zeroheight toolbar

You will be presented with one Do and one Don't by default. You have the option of adding additional rules and there's no limit to the number of rules you can have in one block.

Rules function

You have the option to upload an image or sync from your design files. You can add a caption, which will also serve as alt text for the image.

 

Edit and delete rules

You can select any configuration of Do's, Don'ts and Cautions. To edit the content type of an existing rule:

1) Hover over the rule and click the ...

2) Choose the type from the options

Rules block options

 

Change the layout

You can toggle between a grid view and full-width stacked view.

1) Hover over any of the rules and click the gear icon for Rules settings

2) Choose from the layout options

Rules block settings menu

Change the background color

You can change the background color to be either red/green or neutral.

1) Hover over the image or design and click the ...

2) Choose from the background color options

Settings for rules block

Toggle shadow

1) Hover over the image or design and click the ...

2) Toggle the Image shadow option

Image shadow function toggled on

Add custom colors

This feature is available on all Professional and Enterprise plans.

You can customize the colors for your Rules blocks. There are two ways to add it:

1) Go to Styleguide settings

2) Under Appearance, go to Rule colors

3) Select your custom colors

👉 Note: Once you pick your colors in the Appearance settings, you will always get the option to select your custom rule colors or the neutral color.

Add custom colors to rules in the styleguide settings

OR

1) Select Customize colors from the block options when you create a rule block

Customize colors function in the block options

Quick tips

  • The maximum limit for image captions is 52 characters depending on the characters used.
  • We recommend keeping the image captions short. Explanation text is better suited for the main text area for rules.

Was this article helpful?