Skip to main content


Card block


A card block is used to represent a card component in your flow.

Cards are simple but effective. And they’re super flexible. They can be used as contextual tips to teach concepts so users know how to use and get value from your product. They can also be used as an entry point to next steps, like giving users an opportunity to opt-in to a product tour. Or they can bring external content like docs and support into the product at the right time and place, powering a PLG motion.

Cards can be completed or dismissed. Completing a card could be attributed to clicking a "Continue" or "Got it" button. Dismissing a card could be attributed to clicking a close icon or a "Close" button.


The card block can be configured with the following default fields:

TitlestringContent for the title heading
Bodyrich textContent for the body section
Complete labelstringContent for the complete button
Dismiss labelstringContent for the dismiss button

You can also define a set of custom fields on a card block.


The card block has a fixed set of transitions that determine which path(s) to follow. These transitions map to card actions that a user can take.

completeMarks the card as completed
dismissMarks the card as dismissed


Get up and running quickly with the pre-built React card component. Compose and style this component to best fit your needs. Or use the card block headlessly and attach the card’s fields and state to your own card UI component.