> ## Documentation Index
> Fetch the complete documentation index at: https://botpress-charmenta-pr-705.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-charmenta-pr-705/b7UTf6Z3o4Ynfrz3/studio/concepts/cards/assets/cards.png?fit=max&auto=format&n=b7UTf6Z3o4Ynfrz3&q=85&s=6449419df0d6c5a94e831ee0dfb406db" width="1436" height="462" data-path="studio/concepts/cards/assets/cards.png" />

  <img alt="Cards" className="hidden dark:block" src="https://mintcdn.com/botpress-charmenta-pr-705/b7UTf6Z3o4Ynfrz3/studio/concepts/cards/assets/cards-dark.png?fit=max&auto=format&n=b7UTf6Z3o4Ynfrz3&q=85&s=170e48b6edffed27694db8ba294aace1" 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-charmenta-pr-705/b7UTf6Z3o4Ynfrz3/studio/concepts/cards/assets/card-inspector.png?fit=max&auto=format&n=b7UTf6Z3o4Ynfrz3&q=85&s=e7c26d583b86c3e29454e701a7cf26cd" 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-charmenta-pr-705/b7UTf6Z3o4Ynfrz3/studio/concepts/cards/assets/card-inspector-dark.png?fit=max&auto=format&n=b7UTf6Z3o4Ynfrz3&q=85&s=d2bc2540edebf94ac6e0bd0fc62f039f" 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>