Content Blocks | Knapsack Documentation

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

Learn how to enhance your documentation by adding dynamic content blocks.

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

Creates a callout banner to share pertinent information with the user.

Divider Block

Create an hr element for separating content on the page.

Shortcuts Block

Organizes a collection of one or more tiles to represent links.

Table Block

The table block allows you to organize data in a structured format.

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

Showcase all the variants of a single component.

Figma Tiles Block

Showcase specific items from your design source.

Guidelines Block

Give examples of how particular components should be used and common mistakes to avoid.

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

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

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

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

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

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

The Framer Block enables you to embed Framer content, providing a way to showcase interactive prototypes and design assets.

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

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

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

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

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

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

Add and manage images for your documentation. This block is ideal for showcasing visual content and illustrations that complement your documentation.

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

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

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

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

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

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

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.