# Configuring the Cards Element GudHub CRM lets you display app records as individual cards using the **Cards** element. Each card can contain images, text, links, coordinates, and other information relevant to your workflow. The appearance of the cards depends on the selected view. This allows you to customize how information is arranged and display anything from a brief record summary to more detailed information. In this guide, we’ll cover the main **Cards** settings, how to open records, and how to sort and filter cards. ## Step-by-Step Guide to Configuring Cards in GudHub CRM For this example, we’ll use an app where records are displayed as cards with images and titles. We’ll customize their appearance and configure what happens when a card is clicked. ### Step 1. Open the Element Settings Open the app containing the cards and navigate to **“Field Settings”** for the **Cards** element. Here, you can select the data source and view, adjust the dimensions, and configure other display options. ![scr1](https://app.gudhub.com:443/userdata/41557/1225386.png) ### Step 2. Select the App That Contains the Data In the app selection field (**“App”**), specify which app the records should come from. This can be the current app or another app you have access to. ![scr2](https://app.gudhub.com:443/userdata/41557/1225387.png) For this example, we’ll keep the current app. If you select a different one, the cards will display records from that app. ### Step 3. Choose the Card Layout In the first view selection field, specify which record view should appear inside each card. We recommend selecting **“Short info”** for the most suitable card layout. ![scr3](https://app.gudhub.com:443/userdata/41557/1225388.png) ### Step 4. Set the Card Width Choose a width from the available options. The width should suit the content of the card: a compact layout is sufficient for a short summary, while a form with several fields may require more space. If you select **“100%”**, each card will take up the full available width of the container holding the **Cards** element. The cards will automatically adjust when the container’s width changes. For this example, we’ll choose a width that makes the images and titles easy to view while allowing several cards to fit side by side. ![scr6](https://app.gudhub.com:443/userdata/41557/1225389.png) ### Step 5. Set the Height of the Cards Area The next setting controls the height of the entire **Cards** element. It determines how much vertical space the cards area occupies on the page. If you choose a smaller value, only part of the content may be visible, and you’ll need to scroll to see the rest. Selecting **“100%”** allows the element to fill the available height of its container. ![scr20](https://app.gudhub.com:443/userdata/41557/1225390.png) Keep in mind that the height of each individual card depends on its content. This setting does not give all cards the same fixed height. ### Step 6. Configure Record Selection Enable **“Selected Items”** if you need to select cards, for example, to delete records later. Once enabled, a number will appear next to each card. Click the number to select the corresponding record. ![scr7](https://app.gudhub.com:443/userdata/41557/1225391.png) ![scr8](https://app.gudhub.com:443/userdata/41557/1225392.png) If you disable this option, the numbers will disappear and card selection will no longer be available. ### Step 7. Set the Sorting Order Under **“Sort Cards”**, select the field you want to use to sort the cards. For this example, we’ll use the record title field (**“Title”**). ![scr9](https://app.gudhub.com:443/userdata/41557/1225393.png) Next, use **“Items Order”** to choose the sorting direction. **“Ascending”** sorts values from lowest to highest, while **“Descending”** sorts them from highest to lowest. For titles, this means alphabetical or reverse-alphabetical order. Choose the desired direction and check the order of the cards. Sorting changes their order but does not hide any records. ![scr10](https://app.gudhub.com:443/userdata/41557/1225394.png) ## Configuring What Happens When a Card Is Clicked The Cards element lets you choose what happens when a user clicks a card. Depending on how you want to work with the data, you can open a record, display it in a dialog, or send a message to another element. ### Opening a Record Select **“Open Item”**. Then, under **“View Name”**, specify the view you want to open. ![scr11](https://app.gudhub.com:443/userdata/41557/1225395.png) For example, you can display compact cards with an image and title in the list, then open the full record form with all the necessary fields when a card is clicked. ![scr12](https://app.gudhub.com:443/userdata/41557/1225396.png) ### Opening a Record in a Dialog If you want to view a record in a pop-up window, select **“View Dialog”**. You’ll also need to specify the view under **“View Name”**. ![scr13](https://app.gudhub.com:443/userdata/41557/1225397.png) ![scr14](https://app.gudhub.com:443/userdata/41557/1225398.png) Clicking a card will open a dialog displaying the selected record view. To close it and return to the cards, click the **“X”**. ### Sending a Message to Another Element The **“Send Message”** option allows the Cards element to interact with other elements, such as **View Container**. ![scr15](https://app.gudhub.com:443/userdata/41557/1225399.png) After selecting this action, specify the app that should receive the message and the field within that app that will receive it. ![scr16](https://app.gudhub.com:443/userdata/41557/1225400.png) This setup can be used to display the corresponding record in a **View Container** when a card is clicked. The receiving element must also be configured to support this interaction. ## Grouping Cards Under **“Table Group”**, you can select a field to group records by. Despite its name, this setting applies to cards when used with the **Cards** element. For this example, we’ll select the title field. If two records have the same title, they will appear as a single grouped card. ![scr17](https://app.gudhub.com:443/userdata/41557/1225401.png) Grouping does not delete any records. If you remove this setting, each record will once again appear as a separate card. ## Filtering Cards Filters let you display only records that meet specific conditions. The configuration process is the same as for the **Table** element. In the filters section, select the field you want to filter by and specify a condition. For example, you can use the title field and enter ***“Underwater”*** as the value. ![scr18](https://app.gudhub.com:443/userdata/41557/1225402.png) ![scr19](https://app.gudhub.com:443/userdata/41557/1225403.png) Once the filter is applied, only cards with titles matching the condition will be displayed. If you remove the filter and no other restrictions are in place, all records from the selected app will appear again. Configured cards provide a convenient visual way to browse records and quickly access detailed information. You can adjust their appearance, dimensions, sorting, and filters at any time to suit your company’s workflows.