# Count Cards

Count cards allow you to define cards directly against the [collection](/umbraco-ui-builder/13.latest/collections/overview.md) configuration, providing a basic **where clause** to use in a count SQL statement. These work perfectly for basic data visualizations based on counts of entities in a collection.

If you need to do more than a basic count, you'll want to take a look at the [custom cards](/umbraco-ui-builder/13.latest/cards/custom-cards.md) documentation.

## Adding a count card to a collection

Cards allow you to display basic summaries of key information that may be useful to the editor.

### **AddCard(string name, Lambda whereClauseExpression, Lambda cardConfig = null) : CardConfigBuilder**

Adds a card with the given name and **where clause** filter expression. Expression must be a `boolean` expression.

```csharp
// Example
collectionConfig.AddCard("Older than 30", p => p.Age > 30, cardConfig => {
    ...
});
```

### **AddCard(string name, string icon, Lambda whereClauseExpression, Lambda cardConfig = null) : CardConfigBuilder**

Adds a card with the given name + icon and **where clause** filter expression. Expression must be a `boolean` expression.

```csharp
// Example
collectionConfig.AddCard("Older than 30", "icon-umb-users", p => p.Age > 30, cardConfig => {
    ...
});
```

### Change the color of a count card

#### **SetColor(string color) : CardConfigBuilder**

Sets the color of the card.

```csharp
// Example
cardConfig.SetColor("blue");
```

### Add a suffix to a count value

#### **SetSuffix(string suffix) : CardConfigBuilder**

Sets the suffix of the card value.

```csharp
// Example
cardConfig.SetSuffix("years");
```

### Formatting the value of a count

#### **SetFormat(Lambda formatExpression) : CardConfigBuilder**

Sets the format expression for the card.

```csharp
// Example
cardConfig.SetFormat((v) => $"{v}%");
```


---

# 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.umbraco.com/umbraco-ui-builder/13.latest/cards/count-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.