Skip to main content

​
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 blockUse it for
HeadingA section title with an optional chip
TextHelper text and dynamic sentences
Stat tilesUp to four key values
TableRows from associations or external systems
Property listHubSpot properties from the current record
AlertHighlighted info, success, warning, or error

​
CRM data

Building blockUse it for
Associated recordsHubSpot’s native association table
Pipeline statusThe record’s progression through a pipeline
ReportAn existing HubSpot report
ChartA bar or line chart from a list
Status tagA compact colored status

​
Actions

Building blockUse it for
ButtonsSequences of Card Studio actions
CRM actionHubSpot’s built-in note, task, email, and meeting flows
Input fieldCollecting and validating user input

​
Structure

Building blockUse it for
Row/columnPlacing child blocks side by side or stacked
AccordionHiding secondary content
PanelOpening details in an overlay
RepeaterRepeating content for each row in a data list
DividerVisual separation
ImageAn image from an HTTPS address
LinkNavigation to an address
Empty stateExplaining when data or content is missing

​
Placement matrix

Building blockMiddle columnSidebarPreviewHelp 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.