How to Add Content Blocks

Content Blocks make your Guidelines super-useful! Add content blocks for color, typography, icons, and more stuff.

Updated over a week ago

How to add Content Blocks?

  1. Activate the Edit Mode & Click on the + button

  2. Add a Content Block (e.g., Color Swatches)

Content Block Filter Search

The intelligent filter system of the content block adder allows you to search through it using keywords such as ‘Text’ for a text block/columns or words related to the kind of block you want to add.

Smooth Navigation

You can navigate the different search results with your keyboard and quickly select the one you need in your Guidelines by pressing Enter.

Different Types of Content Blocks

Find below all the different content blocks you can use to document your brand. Note that the more complex ones are explained in a dedicated help article. Click on the respective link to learn more about them.

Most used Blocks

These are the type of blocks users most commonly use.

Formatting

These blocks are the type that adds any kind of formatting to a text.

  • The Table block: allows you to organize your text or data.

  • Personal Note: this helps you to add a comment, suggestions, or any remark on the Guidelines.

Colors

  • Color Scale: Prioritize your colors in the context of each other, set accents, and create contrasts.

  • Color Swatch: Download all your colors in ASE, LESS, and SCSS format.

Typography

  • Typo Styles: Define the combined usage of text and background colors, fonts, font sizes, and line heights

  • Font Kit: Let's you download fonts in your Guidelines as a compact zip file.

Media

  • Image Block: Add images to your Guidelines by uploading them or picking them from your libraries using the Asset Chooser.

  • Annotations Block: Describe your visuals by adding captions and notes.

  • Video Block: Add videos to your Guidelines.

  • Audio Block: Include Audio files in your Guidelines.

  • Embed Block: Allows you to add the URL of any third-party tool, e.g., Loom, Miro Figma, etc., that you want to document and share in your Brand Guidelines. Using the asset chooser, you can add any existing external assets you've already created as part of a project to your Brand Guidelines.

  • Icon Library Block: Add icon libraries with their collections directly into the Guidelines.

  • Template Block: Add a template from the Template Library to enable users to create their own publications.

UI & Code

  • UI Pattern Block: Define and share user interface design patterns

  • Snippet Block: Document and share your code snippets

  • Attributes Block: Enrich code attributes with additional descriptions

  • Developer Kit Block: Download patterns, fonts, icons, and colors with one click

  • Do & Don't Block: Let your users know what is wanted or not by placing two separate columns of what is required.

  • Storybook Block: StoryBook patterns can be easily viewed using this block.

Sharing

The Sharing blocks are used when sharing files or assets within the Guidelines.

If you have questions about using the different blocks, please don't hesitate to contact us. We're happy to help.

Happy documenting!

Did this answer your question?