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

# Get to know the designer

> Overview of the palette, canvas, settings, autosave, data, and the toolbar.

# Get to know the designer

The designer is split into three work areas: building blocks on the left, the card itself in the middle, and settings on the right.

## The palette on the left

The palette has four groups:

* **Content** — Heading, Text, Stat tiles, Table, Property list, and Alert;
* **CRM data** — Associated records, Pipeline status, Report, Chart, and Status tag;
* **Actions** — Buttons, CRM action, and Input field;
* **Structure** — Row/column, Accordion, Panel, Repeater, Divider, Image, Link, and Empty state.

Click a building block to add it at the bottom of the active step. Drag it to choose the exact position. A dimmed building block cannot be used in the card's chosen HubSpot placement.

## The card in the middle

The middle area shows the card at the natural width for its placement. You can:

* click a building block to select it;
* drag building blocks up, down, or into a structure building block;
* see a dashed marker where it will be placed;
* switch between steps if the card uses a flow;
* see shared content, step-specific content, and submit actions separately.

The designer allows at most 100 building blocks in the whole card. Structure blocks can be nested up to four levels deep.

## Settings on the right

With no building block selected, the panel shows Card settings: name, object, placement, saved form data, organization template, and steps.

With a building block selected, the panel shows:

* the building block's own fields;
* **Shown on step**, if the card has steps;
* **Visibility** for conditional display;
* validation errors for that specific building block;
* **Remove building block**.

The settings vary by building block. See the relevant page under [Building blocks](/components/index).

## The toolbar

At the top, you can normally:

* go back to the dashboard;
* rename the card;
* open **Connected systems**;
* see whether the draft is **Saving...** or **Saved**;
* use **Undo** and **Redo**;
* open **Preview**;
* open **Publish**.

If the card has validation errors, an error indicator appears. Click it to select the first relevant building block.

## Autosave and concurrent changes

Changes are saved automatically after a short pause. When you navigate back, Card Studio tries to save any pending change immediately.

Wait for **Saved** before closing the browser tab. If another version of the draft has been saved at the same time, the server may reject an outdated revision rather than silently overwriting it.

## Keyboard and editing

* Delete removes the selected building block.
* Cmd/Ctrl+Z undoes.
* Shift+Cmd/Ctrl+Z redoes.

The undo history covers inserting, moving, nesting, deleting, and changes to settings. It resets when another card is opened.