Card
Overview
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.
Configuration
The card block can be configured with the following default fields:
| Field | Type | Description |
|---|---|---|
| Title | string | Content for the title heading |
| Body | rich text | Content for the body section |
| Complete label | string | Content for the complete button |
| Dismiss label | string | Content for the dismiss button |
You can also define a set of custom fields on a card block.
Transitions
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.
| Transition | Description |
|---|---|
| complete | Marks the card as completed |
| dismiss | Marks the card as dismissed |
Integrating
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.