Callout blocks

Brienne Wong
Brienne Wong
  • Updated

You can add a callout block to your styleguide to highlight important information. This could be useful for release notes, warnings, or other messages. For example:

Callout block example

Use callout blocks

Adding a callout block

You can add a callout block from the toolbar:

Callout function hovered over in the zeroheight toolbar.

Using markdown

Callouts support markdown including headers (h1/h2/h3), bullet-point lists, and code formatting. The full list is available here.

callout block

Toggling to full-width

You can change the background color by choosing the settings option and toggling Full width. The text will also adapt to be full width as well.

Settings show full width setting toggled on

Changing the background color

You can change the background color by choosing the settings option and picking between the four colors available for your team.

Settings shows options to change the background colors

Customizing the background color

If you are on a zeroheight Enterprise plan you can choose which four colors your team can use. The colors are available in the styleguide settings:

Custom callout block color options in the styleguide settings

When you change the colors the new colors will appear in the callout block settings instead:

Custom callout block colors appear in the callout block settings

FAQs

Can I reset the colors?

Yes, you can reset to the default colors from the styleguide settings by clicking Reset to defaults:

Reset to default option shown in the styleguide settings

I don't see 'callout block colors' in the settings

To customize the background colors you need to be on our Enterprise plan.

Was this article helpful?