Integration Card
ProA card displaying a third-party app integration with its icon, name, short description, and a connect/disconnect button. Used on integrations pages and marketplace listings to let users browse and manage connected services.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | ||
| Connected | Card with a green "Connected" status and "Disconnect" option. | Show for integrations the user has already activated. |
Usage Guidelines
Do
Show the app icon prominently for quick visual recognition.
Don't
Auto-connect integrations without explicit user action.
Do
Include a one-line description of what the integration does.
Don't
Hide the disconnect option — users must be able to revoke access easily.
Do
Indicate connection status clearly with both colour and text.
Don't
Use only the app icon without a text name — not all icons are recognisable.
Code
Design Tokens
Accessibility
- App icon uses an empty alt="" since the name is provided as text.
- Card heading (h3) allows screen readers to navigate between integrations.
- Connect/Disconnect buttons have descriptive labels — "Connect Slack", not just "Connect".