> ## Documentation Index
> Fetch the complete documentation index at: https://botpress-pb-update-api.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Cards

Cards are drag-and-drop elements that **perform tasks within a [Node](/studio/concepts/nodes)**:

<Frame>
  <img alt="Cards" className="block dark:hidden" src="https://mintcdn.com/botpress-pb-update-api/dB6fsns919bYYGbE/studio/concepts/cards/assets/cards.png?fit=max&auto=format&n=dB6fsns919bYYGbE&q=85&s=6c19518395ac8e542a78661d12f93d58" width="1436" height="462" data-path="studio/concepts/cards/assets/cards.png" />

  <img alt="Cards" className="hidden dark:block" src="https://mintcdn.com/botpress-pb-update-api/dB6fsns919bYYGbE/studio/concepts/cards/assets/cards-dark.png?fit=max&auto=format&n=dB6fsns919bYYGbE&q=85&s=3d80f172b780d94308f0569738990967" width="1436" height="462" data-path="studio/concepts/cards/assets/cards-dark.png" />
</Frame>

You can use Cards to:

<CardGroup cols="3">
  <Card title="Send messages" href="/studio/concepts/cards/send-messages">
    Send text, images, and other content to users
  </Card>

  <Card title="Control Workflow logic" href="/studio/concepts/cards/flow-logic">
    Transition to another Workflow
  </Card>

  <Card title="Execute code" href="/studio/concepts/cards/execute-code">
    Add custom JavaScript code to your Workflow
  </Card>
</CardGroup>

This section contains documentation for all Cards in the Studio.

## Add a Card

1. Select **+ Add Card** on any Node to open the Card tray.
2. Select any Card to add it to your Node.

<Note>
  Not all Cards work with every type of Node. The Card tray will only display Cards that are compatible with the Node you've selected.
</Note>

<Tip>
  When you install an integration, its Cards will become available in the Card tray. Check out the [integrations documentation](/integrations/get-started/introduction) for more information on integration-specific Cards.
</Tip>

## Configure a Card

You can access a Card's configuration options by selecting the Card after adding it to your Workflow. This will open the Card's inspector in the Studio's right panel:

<Frame>
  <img alt="Card inspector" className="block dark:hidden" src="https://mintcdn.com/botpress-pb-update-api/dB6fsns919bYYGbE/studio/concepts/cards/assets/card-inspector.png?fit=max&auto=format&n=dB6fsns919bYYGbE&q=85&s=00933d6f60703a3efb9c03c8cc1749e7" width="1440" height="474" data-path="studio/concepts/cards/assets/card-inspector.png" />

  <img alt="Card inspector" className="hidden dark:block" src="https://mintcdn.com/botpress-pb-update-api/dB6fsns919bYYGbE/studio/concepts/cards/assets/card-inspector-dark.png?fit=max&auto=format&n=dB6fsns919bYYGbE&q=85&s=a8515895c07625e33ae8deaf65dccb92" width="1440" height="474" data-path="studio/concepts/cards/assets/card-inspector-dark.png" />
</Frame>

The Card's configuration fields could be either mandatory or optional—mandatory fields are marked with <span style={{ color: 'rgba(189, 59, 56, 1)' }}>\*</span>.

<Note>
  If no Card is selected, Studio's right panel displays the [Emulator](/studio/concepts/emulator). When a Card is selected, you can toggle between the **Inspector** and the **Emulator** tabs.
</Note>