> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://www.glideapps.com/docs/essentials/components/collections/card/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://www.glideapps.com/_mcp/server.

# Card

> Display a list of items in a card layout

The **Card Component** is a special type of [Collection Component](/docs/essentials/components/collections) that allows you to display items in a grid. It's a great choice when you want images to be the focus in your list like with collections of homes, products, or digital art. When users click on a card, more details about that item are displayed.

![card - image 1](/docs/_fern-img/4cc69bd4016de934a9a82dfc7a02de6a86c2da5f634a10c72589d638dee8d73e.webp)

## **Adding and Setting Up Card Collections**

#### Card - Arcade 1

To set up your Card Collection:

In the [**Layout Editor**](/docs/getting-started/intro-to-layout) of your app, click the plus (**+**) symbol to add a new component.

Find **Collections** in the menu and select **Card**.

Choose what [**Data Source**](/docs/essentials/data-sources) it should use.

Give the collection a **Title**.

Customize your collection with **Data** and **Design**.

Choose if you'd like to limit the number of items that appear, as well as how many items to show per page.

Set [**Visibility Conditions**](/docs/reference/user-experience/visibility-conditions) for your data if needed.

To update your Card Collection, go to the [**Components**](/docs/essentials/components) section, click on your collection, and make your desired changes. You can preview each change live as you make adjustments.

## **Adding an Action to your Collection**

#### Card - Arcade 2

You can add [**Actions**](/docs/getting-started/introduction-to-actions) to your Card Collection to allow users to interact with your data. For example, you can add a [**Button**](/docs/essentials/components/button) that takes users to a detailed view of a record or opens a form to submit information to you.

Select your Card Collection, then go to the **Actions** menu on the right side.

Choose **Enable advanced actions.**

Choose where to add the action.

Choose from our menu of actions, or create your own custom action.

Take your new action for a test run!

## Frequently Asked Questions

#### Can I limit the number of items displayed in my collection?

Yes, you can set the number of items displayed in your collection by using the **Limit** setting in the Collection component.

#### How can I get notified when a new item is added?

Yes, add an action step when a new item is added to send a [Slack](/docs/automation/integrations/slack) message, email, or any other notification Glide supports through [Actions](/docs/automation/actions) and [Integrations](/docs/automation/integrations).

> Display a list of items in a card layout