> For the complete documentation index, see [llms.txt](https://docs.gridmate.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gridmate.io/package-reference/components-library/gm-record-card.md).

# GM - Record Card

## **Documentation**

**GM - Record Card** component is used to display a card of a related object. The related object could be at any level. The component can be configured to display a list of fields for a simple scenario or layout configuration for complex pages.

**Use case:** Display the ultimate account details on the contact page.

## **Specification**

<table data-full-width="true"><thead><tr><th width="198.33333333333331">Property</th><th width="151">Type</th><th>Description</th></tr></thead><tbody><tr><td>Card Title *</td><td>String</td><td>The card title to display</td></tr><tr><td>Card Icon</td><td>String</td><td>The card icon. All lightning icons are supported. You can get the icon name from <a href="https://lightningdesignsystem.com/icons/">https://lightningdesignsystem.com/icons/</a></td></tr><tr><td>Object Name *</td><td>String</td><td>The name of the related object to display.</td></tr><tr><td>Record Id Field *</td><td>String</td><td>The name of the lookup field to display. If you want to display an account card, set this property to AccountId.</td></tr><tr><td>Record Fields</td><td>String</td><td><p>Record Fields to display in a JSON format. For instance, for an account card, we can set it to:</p><p><code>["Name", "Website","BillingCity"]</code> </p><p></p><p>This property is ignored if Record Layout property is defined.</p></td></tr><tr><td>Record Actions</td><td>String</td><td><p>Record actions to apply. You can leverage your existing quick actions.</p><p></p><p>The configuration wizard can be used to build the list of actions. See <a href="https://docs.gridmate.io/package-reference/grid-configuration#actions-property">Actions Configuration</a></p></td></tr><tr><td># of columns</td><td>Integer</td><td># of columns for the layout. This property is ignored if Record Layout property is defined.</td></tr><tr><td>Display Mode</td><td>String</td><td>Display mode (edit, view, readonly).</td></tr><tr><td>Show Border</td><td>Boolean</td><td>Check this option if you wish to add a border to the card.</td></tr><tr><td>Record Layout</td><td>String</td><td>Record Layout to display. See <a href="/pages/-MEsvHLwumQ1XXyxcXrG">GM - Record Layout</a></td></tr><tr><td>Show Actions as Buttons</td><td>Boolean</td><td><p>Check this option if you wish to display actions as buttons instead of icons.</p><p>When the actions are displayed as icons, we can define the icon on JSON actions configuration using the icon attribute.</p></td></tr><tr><td>Visible Actions</td><td>Integer</td><td><p>Set the number of visible custom actions. All the core actions will always be displayed depending on the configuration of course. </p><p>The remaining custom actions will be added as an option on the button menu.</p></td></tr></tbody></table>

## **API Reference**

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

```xml
<design:component label="GM - Record Card">
    <design:attribute name="title" label="Card Title" 
                      description="Card Title"/>
    <design:attribute name="icon" label="Card Icon" 
                      description="Card Icon"/>
    <design:attribute name="showBorder" label="Show Border" 
                      description="Show record card border"/>       
    
    <design:attribute name="targetObjName" label="Object Name" 
                      description="Object Name to load"/>    
    <design:attribute name="recordIdField" label="Record Id Field" 
                      description="Record Id Field to load" />
    
    <design:attribute name="recordFields" label="Record Fields" 
                      description="Record Fields to display"/>
    <design:attribute name="columns" label="# of columns" 
                      description="# of Columns for the layout"/>    
    <design:attribute name="mode" label="Display Mode" 
                      description="Display mode (edit, view, readonly)"/>            
    
    <design:attribute name="recordLayout" label="Record Layout" 
                      description="JSON Record Layout"/>
    
    <design:attribute name="recordActions" label="Record Actions" 
                      description="JSON Record Actions"/>        
    <design:attribute name="buttonActions" label="Show Actions as Buttons" 
                      description="Use buttons for actions instead of icons"/>
    <design:attribute name="visibleActions" label="Visible Actions" 
                      description="# of visible actions"/> 
</design:component>
```

{% endtab %}
{% endtabs %}