# Count Cards

Count cards allow you to define cards directly against the [Collection](/umbraco-ui-builder/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, see the [Custom Cards](/umbraco-ui-builder/cards/custom-cards.md) article.

## Adding a Count Card to a Collection

Count cards display basic summaries of key information that may be useful to the editor.

### Using the `AddCard()` Method

Adds a count card with the specified name and a where clause filter expression. The filter expression must be a `boolean` value.

#### Method Syntax

```cs
AddCard(string name, Lambda whereClauseExpression, Lambda cardConfig = null) : CardConfigBuilder
```

#### Example

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

### Using the `AddCard()` Method with Icon

Adds a count card with the specified name, an icon, and a where clause filter expression. The filter expression must be a `boolean` value.

#### Method Syntax

```cs
AddCard(string name, string icon, Lambda whereClauseExpression, Lambda cardConfig = null) : CardConfigBuilder
```

#### Example

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

### Change the Color of a Count Card

#### Using the `SetColor()` Method

Sets the color for the count card.

#### Method Syntax

```cs
SetColor(string color) : CardConfigBuilder
```

#### Example

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

### Add a Suffix to a Count Value

#### Using the `SetSuffix()` Method

Sets a suffix to be displayed alongside the card value.d

#### Method Syntax

```cs
SetSuffix(string suffix) : CardConfigBuilder
```

#### Example

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

### Formatting the Value of a Count

#### Using the `SetFormat()` Method

Sets a custom format for the card's value.

#### Method Syntax

```cs
SetFormat(Lambda formatExpression) : CardConfigBuilder
```

#### Example

```csharp
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/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.