> 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.

# Guidelines Block

The Guidelines Block is designed to provide examples of how particular components should be used and to highlight common mistakes to avoid. This block helps ensure that your design components are used consistently and correctly, offering practical guidance and best practices for your team.

![](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/9e7022223dfd8685563460767b9aaedfcbf352dd5f4a0b884fdffe3b09cc11c3/docs/assets/images/fe6b621c-guidelines.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211434Z&X-Amz-Expires=604800&X-Amz-Signature=a47967758dfa6937e8b8959f49510980923f8e0baf3d09da7063528e57a184a5&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

Our Guidelines block consists of do's, don'ts, and cautions. Add as many as you need for your component to help your users create their best work.

***

### Adding Guidelines

When you first add a Guidelines block, we include a Do and a Don't tile. Below your guidelines is a row of quick add actions to add the specific type of Guideline you need.

![](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/3250b077fb66211bb6c79bdc071562bafb0eb895c56956256a3c7a41f18c909f/docs/assets/images/100375af-guidelines-adding.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211434Z&X-Amz-Expires=604800&X-Amz-Signature=6a006a0930800d1e7b62bf3defa2150df37c19d8eb63a4fb3536a1d682547d4a&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

***

### Managing Guidelines

Utilize the guideline menu for swift actions such as effortlessly adding, editing, or removing images. Modify the guideline type or seamlessly eliminate it altogether with ease.

![](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/d95b74c3cf6d914a8eda99abf06f9f09ea6ef16f8a60d5ea3a262fe83ba65364/docs/assets/images/2f60c97d-guidelines-controls.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211434Z&X-Amz-Expires=604800&X-Amz-Signature=73244cdde74b29d055d6e52c9a2a5187001247116b082aacaa5e52c86eb05604&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

***

### Guidelines Options

Hover over your block to expose the options trigger, then click to expand the options menu.

#### Grid Styles

##### **Columns**

Adjust the layout of the Guidelines block to fit your desired aesthetic:

* 4 Columns
* 3 Columns
* 2 Columns
* Full Width

***Default***: `2 Columns`

##### **Centered**

When you have an odd number of items, center the last item instead of aligning it to the left.

***Default***: `Off`

#### Tile Styles

##### **Image Size**

Adjust the height of the image container for all tiles within the block.

* Extra Small - 80px
* Small - 120px
* Medium - 180px
* Large - 270px
* Extra Large - 405px
* None - Don't show a

***Default***: `Large`

##### Image Outlined

Include a border on the image container.

***Default***: `On`

##### Image Rounded

Round the corners of the image container.

***Default***: `On`

##### Show header before image

By default, the header appears below the image. You can adjust this by toggling on *Show header before image*

***Default***: `Off`

![](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/26fac571a45979757a0020e05a04b3b3fdbd62bb0f7f5e2f74b392c092da8c53/docs/assets/images/2e727fd9-guidelines-options.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211434Z&X-Amz-Expires=604800&X-Amz-Signature=c567076829997585a4bd2d5fe2b7467c8eec3062103b2cde661343e4ef5d5dfc&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)