Merge pull request #6930 from umbraco/ui-builder-collections

Updated articles as per styleguide

Author: eshanrnh

15/umbraco-ui-builder/collections/child-collection-groups.md

@@ -1,5 +1,5 @@
 ---
-description: Configuring child collection groups in Umbraco UI Builder, the backoffice UI builder for Umbraco.
+description: Configuring child collection groups in Umbraco UI Builder.
 ---
 
 # Child Collection Groups
@@ -12,27 +12,41 @@ A child collection group is a container for other child collections. Its purpose
 
 ![Child Collection Groups](../images/child_collection_groups.png)
 
-## Defining a child collection group
+## Defining a Child Collection Group
 
 You can define a child collection group by calling one of the `AddChildCollectionGroup` methods on a given collection config builder instance.
 
-### **AddChildCollectionGroup(string name, Lambda childCollectionGroupConfig = null) : ChildCollectionGroupConfigBuilder**
+### Using the `AddChildCollectionGroup()` Method
 
-Adds a child collection group to the current collection with the given name and default icon.
+Adds a child collection group to the current collection with the specified name and default icon.
+
+#### Method Syntax
+
+```cs
+AddChildCollectionGroup(string name, Lambda childCollectionGroupConfig = null) : ChildCollectionGroupConfigBuilder
+```
+
+#### Example
 
 ```csharp
-// Example
 collectionConfig.AddChildCollectionGroup("Family", childCollectionGroupConfig => {
     ...
 });
 ```
 
-### **AddChildCollectionGroup(string name, string icon, Lambda childCollectionGroupConfig = null) : ChildCollectionGroupConfigBuilder**
+### Using the `AddChildCollectionGroup()` Method with Custom Icon
+
+Adds a child collection group to the current collection with the specified name and custom icon.
+
+#### Method Syntax
+
+```cs
+AddChildCollectionGroup(string name, string icon, Lambda childCollectionGroupConfig = null) : ChildCollectionGroupConfigBuilder
+```
 
-Adds a child collection group to the current collection with the given name and icon.
+#### Example
 
 ```csharp
-// Example
 collectionConfig.AddChildCollectionGroup("Family", "icon-users", childCollectionGroupConfig => {
     ...
 });

15/umbraco-ui-builder/collections/child-collections.md

@@ -1,5 +1,5 @@
 ---
-description: Configuring child collections in Umbraco UI Builder, the backoffice UI builder for Umbraco.
+description: Configuring child collections in Umbraco UI Builder.
 ---
 
 # Child Collections
@@ -8,40 +8,52 @@ description: Configuring child collections in Umbraco UI Builder, the backoffice
 This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.
 {% endhint %}
 
-A child collection is a container for a given data model that is tied to a parent collection data model. It shares all of the [Collections](the-basics.md) config builder API except child collections cannot contain further child collections.
+A child collection is a container for data models that are tied to a parent collection. The child collection system shares the [Collections](the-basics.md) API, offering flexibility for managing and displaying related data within your backoffice UI.
 
 ![Child Collections](../images/child_collections.png)
 
-{% hint style="info" %}
-**Child Collections UI:** By default, child collections will be presented in the UI as context apps in the parent models editor view. If you have multiple child collections that make the context apps area overpopulated, you can use the [Child Collection Groups API](child-collection-groups.md). By using this you can group child collections under a single context app with the inner child collections then being presented in tabs.
-{% endhint %}
+By default, child collections are displayed as context apps within the parent model's editor view. If multiple child collections lead to an overcrowded context apps area, consider using the [Child Collection Groups API](child-collection-groups.md). Using the API, you can group related child collections under a single context app, with each child collection appearing in separate tabs.
+
+## Defining a Child Collection
+
+To define a child collection, use the `AddChildCollection` method on the given collection config builder instance.
 
-## Defining a child collection
+### Using the `AddChildCollection()` Method
 
-You define a child collection by calling one of the `AddChildCollection` methods on a given collection config builder instance.
+This method adds a child collection with the specified names, description, and default icons. Both the entity ID and foreign key fields must be specified using property accessor expressions.
 
-### **AddChildCollection<TChildEntityType>(Lambda idFieldExpression, Lambda fkFieldExpression, string nameSingular, string namePlural, string description, Lambda childCollectionConfig = null) : ChildCollectionConfigBuilder<TEntityType>**
+#### Method Syntax
+
+```cs
+AddChildCollection<TChildEntityType>(Lambda idFieldExpression, Lambda fkFieldExpression, string nameSingular, string namePlural, string description, Lambda childCollectionConfig = null) : ChildCollectionConfigBuilder<TEntityType>
+```
 
-Adds a child collection to the current collection with the given names and description and default icons. A property accessor expression is required for both the entity ID field and FK (Foreign Key) field of the entity.
+#### Example
 
 ```csharp
-// Example
 collectionConfig.AddChildCollection<Child>(c => c.Id, c => c.ParentId, "Child", "Children", "A collection of children", childCollectionConfig => {
     ...
 });
 ```
 
-### **AddChildCollection&lt;TChildEntityType&gt;(Lambda idFieldExpression, Lambda fkFieldExpression, string nameSingular, string namePlural, string description, string iconSingular, string iconPlural, Lambda childCollectionConfig = null) : ChildCollectionConfigBuilder&lt;TEntityType&gt;**
+### Using the `AddChildCollection()` Method with Custom Icons
+
+This method adds a child collection to the current collection with the specified names, description and custom icons. Both the entity ID and foreign key fields must be specified using property accessor expressions.
+
+#### Method Syntax
+
+```cs
+AddChildCollection<TChildEntityType>(Lambda idFieldExpression, Lambda fkFieldExpression, string nameSingular, string namePlural, string description, string iconSingular, string iconPlural, Lambda childCollectionConfig = null) : ChildCollectionConfigBuilder<TEntityType>
+```
 
-Adds a child collection to the current collection with the given names, description and icons. A property accessor expression is required for both the entity ID field and FK (Foreign Key) field of the entity.
+#### Example
 
 ```csharp
-// Example
 collectionConfig.AddChildCollection<Child>(c => c.Id, c => c.ParentId, "Child", "Children", "A collection of children", "icon-umb-users", "icon-umb-users", childCollectionConfig => {
     ...
 });
 ```
 
-## Configuring a child collection
+## Configuring a Child Collection
 
-Child collections share the same API as the `Collection` config builder API, except child collections cannot contain further child collections. For more information check the [core collections documentation](the-basics.md).
+Child collections share the same API as the `Collection` config builder API, except child collections cannot contain further child collections. For more information, see the [Basics](the-basics.md) article.