Help Center

Top article results

    Rules block

    Rules block

    Photo of Brienne Wong

    Brienne Wong

    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. Want this and other premium features? Update your plan here.

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