UI Builder: Updated articles in the Cards section

15/umbraco-ui-builder/cards/count-cards.md

@@ -1,68 +1,103 @@
 ---
-description: Configuring count cards in Umbraco UI Builder, the backoffice UI builder for Umbraco.
+description: Learn how to configure count cards in Umbraco UI Builder.
 ---
 
 # Count Cards
 
-Count cards allow you to define cards directly against the [collection](../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.
+Count cards allow you to define cards directly against the [Collection](../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](custom-cards.md) documentation.
+If you need to do more than a basic count, see the [Custom Cards](custom-cards.md) article.
 
-## Adding a count card to a collection
+## Adding a Count Card to a Collection
 
-Cards allow you to display basic summaries of key information that may be useful to the editor.
+Count cards display basic summaries of key information that may be useful to the editor.
 
-### **AddCard(string name, Lambda whereClauseExpression, Lambda cardConfig = null) : CardConfigBuilder**
+### Using the `AddCard()` Method
 
-Adds a card with the given name and **where clause** filter expression. Expression must be a `boolean` expression.
+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
-// Example
 collectionConfig.AddCard("Older than 30", p => p.Age > 30, cardConfig => {
     ...
 });
 ````
 
-### **AddCard(string name, string icon, Lambda whereClauseExpression, Lambda cardConfig = null) : CardConfigBuilder**
+### 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.
 
-Adds a card with the given name + icon and **where clause** filter expression. Expression must be a `boolean` expression.
+#### Method Syntax
+
+```cs
+AddCard(string name, string icon, Lambda whereClauseExpression, Lambda cardConfig = null) : CardConfigBuilder
+```
+
+#### Example
 
 ````csharp
-// Example
 collectionConfig.AddCard("Older than 30", "icon-umb-users", p => p.Age > 30, cardConfig => {
     ...
 });
 ````
 
-### Change the color of a count card
+### Change the Color of a Count Card
+
+#### Using the `SetColor()` Method
+
+Sets the color for the count card.
 
-#### **SetColor(string color) : CardConfigBuilder**
+#### Method Syntax
 
-Sets the color of the card.
+```cs
+SetColor(string color) : CardConfigBuilder
+```
+
+#### Example
 
 ````csharp
-// Example
 cardConfig.SetColor("blue");
 ````
 
-### Add a suffix to a count value
+### Add a Suffix to a Count Value
+
+#### Using the `SetSuffix()` Method
+
+Sets a suffix to be displayed alongside the card value.d
+
+#### Method Syntax
 
-#### **SetSuffix(string suffix) : CardConfigBuilder**
+```cs
+SetSuffix(string suffix) : CardConfigBuilder
+```
 
-Sets the suffix of the card value.
+#### Example
 
 ````csharp
-// Example
 cardConfig.SetSuffix("years");
 ````
 
-### Formatting the value of a count
+### Formatting the Value of a Count
+
+#### Using the `SetFormat()` Method
+
+Sets a custom format for the card's value.
+
+#### Method Syntax
 
-#### **SetFormat(Lambda formatExpression) : CardConfigBuilder**
+```cs
+SetFormat(Lambda formatExpression) : CardConfigBuilder
+```
 
-Sets the format expression for the card.
+#### Example
 
 ````csharp
-// Example
 cardConfig.SetFormat((v) => $"{v}%");
 ````

15/umbraco-ui-builder/cards/custom-cards.md

@@ -1,16 +1,16 @@
 ---
-description: Configuring custom cards in Umbraco UI Builder, the backoffice UI builder for Umbraco.
+description: Learn how to configure custom cards in Umbraco UI Builder.
 ---
 
 # Custom Cards
 
-Custom cards allow you to perform more complex metric calculations and are defined via a class implementing the `Card` base class.
+Custom cards enable more complex metric calculations and are defined by a class that implements the `Card` base class.
 
-When Umbraco UI Builder resolves a card it will attempt to do so from the global DI container. This means you can inject any dependencies that you require for your card to calculate its value. If there is no type defined in the DI container, Umbraco UI Builder will fall-back to manually instantiating a new instance of value mapper.
+When Umbraco UI Builder resolves a card, it tries to do so from the global DI container. This means you can inject any dependencies required for the card's value calculation. If no type is found in the DI container, Umbraco UI Builder will fall back to manually instantiating a new instance of the value mapper.
 
-## Defining a custom card
+## Defining a Custom Card
 
-To define a card you create a class that inherits from the base class `Card` and configure it within the constructor like so.
+To define a custom card, create a class that inherits from the base class `Card` and configure it in the constructor as shown below:
 
 ````csharp
 // Example
@@ -33,30 +33,44 @@ The required configuration options are:
 
 * **Name:** The name of the card.
 * **Alias:** A unique alias for the card.
-* **GetValue(object parentId = null):** A method to get the cards value.
+* **GetValue(object parentId = null):** A method to retrieve the card's value.
 
-Additional optional configuration options are:
+The optional configuration options are:
 
-* **Icon:** An icon to display in the card.
+* **Icon:** An icon displaed in the card.
 * **Color:** The color of the card.
-* **Suffix:** A suffix to display after the card value.
+* **Suffix:** The suffix displayed after the card value.
 
-## Adding a custom card to a collection
+## Adding a Custom Card to a Collection
 
-### **AddCard<TCardType>() : CollectionConfigBuilder&lt;TEntityType&gt;**
+### Using the `AddCard()` Method
 
-Adds a card of the given type to the collection.
+Adds a custom card of the specified type to the collection.
+
+#### Method Syntax
+
+```cs
+AddCard() : CollectionConfigBuilder<TEntityType>
+```
+
+#### Example
 
 ````csharp
-// Example
 collectionConfig.AddCard<AvgPersonAgeCard>();
 ````
 
-### **AddCard(Type cardType) : CollectionConfigBuilder&lt;TEntityType&gt;**
+### Using the `AddCard(Type cardType)` Method
 
-Adds a card of the given type to the collection.
+Adds a custom card of the specified type to the collection, using the `Type` parameter to pass the card type dynamically.
+
+#### Method Syntax
+
+```cs
+AddCard(Type cardType) : CollectionConfigBuilder<TEntityType>
+```
+
+#### Example
 
 ````csharp
-// Example
 collectionConfig.AddCard(typeof(AvgPersonAgeCard));
 ````

15/umbraco-ui-builder/cards/overview.md

@@ -1,14 +1,14 @@
 ---
-description: Configuring cards in Umbraco UI Builder, the backoffice UI builder for Umbraco.
+description: Learn how to configure cards in Umbraco UI Builder.
 ---
 
 # Cards
 
-Cards provide an API to display basic summary information in a card-based format and are useful for displaying key metrics about a collection.
+Cards provide an API to display summary information in a card-based format, which is useful for displaying key metrics about a collection.
 
 ![Cards](../images/cards.png)
 
-Cards can be defined in one of two ways:
+Cards can be defined in two ways:
 
 {% content-ref url="count-cards.md" %}
 [Count Cards](count-cards.md)