> For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://docs.knapsack.cloud/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server. # 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. #### [Adding Blocks](/documentation/blocks-overview/adding-blocks) Learn how to enhance your documentation by adding dynamic content blocks. #### [Managing Blocks](/documentation/blocks-overview/managing-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. #### [Callout Block](/documentation/blocks-overview/managing-blocks/callout-block) Creates a callout banner to share pertinent information with the user. #### [Divider Block](/documentation/blocks-overview/managing-blocks/divider-block) Create an hr element for separating content on the page. #### [Shortcuts Block](/documentation/blocks-overview/managing-blocks/shortcuts-block) Organizes a collection of one or more tiles to represent links. #### [Table Block](/documentation/blocks-overview/managing-blocks/table-block) The table block allows you to organize data in a structured format. #### [Text Block](/documentation/blocks-overview/managing-blocks/text-block) 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. #### [Figma Component Block](/documentation/blocks-overview/managing-blocks/figma-component-block) Showcase all the variants of a single component. #### [Figma Tiles Block](/documentation/blocks-overview/managing-blocks/figma-tiles-block) Showcase specific items from your design source. #### [Guidelines Block](/documentation/blocks-overview/managing-blocks/guidelines-block) Give examples of how particular components should be used and common mistakes to avoid. #### [Design Tokens Block](/documentation/blocks-overview/managing-blocks/design-tokens-block) 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. #### [iFrame Block](/documentation/blocks-overview/embed-blocks#iframe-block) 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. #### [Abstract Block](/documentation/blocks-overview/embed-blocks#abstract-block) 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. #### [Adobe XD Block](/documentation/blocks-overview/embed-blocks#adobe-xd-block) 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. #### [Airtable Block](/documentation/blocks-overview/embed-blocks#airtable-block) 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. #### [Figma Block](/documentation/blocks-overview/embed-blocks#figma-block) 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. #### [Framer Block](/documentation/blocks-overview/embed-blocks#framer-block) The Framer Block enables you to embed Framer content, providing a way to showcase interactive prototypes and design assets. #### [Lucidchart Block](/documentation/blocks-overview/embed-blocks#lucidchart-block) 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. #### [Vimeo Block](/documentation/blocks-overview/embed-blocks#vimeo-block) 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. #### [YouTube Block](/documentation/blocks-overview/embed-blocks#youtube-block) The YouTube Block enables you to embed YouTube videos. This block allows you to incorporate instructional videos, presentations, and other visual content from YouTube. #### [Whimsical Block](/documentation/blocks-overview/embed-blocks#whimsical-block) 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. #### [Attachments Block](/documentation/blocks-overview/embed-blocks/attachments-block) 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. #### [Code Snippet Block](/documentation/blocks-overview/embed-blocks/code-snippet-block) 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. #### [Image Gallery Block](/documentation/blocks-overview/embed-blocks/image-block) Add and manage images for your documentation. This block is ideal for showcasing visual content and illustrations that complement your documentation. #### [Video Block](/documentation/blocks-overview/embed-blocks/video-block) 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. #### [Patterns Grid Block](/documentation/blocks-overview/embed-blocks/patterns-grid-block) 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. #### [Patterns Status Table Block](/documentation/blocks-overview/embed-blocks/patterns-status-table-block) 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. #### [Template Playground](/documentation/blocks-overview/embed-blocks/template-playground) 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. #### [Template Variants](/documentation/blocks-overview/embed-blocks/template-variants) 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. #### [Pattern Spec](/documentation/blocks-overview/embed-blocks/pattern-spec) 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. #### [Markdown Block](/documentation/blocks-overview/embed-blocks/markdown-block) The Markdown Block allows you to add custom content using Markdown syntax. This block supports a wide range of formatting options, enabling you to create rich text content, lists, links, images, and more. It offers a versatile way to incorporate customized and detailed information into your documentation.