# Avatar Group

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

## Tutorials

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>How to build an account contacts list</strong></td><td>Generate a list of contacts using the Avatar Group</td><td></td><td><a href="/files/vbsaRlgxpTcs1bI8yksS">/files/vbsaRlgxpTcs1bI8yksS</a></td><td><a href="https://youtu.be/Px9Cjyno_BM">https://youtu.be/Px9Cjyno_BM</a></td></tr></tbody></table>

***

## Changing the properties

### General

To configure the avatar group, customize the look and feel by setting up `Variant`, `Size`, `Layout` and `Max Count`.

### Data Source

Data Source is where the avatar group will come to life. &#x20;

#### Manual

`Manual` data source allows you to create your avatars manually without any link to Salesforce data.&#x20;

#### Variable

`Variable` gives you the ability to create avatars dynamically by assigning any source collection available in your flow. By selecting a source collection, you can define a data mapping for each attribute of the avatar group.&#x20;

For example, the primary text attribute can be linked to the full name field to display the record's full name next to the avatar.&#x20;

### Interactions

From the interactions tab, define if you would like to define an action when a user click on an avatar. For example, on avatar click navigate the user to the appropriate record id. The interaction would be something like this:&#x20;

<table><thead><tr><th width="214">Setting</th><th>Value</th></tr></thead><tbody><tr><td>Type</td><td>Navigate</td></tr><tr><td>Page Refecence type </td><td>Record Page</td></tr><tr><td>Object API Name</td><td>The desired object</td></tr><tr><td>Record ID</td><td>Item: Name</td></tr><tr><td>Action Name</td><td>View</td></tr></tbody></table>

***

## Examples

The following examples demonstrate some of the available functionality for Avatar Group.

### Stack

<figure><img src="/files/jQN1FkIKOLe0wRXl2o7V" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="214">Property</th><th>Value</th></tr></thead><tbody><tr><td>Variant</td><td>Circle</td></tr><tr><td>Size</td><td>Large</td></tr><tr><td>Layout</td><td>Stack</td></tr><tr><td>Max Count</td><td>5</td></tr></tbody></table>

### Grid

<figure><img src="/files/ap1K4EFDqK42anT31sUL" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="214">Property</th><th>Value</th></tr></thead><tbody><tr><td>Variant</td><td>Square</td></tr><tr><td>Size</td><td>Large</td></tr><tr><td>Layout</td><td>Grid</td></tr><tr><td>Max Count</td><td>5</td></tr><tr><td>Data Source</td><td>Variable</td></tr><tr><td>Data Mapping / Fallback icon</td><td>avatar</td></tr><tr><td>Status Position</td><td>Top Right</td></tr><tr><td>Presence Type</td><td>Online</td></tr><tr><td>Presence Position</td><td>Top Right</td></tr></tbody></table>

### List

<figure><img src="/files/tLSQlJYofkz8nLdgjzTu" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="214">Property</th><th>Value</th></tr></thead><tbody><tr><td>Variant</td><td>Square</td></tr><tr><td>Size</td><td>Large</td></tr><tr><td>Layout</td><td>List</td></tr><tr><td>Max Count</td><td>5</td></tr><tr><td>Data Source</td><td>Variable</td></tr><tr><td>Data Source / Fallback icon</td><td>Contact</td></tr><tr><td>Primary Text</td><td>Full Name</td></tr><tr><td>Secondary Text</td><td>Title</td></tr><tr><td>Tags / Label</td><td>Mailing City</td></tr><tr><td>Tags / Variant</td><td>Default</td></tr></tbody></table>


---

# 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.avonnicomponents.com/flow/flow-components/avatar-group.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.