Card
A bordered card with an icon, title, subtitle, hero image, body text, and actions.
card lays out a small piece of content (an icon or image, a title and subtitle, a hero image, body
text, and buttons) inside a bordered box. It’s a library-invented block, not part of the public
@slack/types package; use it standalone or as an item inside a carousel.
Fields
typestring
Always `card`.
stringicon?{ type: "image"; image_url: string; alt_text?: string }
A 36×36 rounded icon, left of the title and subtitle. Takes precedence over `slack_icon`.
{ type: "image"; image_url: string; alt_text?: string }slack_icon?{ type: "icon"; name: string }
One of Slack's icon-font glyphs. This library can't render the icon font, so it shows a neutral badge with the icon's name in a tooltip instead.
{ type: "icon"; name: string }title?PlainTextElement | MrkdwnElement
The card's bold title.
PlainTextElement | MrkdwnElementsubtitle?PlainTextElement | MrkdwnElement
Muted text under the title.
PlainTextElement | MrkdwnElementhero_image?{ type: "image"; image_url: string; alt_text?: string }
A full-width image above the header.
{ type: "image"; image_url: string; alt_text?: string }body?PlainTextElement | MrkdwnElement
The card's main text.
PlainTextElement | MrkdwnElementsubtext?PlainTextElement | MrkdwnElement
Fine print below the body.
PlainTextElement | MrkdwnElementactions?Element[]
Buttons and other interactive elements, rendered along the bottom of the card.
Element[]Examples
With and without a hero image
With and without an icon
With and without a subtitle
Dropping subtitle centers a lone title on the icon instead of stacking the two.
Subtext and multiple actions
A danger-styled button is always grouped to the left; every other button keeps its original order on
the right, regardless of where it appears in actions.
Interactivity
Each entry in actions is a standard interactive element, most often a button, and dispatches
Slack’s block_actions payload the same way an actions block does. Click a button
in any preview above and check the action log: onAction receives
{
"type": "button",
"action_id": "button_action",
"block_id": "<the card's block_id>",
"text": { "type": "plain_text", "text": "Action Button", "emoji": false },
"value": "…"
}alongside the full block_actions payload your app’s request URL would receive.