How to add and edit cards
Add cards to a journey map, edit their content, and use the card details panel to manage tags, personas, and comments.
Cards are how content lands on a journey map. Add them through the in-lane picker, edit them via the floating toolbar, and manage tags, personas, and comments from the card details panel.
In this guide
How to add a card
Each lane has a default card type that matches its purpose (a Text lane defaults to text cards, a Stage lane to stage cards, and so on), but any card type can sit in any lane.
Hover where you want the card
The + Add card button appears on hover at the position you point to: above, below, or between existing cards, or in an empty cell. Wherever the button shows is where the new card lands.
Click + Add card
The card type picker opens with a search box at the top, the lane's default card type as a quick-select (with an Enter shortcut), and two grouped sections below: BASIC CARDS (Image, Stage, Icons, Slider) and ADVANCED CARDS (Embed, Planning, Metric, Link journey map, Opportunity, Pain point, Solution, Custom Card). The button and picker are the same in every position.
Pick a card type
Press Enter to add the lane default, or click any type from the picker. Start typing in the search box to narrow the list. The new card appears in the slot and is ready to edit.
Picking Metric or a portfolio item type (Opportunity, Pain point, Solution, or a custom type) opens a picker of existing items instead of dropping an empty card. You can select several items there and add them in one go, and the confirm button shows the count, like Add 2.
Which card types appear in the picker depends on your plan. On lower plans, some advanced types are hidden.
Tip: Paste content from a spreadsheet to create multiple cards at once
If you're starting from rows in a spreadsheet, How to use enhanced paste covers the bulk-create flow.
How to edit a card
Click the card to select it
A blue outline appears around the card and the floating card toolbar opens above it. The card is in selected state, not edit state.
Click into the card body to edit text
On text and stage cards, clicking into the body puts you in inline edit mode. Type to add or change content. Other card types use their own modals or details-panel fields for editing (see Card types below).
Use the toolbar for everything else
Color, header, span, delete, duplicate, and the card details panel all open from the floating toolbar described in the next section.
Edits autosave as you type. Most card types have no Save button; metric cards and portfolio item cards are the exceptions and save their data via a Save button inside the card details panel.
The card toolbar
The toolbar floats above any selected card. The first four buttons (bold, font size, font family, list style) appear only on text and stage cards, where the body text is editable. Every card has the last five.
B
Bold
Toggles bold on the selected text. Text and stage cards only.
14
Font size
Sets the font size. Text and stage cards only.
A (serif)
Font family
Switches font. Text and stage cards only.
List icon
List style
Bullet or numbered list. Text and stage cards only.
Paint bucket
(color/styling)
Opens the color and background style picker. See Card color and background style.
Square with arrows
Show card details
Opens the card details panel on the right.
Trash
Delete card
Removes the card. Cmd+Z (or Ctrl+Z) undoes the delete.
Three-dot
(more)
Opens the overflow menu (Duplicate, Card details, Expand, Shrink, Delete).
The three-dot menu mirrors a few toolbar options and adds keyboard shortcuts. Duplicate has Cmd+D (or Ctrl+D). Expand widens the card by one column; Shrink narrows by one (greyed out when the card already spans a single column). Delete has the Delete key shortcut.
The card details panel
The card details panel slides in from the right and holds metadata that doesn't fit on the card face. Open it three ways:
Click Show card details (the square-with-arrows icon) on the card toolbar.
Click the three-dot menu and choose Card details.
Double-click the card.
The panel header shows the card's type (in the screenshot, Text). Three sections appear at the bottom of the panel on every card type, in this order:
Personas - Assigned personas appear as chips. Use Add a persona to assign more. For the dedicated flow, see How to assign a persona to a card.
Card tags - Card-level tags for filtering and grouping. + Add card tags opens the tag picker.
Comments - Comments on this card. The count in the heading reflects how many comments exist. See How to comment on a card.
For Text cards, those three sections are the whole panel. Other card types add per-type sections above Personas, where the card's specific data lives (an image and its caption for Image cards, a metric selector for Metric cards, a linked-item picker for Planning cards, and so on). The per-card-type articles linked under Card types cover those.
Card color and background style
Open the color picker by clicking the paint-bucket icon on the toolbar.
The picker has two parts:
Accent color - Seven primary swatches on the top row, five secondary swatches on the second (including a "no color" option with a red strikethrough). Brand colors set up for the account appear below. Accent color drives the colored bar at the bottom of the card.
Background style - Four named styles control how the card body fills:
Light background (default) - Soft tinted fill matched to the accent.
White background - Solid white card body, accent shown only on the bottom bar.
Solid background - The accent color fills the whole card body.
Transparent background - No fill, accent shown only on the bottom bar.
Changes apply immediately. There's no apply or save action on the picker.
Card header
A card header is an optional colored bar at the top of the card with a title and an icon. Headers help signal what kind of content the card holds (a touchpoint, a channel, a system) at a glance.
Open the Card header popover
With the card selected, click the Card header icon (small horizontal bar) on the toolbar.
Tick Enable
The header bar appears immediately on the card. The default text reads YOUR TITLE until you change it.
Type your title and pick a color and icon
The header's accent color is independent of the card body's accent. Click an icon from the grid to add one, or click View more to open the full library.
Close the popover
Click outside the popover to close it. The header stays on the card. To remove it later, reopen the popover and uncheck Enable.
Span a card across columns
Drag the right edge of a card to make it span more columns. The card snaps to column boundaries as you drag, so you can't leave it half-way across a column.
You can also span via the toolbar's three-dot menu: Expand widens the card by one column, Shrink narrows by one. Shrink is greyed out when a card already sits in a single column.
When you drag one stage card past another in the same lane, the other card moves to a new row in that lane so both stay visible.
Select multiple cards
Shift+click a second card while one is already selected to add it to the selection. The card toolbar above the individual cards disappears and a Bulk edit toolbar appears at the bottom of the viewport.
The bulk toolbar shows the count and card type ("2 text cards" here). When you mix card types in a selection, the formatting buttons drop off and only Tags, Persona, and Delete remain. For the full bulk-edit walkthrough including header, color, and font changes across many cards, see How to bulk edit cards.
Card types
Text card
Free-form text content. The default in Text lanes. See How to use text cards.
Stage card
Marks a stage across one or more columns. See How to use stage cards.
Image card
Display an image, optionally with a caption. See How to use image cards.
Slider card
Numeric slider for ratings or scores. See How to use slider cards.
Icon card
Choose from preset icon templates. See How to use icon cards.
Embed card
Embed external content (Figma, YouTube, Google Docs, and similar). See How to use embed cards.
Metric card
Show a live metric from a connected data source. See How to use metric cards.
Planning card
Link a work item from Jira, Asana, Linear, or another planning tool. See How to use planning cards.
Portfolio item card
Display an opportunity, pain point, solution, or custom portfolio item. See How to use portfolio item cards.
Linked journey map card
Link to another journey map and surface its summary. See How to use linked journey map cards.
Comments
Comments aren't a card type; they're available on every card. See How to comment on a card.
Related topics
Last updated