​

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.

​

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.