Search

Rules block

Chi
Chi
  • 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: 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 not available on Free or Starter plans. Want this and other premium features? Update your plan here.
You can customize the colors for your Rules blocks. Head over to the theme editor to update your choices.

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.
  • There is no image ratio for Rules blocks as the height will adapt to your image.

Was this article helpful?