> For the complete documentation index, see [llms.txt](https://docs.virbe.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.virbe.ai/dashboard-management/conversation-flows/nodes/action-nodes/cards-from-table.md).

# Cards from Table

The Cards from Table node displays images from your data tables in a visually appealing card format. Cards are interactive elements that will be displayed in the touchpoint interface (web widget or kiosk) and that users can interact with (click on) during conversations.

#### Setting up cards:

1. Select source data table
2. Choose image column
3. Select name/title column
4. Configure sorting options
5. Set up filtering if needed

Example:

```
Data Table: Product catalog
Image (to display on the card): Product photo
Name (will be displayed on the card): Product name

Filter settings:
- Filter by: Product name
- Condition: Equals
- Match By: Context Variable
- Variable: {{user.product}} (previously stored user selection)
- Max records: 1 or more for multiple options, depends on the use case
```

<figure><img src="/files/R9a54lKrwbsL0vk4g1Ad" alt=""><figcaption><p>Example of Cards from Table configuration</p></figcaption></figure>

Consider filtering the results shown on cards based on user's previous inpur saved as variable:

<figure><img src="/files/vX60mjloMFczOYG8CXft" alt="" width="375"><figcaption><p>Cards from Table: add filtering based on user's previous inpur saved as variable</p></figcaption></figure>

#### Common use cases:

* Product listings
* Service options
* Plan comparisons
* Team member profiles
* Location details
* Event schedules

#### How are cards displayed on the touchpoints:

* Web

<figure><img src="/files/TFZ41mOf975WoHclKoK1" alt="" width="188"><figcaption><p>Cards on web widget (floating)</p></figcaption></figure>

<figure><img src="/files/uLsJRHha3LMeRiatHNIP" alt=""><figcaption><p>Cards on web widget (fullscreen)</p></figcaption></figure>

* Kiosk

<figure><img src="/files/91gLWVGPyWOQ5QFd9JfD" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="info" %}
**Important considerations:**

* Ensure data table is properly structured
* Select relevant display fields
* Configure visual elements carefully
* Test card appearance across devices
* Consider loading performance
* Plan user interactions with cards
  {% endhint %}