How to add Content Blocks?
Activate the Edit Mode & Click on the + button
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
Use your own fonts by using the Fonts Block. You can also add Adobe fonts.
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.
Image Grid Block: Add multiple images in a space.
Icon Webfont Block: Add icons from an outside source.
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
Code Sandbox 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!