Content Blocks
Overview
Blocks provide a way to add different kinds of content to your documentation site, such as text and media, markdown-formatted text, galleries, and more.
Knapsack offers a range of content blocks to choose from, including System Blocks for embedding design system assets into your documentation and Embed Blocks for including third-party assets and resources.
Blocks give you a lot of flexibility and control over your documentation content, enabling you to add different types of content and organize your pages to meet your needs.
Learn how to enhance your documentation by adding dynamic content blocks.
Discover how to efficiently manage and organize your content blocks.
Types of content blocks
Knapsack provides a range of content blocks that can be used for embedding content and third-party resources directly within your system documentation:
Basic Blocks
This section provides a range of fundamental content blocks that enhance the structure and readability of your documentation. These blocks allow you to share important information, separate content, create links, organize data, and add rich textual content.
Creates a callout banner to share pertinent information with the user.
Create an hr element for separating content on the page.
Organizes a collection of one or more tiles to represent links.
The table block allows you to organize data in a structured format.
Add rich textual content to your design system documentation.
Design Blocks
This section provides detailed guidance on how to incorporate various design elements into your documentation. These blocks allow you to visually showcase your design components and provide valuable guidelines for their usage, ensuring consistency and clarity across your design system.
Showcase all the variants of a single component.
Showcase specific items from your design source.
Give examples of how particular components should be used and common mistakes to avoid.
Showcase and Customize Your Design Tokens with Flexible Display Options.
Embed Blocks
The “Embed Blocks” section provides a variety of blocks that allow you to embed external content directly into your documentation. These blocks enhance your documentation by integrating interactive and visual elements from various third-party platforms.
The iFrame Block allows you to embed any web page or web content using an iframe. This block is versatile and can be used to display content from any website that supports embedding.
The Abstract Block enables you to embed designs and assets from Abstract. This block is perfect for showcasing design files and collaborative workspaces directly within your documentation.
The Adobe XD Block lets you embed Adobe XD designs and prototypes. This block is ideal for showcasing interactive design work and prototypes created in Adobe XD, allowing for seamless collaboration and presentation within your documentation.
The Airtable Block allows you to embed Airtable bases and views. This block is useful for integrating and displaying structured data and project management tools from Airtable.
The Figma Block lets you embed Figma files, prototypes, and components. This block is ideal for displaying design work and interactive prototypes, making it easy to collaborate on design projects.
The Framer Block enables you to embed Framer content, providing a way to showcase interactive prototypes and design assets.
The Lucidchart Block allows you to embed Lucidchart diagrams and flowcharts. This block is useful for displaying visual representations of processes, workflows, and organizational structures.
The Vimeo Block lets you embed Vimeo videos. This block is perfect for adding visual and multimedia content to your documentation, enhancing engagement and information delivery.
The YouTube Block enables you to embed YouTube videos. This block allows you to incorporate instructional videos, presentations, and other visual content from YouTube.
The Whimsical Block allows you to embed Whimsical wireframes, mind maps, and diagrams. This block is useful for displaying visual planning and brainstorming tools directly within your documentation.
Media Blocks
This section offers a variety of blocks that allow you to incorporate different types of media into your documentation. These blocks enhance your documentation by adding interactive elements, visual content, and code examples, making it more engaging and informative for users.
Add file attachments to your docs that users can download. Once you’ve added the Attachments Block, you can upload a file or add a URL link to a file hosted elsewhere.
The Code Snippet Block provides syntax highlighting for a variety of programming languages. This block is perfect for displaying code examples with proper formatting and readability, making it easier for users to understand and utilize the provided code.
Add and manage images for your documentation. This block is ideal for showcasing visual content and illustrations that complement your documentation.
Seamlessly integrate videos into your documentation.
Pattern Blocks
This section provides tools to visually represent and organize the patterns in your design system. These blocks help you display comprehensive views of your design patterns, making it easier for users to understand and navigate through your system’s components.
Display a grid of the patterns in your design system. This block arranges your design patterns in a visually appealing grid format, allowing users to quickly browse and identify different components.
Display a table of the patterns in your design system. This block organizes your design patterns in a tabular format, providing a clear and structured overview of each pattern’s status, making it easier to track and manage the components within your system.
A Powerful Tool for Customizing and Displaying Pattern Variations. A versatile tool that enables you to explore and customize pattern variations within your Knapsack workspace.
Automatically Document and Display Component Variations as They Evolve. By automatically reflecting changes in props, this block eliminates the need to manually update “old stories” or demos, keeping your documentation in sync with the latest component versions.
Display Component Specifications Anywhere in Your Documentation. Whether you’re documenting a specific pattern or providing details on its structure and behavior, this block allows you to seamlessly embed your component’s spec wherever needed.
Other Blocks
This section includes additional blocks that provide flexibility and customization options for your documentation.