> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hubspotcards.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Card Studio building blocks

> Overview of all 22 building blocks, what they are for, and where they can appear in HubSpot.

# Card Studio building blocks

The palette contains 22 building blocks. They are no-code modules that each map to one or more of HubSpot's 87 raw UI components.

## Content

| Building block                             | Use it for                                   |
| ------------------------------------------ | -------------------------------------------- |
| [Heading](/components/heading)             | A section title with an optional chip        |
| [Text](/components/text)                   | Helper text and dynamic sentences            |
| [Stat tiles](/components/stat-tiles)       | Up to four key values                        |
| [Table](/components/data-table)            | Rows from associations or external systems   |
| [Property list](/components/property-list) | HubSpot properties from the current record   |
| [Alert](/components/alert)                 | Highlighted info, success, warning, or error |

## CRM data

| Building block                                      | Use it for                                  |
| --------------------------------------------------- | ------------------------------------------- |
| [Associated records](/components/association-table) | HubSpot's native association table          |
| [Pipeline status](/components/stage-tracker)        | The record's progression through a pipeline |
| [Report](/components/report)                        | An existing HubSpot report                  |
| [Chart](/components/chart)                          | A bar or line chart from a list             |
| [Status tag](/components/status-tag)                | A compact colored status                    |

## Actions

| Building block                              | Use it for                                              |
| ------------------------------------------- | ------------------------------------------------------- |
| [Buttons](/components/button-row)           | Sequences of Card Studio actions                        |
| [CRM action](/components/crm-action-button) | HubSpot's built-in note, task, email, and meeting flows |
| [Input field](/components/input)            | Collecting and validating user input                    |

## Structure

| Building block                         | Use it for                                    |
| -------------------------------------- | --------------------------------------------- |
| [Row/column](/components/layout)       | Placing child blocks side by side or stacked  |
| [Accordion](/components/accordion)     | Hiding secondary content                      |
| [Panel](/components/panel)             | Opening details in an overlay                 |
| [Repeater](/components/repeater)       | Repeating content for each row in a data list |
| [Divider](/components/divider)         | Visual separation                             |
| [Image](/components/image)             | An image from an HTTPS address                |
| [Link](/components/link)               | Navigation to an address                      |
| [Empty state](/components/empty-state) | Explaining when data or content is missing    |

## Placement matrix

| Building block       | Middle column | Sidebar | Preview | Help desk |
| -------------------- | :-----------: | :-----: | :-----: | :-------: |
| Heading              |       ✓       |    ✓    |    ✓    |     ✓     |
| Text                 |       ✓       |    ✓    |    ✓    |     ✓     |
| Stat tiles           |       ✓       |    ✓    |    ✓    |     ✓     |
| Table                |       ✓       |    ✓    |    ✓    |     ✓     |
| Property list        |       ✓       |    —    |    ✓    |     ✓     |
| Alert                |       ✓       |    ✓    |    ✓    |     ✓     |
| Associated records   |       ✓       |    —    |    ✓    |     ✓     |
| Pipeline status      |       ✓       |    —    |    ✓    |     ✓     |
| Report               |       ✓       |    —    |    ✓    |     ✓     |
| Chart                |       ✓       |    ✓    |    ✓    |     ✓     |
| Status tag           |       ✓       |    ✓    |    ✓    |     ✓     |
| Buttons              |       ✓       |    ✓    |    ✓    |     ✓     |
| CRM action           |       ✓       |    ✓    |    ✓    |     ✓     |
| Input field          |       ✓       |    ✓    |    ✓    |     ✓     |
| All structure blocks |       ✓       |    ✓    |    ✓    |     ✓     |

## Shared behavior

Every building block has a unique id. When a card has steps, a block can belong to one step or appear on all of them. Every block can have a visibility rule and can be removed from the right-hand panel or with Delete.

A card can contain up to 100 building blocks, including nested children. Row/column, accordion, and panel can each have up to 20 direct children; a repeater can have up to 10. The total nesting depth can be at most four levels.

## When a setting is missing

Some underlying HubSpot components or Card Studio schemas may technically have more properties than the ones the designer shows. The building block articles flag these differences. The user documentation describes the current designer as the supported path; editing JSON by hand is not part of the product's user flow.