Assets alone don't tell the full story. Notes, Guides and Banners add the context your audience needs—explanations, instructions, and usage rules that make your Kit actually useful.
Only Kit Editors can add contextual information.
Notes
Notes are flexible content blocks for any kind of explanation or context. Simply drag the Note content block from the Insert Panel to your Canvas, then add your text.
What to include
Introductions - Set context at the start of a Page
Instructions - Explain how to use Assets
Callouts - Highlight important information
Descriptions - Explain what visitors are looking at
Formatting options
Notes support rich text formatting:
Bold and italic
Headings (H1, H2)
Bulleted and numbered lists
Links
Blockquotes
Horizontal rules
Inline code
Styling Notes
Customize how Notes appear using the Action Menu/Display panel:
Card color - Apply semantic background colors:
None - no background or padding
Neutral - General content or less emphatic information
Info - Informational callouts
Warning - Cautions or important notices
Success - Confirmations or best practices
Size - From Thumbnail to Full Width
Tip: you can customize the preset colors in your theme. Read How Theming Works to learn more.
Banners
Banners are images that provide visual context alongside your Assets—think hero images, section dividers, or illustrative examples. Unlike regular Assets, Banners aren't meant to be downloaded and used; they're there to support and enhance your Kit's presentation.
When to use Banners
Banners work well for:
Page introductions - Set the tone with a hero image at the top of a Page
Visual dividers - Break up content with illustrative imagery
Context images - Show Assets in real-world applications
Mood boards - Display inspirational imagery that supports your content
Banners vs. Assets
Banners are actually just assets that are preconfigured with display settings to look like banners. This is such a common use case that we included the banner block on the insert panel to save a few clicks.
After you've created a banner, you can always adjust the display settings using the Action Menu to change size, alignment, and allow downloads just like any other asset block.
Guides
Guides are specialized content blocks for usage rules. They're perfect for brand guidelines, do's and don'ts, and specifications.
Adding a Guide
Navigate to the Page where you want to add a guideline
Drag a Guide content block from the Insert Panel
Choose Do or Don't
Add your text and optional image
Do vs. Don't
Every Guide is marked as either Do or Don't:
Do (green with checkmark)
Approved usage and best practices
"Maintain clear space around the logo"
"Use the primary logo on light backgrounds"
Don't (red with X)
Prohibited usage to prevent mistakes
"Don't place the logo on busy backgrounds"
"Don't rotate or distort the logo"
Toggle between Do and Don't using the Action Menu—look for the toggle in the Display Panel.
Text-only or with imagery
Guides can be text-only or include an image:
Text-only - Best for specifications and rules:
Color values
File format requirements
Size guidelines
With images - Best for visual examples:
Correct vs. incorrect usage
Placement demonstrations
Before/after comparisons
Toggle between modes using the Action Menu.
Supported image formats: JPG, PNG, HEIC, WEBP, SVG, TIFF
Where to place Guides
Put Guides near the content they refer to:
Logo guidelines in your Logos Page
Color rules in your Colors Page
Typography specs with your Fonts
Making Guides effective
Be specific - "Minimum size: 24px" beats "Don't make it too small"
Use examples - Show correct and incorrect usage
Keep it scannable - People skim; make key points stand out
Prioritize - Put the most important rules first
Code Snippets
While code snippets are actually created as an asset, in some cases they can be used to support you assets. Perhaps you are including code snippets for web developers to implement icons or other assets in a web project. You can use the display options to adjust the size and alignment of code snippets to fit your layout needs.