Content blocks are the building blocks of your guideline pages. You can use them to add and structure different types of content, including text, colors, typography, media, UI elements, code, and more.
Choose the block type that best matches the content you want to add, then edit and arrange it directly on the page.
Add a content block
In edit mode, hover over the page and select Block to add a new content block. You can also use the + button on an existing content block to insert a new content block directly after it. Next, choose the block type you want to add from the menu, or use the search field to find the type you need.
To learn how to edit, move, copy, reference, or delete content blocks after you add them, see Editing content in guidelines.
Find a content block
Use the search field at the top of the content block menu to find a specific block type or narrow down the available options. You can also use the arrow keys to move through the results and press Enter to select a content block.
Content block types
Content block types are grouped into sections to make them easier to find. The available options may vary depending on your setup and installed apps.
Note: The tables below show some of the core content block types available in Frontify by default. If you’re looking for more blocks, explore additional custom blocks in the Frontify marketplace.
Most used
These are the content block types most commonly used across guidelines. You’ll find more detail about each one in the relevant category below.
Formatting
Use these content blocks to structure and present text and information clearly.
Content block type | What to use it for |
Callout | Highlight key notices, tips, warnings, or brand rules inside distinct, colored alert boxes. |
Cards grid | Build modular, card-based layouts combining images, text overlays, ratios, and destination links. |
Divider | Add horizontal dividing lines (solid, dashed, dotted) or spacing buffers to visually separate content. |
Heading | Add dedicated section titles (H1–H4) that structure page content and automatically generate navigation links. |
Insert internal editorial notes, reminders, or draft remarks visible only to editors. | |
Quote | Feature pull quotes, brand statements, customer testimonials, or leadership remarks in styled typography. |
Organize data, technical specifications, and comparative matrices into rows and columns. | |
Text | Add formatted copy, paragraphs, bulleted/numbered lists, inline links, and embedded buttons. |
Colors
Use these content blocks to document, organize, and present brand colors and color systems.
Content block type | What to use it for |
Color scale | Visualize color hierarchies, tints, shades, and contrasting accents in context with one another. |
Offer downloadable digital color asset packages (such as ASE palettes for Adobe Creative Cloud, LESS, or SCSS files) for designers and developers. | |
Colors | Document brand color palettes with interactive color cards displaying HEX, RGB, CMYK, Pantone, and custom color spaces. |
Typography
Use these content blocks to document and present brand typography, including font families, styles, and type hierarchies.
Content block type | What to use it for |
Provide downloadable self-hosted brand font families as a ZIP file. | |
Showcase brand typography with character sets, font weights, and editable sample text. You can use uploaded custom fonts or connect Adobe Fonts. | |
Document typographic hierarchies such as headings, body text, quotes, including font size, weight, letter spacing, and line height. |
Tip: These blocks document typography for guideline viewers. To configure the default typography used across your guidelines, go to Typography on the powerbar while in edit mode.
Media
Use these content blocks to add and present media in your guidelines.
Content block type | What to use it for |
Add numbered pins, captions, and notes to images to explain visual details or brand rules. | |
Add audio files to your guidelines for users to play or download, such as sound logos, commercials, or audio snippets. | |
Embed third-party interactive content in your guidelines using a public HTTPS URL, such as Figma, Miro, Loom, or Spotify. | |
Icon library | Add collections from your icon library to your guidelines so users can browse and download icons. |
Add icon fonts from external sources so developers can preview and download icon font packages, including Fontastic, IcoMoon, or custom SVG ZIP files. | |
Add images to your guidelines by uploading them from your computer or selecting them from your media libraries. | |
Display multiple images in a multi-column layout with adjustable aspect ratios and spacing. | |
Embed and play interactive, high-performance animations in your guidelines using JSON vector files. | |
Add templates from your template library so users can create customized, on-brand publications. | |
Add videos to your guidelines by uploading video files or embedding video players. |
UI and code
Use these content blocks to document, demonstrate, and share UI components, code, and developer resources.
Content block type | What to use it for |
Attributes | Document component properties, CSS variables, and other parameters in structured tables. |
Embed live, interactive, and editable code playgrounds for frontend components. | |
Display formatted code snippets with syntax highlighting and programming language labels. | |
Developer kit | Provide downloadable packages of brand assets, such as icons, fonts, colors, and styling tokens. |
Show approved and unapproved uses of brand assets or patterns side by side. | |
Embed live, interactive Figma frames or synced SVG previews directly in your guidelines. | |
Display and inspect UI components and design system stories from a connected Storybook instance. |
Sharing
Use these content blocks to share files, packages, and other resources with guideline viewers.
Content block type | What to use it for |
Attachments | Add downloadable files, such as PDFs, ZIP files, or vector files directly to guideline pages or content blocks. |
File sharing | Create a dedicated download area where users can access brand assets and file packages. |
Note: Downloadable asset blocks from other sections as well as installed marketplace apps may also appear in this section for quick access.
Custom and developer blocks
Need a content block for a specific workflow or use case? You can build custom content blocks with the Brand SDK or install extensions from the Frontify marketplace. Custom blocks appear in the content block chooser once they’re installed or deployed.
Learn more in Getting started with the Brand SDK or visit the Frontify Developer Portal.