# GM - RelatedList Cards

## **Documentation**

**GM - RelatedList Cards** component is used to display a related list as cards. This component is relevant for small related lists.

**Use case:** Display the list of payment methods as cards on the account page.

## **Specification**

**GM - RelatedList Cards** component has the same properties as **GM - RelatedList Tabs**.  Custom Actions will be displayed as dropdown menu.

## **API Reference**

{% tabs fullWidth="true" %}
{% tab title="RelatedListCardComponent.design" %}

```xml
<design:component label="GM - RelatedList Cards">
    <design:attribute name="recordId" label="recordId" 
                      description="recordId to use. Keep this empty if you want to use the current record"/>        
    <design:attribute name="relatedListLabel" label="Related List Label" 
                      description="The label defined in the layout page. Ex. Contacts to display contact list on account page"/>    
    <design:attribute name="rowLimit" label="Row Limit" 
                      description="The maximum number of row to fetch"/>    
    <design:attribute name="filter" label="Filter" 
                      description="Json string to define filter criteria. Don’t forget __c for custom fields. Ex. {'StageName':'Needs Analysis'} to see only 'Needs Analysis' Opportunities"/>    
    <design:attribute name="sort" label="Sort" 
                      description="The field list to sort the data grid. This field is used only for the initial load. Don’t forget __c for custom fields. Ex. Amount to sort opportunities by amount"/>
    <design:attribute name="order" label="Order" 
                      description="Asc or Desc order for sorting"/>       
    
    <design:attribute name="labelField" label="Label Field" 
                      description="Label Field for section title "/>    
    <design:attribute name="recordFields" label="Record Fields" 
                      description="Record Fields to display"/>    
     <design:attribute name="layoutColumns" label="# of Columns" 
                      description="# of Columns for record layout"/>
    <design:attribute name="recordRelated" label="Record Related Components" 
                      description="Json string to initialize related components"/>    
      
    <design:attribute name="canUpdate" label="Can Update Object" 
                      description="Check this option if you want to update object"/>    
    <design:attribute name="canDelete" label="Can Delete Object" 
                      description="Check this option if you want to delete object"/>        
    <design:attribute name="canCreate" label="Can Create Object" 
                      description="Check this option if you want to create object"/> 
    
    <design:attribute name="recordActions" label="Actions" 
                      description="JSON Record Actions"/>            
    
    <design:attribute name="customIcon" label="Custom Icon" 
                      description="Customize the card icon. All lightning icons are supported. You can get the icon name from https://lightningdesignsystem.com/icons/"/> 
    <design:attribute name="showBorder" label="Show Border" 
                      description="Show Border"/> 
    <design:attribute name="height" label="Component Height" 
                      description="Set the component height"/>     
</design:component>
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gridmate.io/package-reference/components-library/gm-relatedlist-cards.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.