Updated the UG document for Card Component

blazor/card/action-buttons.md

@@ -9,9 +9,9 @@ documentation: ug
 
 # Action Buttons in Blazor Card Component
 
-You can include action buttons within the Card and customize them. Action button is a `div` element with `CardFooter` component followed by button tag or anchor tag within the card root element.
+The Blazor Card component provides support for adding and customizing action buttons within its structure. Action buttons are typically placed in the `CardFooter` section of the Card. This document explains how to add these buttons and control their alignment.
 
-For adding action buttons, you can create a  `CardFooterContent` component within the card action element.
+Action buttons are rendered within the `CardFooter` section. A single button or multiple buttons can be defined directly inside the `CardFooterContent` of the `CardFooter` component. The CardFooterContent is a `RenderFragment` property that accepts any Blazor UI elements.
 
 ```cshtml
 @using Syncfusion.Blazor.Cards
@@ -27,21 +27,29 @@ For adding action buttons, you can create a  `CardFooterContent` component withi
 
 ## Vertical
 
-By default, action buttons are aligned horizontally. They can also be aligned vertically by adding the `Orientation` property.
+By default, action buttons within the `CardFooter` are aligned horizontally. To align them vertically, set the `Orientation` property of the `SfCard` component to `CardOrientation.Vertical`.
 
 ```cshtml
 @using Syncfusion.Blazor.Cards
 @using Syncfusion.Blazor.Buttons
-
+<div style="height:300px;">
 <SfCard ID="HugeImage" Orientation="CardOrientation.Vertical">
-    <CardImage Image="images/cards/steven.png"/>
-    <CardHeader Title="Harrisburg Keith" SubTitle="@CardSubTitle"/>
+    <CardImage Image="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net9/images/cards/steven.png"/>
+    <CardHeader Title="Harrisburg Keith"/>
     <CardContent Content="Hi, I'm creative graphic design for print, new media based in Edenbridge"/>
     <CardFooter>
         <CardFooterContent>
             <SfButton CssClass="e-btn e-outline e-primary">FOLLOW US</SfButton>
         </CardFooterContent>
     </CardFooter>
 </SfCard>
+</div>
+<style>
+   .e-card-image {
+   width: 150px !important;
+    margin-left: 35vw;
+   }
+    </style>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVUWVrhVdfXSDrA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZByXarSVsIBkeKz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+![Blazor Card Component with Vertical Orientation](images/vertical-card.png)

blazor/card/card-image.md

@@ -13,40 +13,53 @@ documentation: ug
 
 ## Images
 
-The Card supports to include images within the elements, you can add image as direct element anywhere inside card root by adding the `CardImage` component . Using the class defined, you can write CSS styles to load images to that element.
+The Blazor Card component supports the inclusion of images using the [`CardImage`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cards.CardImage.html) component. The element can be added directly within the structure to display an image.
 
 N> By default, card images occupies full width of its parent element.
 
+The CardImage supports direct specification of the image source using its `Image` property. Additionally, it can include an `Alt` property for improved accessibility, providing alternative text for the image.
+
 ```cshtml
 @using Syncfusion.Blazor.Cards
 
 <SfCard>
-    <CardImage/>
+    <CardImage Image="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net9/images/cards/steven.png"/>
 </SfCard>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVgihBBLRBjgnKM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLyDOroLVSvaiee?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+![Blazor Card Component with Image](images/image-card.png)
 
 ### Title
 
 Card image is supported to include a `Title` property for the image. By default, Title is placed over the image on left-bottom position with overlay.
 
 ```cshtml
 @using Syncfusion.Blazor.Cards
-
-<SfCard>
-    <CardHeader Title="JavaScript"></CardHeader>
-    <CardContent>
-        JavaScript Succinctly was written to give readers an accurate, concise examination
-        of JavaScript objects and their supporting nuances, such as complex values, primitive
-        values scope, inheritance, the head object, and more.
-    </CardContent>
+@using Syncfusion.Blazor.Buttons
+<div style="height:300px;">
+<SfCard ID="HugeImage" Orientation="CardOrientation.Vertical">
+    <CardImage Image="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net9/images/cards/steven.png" Title="Harrisburg Keith"/>
+    <CardContent Content="Hi, I'm creative graphic design for print, new media based in Edenbridge"/>
+    <CardFooter>
+        <CardFooterContent>
+            <SfButton CssClass="e-btn e-outline e-primary">FOLLOW US</SfButton>
+        </CardFooterContent>
+    </CardFooter>
 </SfCard>
+</div>
+<style>
+   .e-card-image {
+   width: 150px !important;
+    margin-left: 35vw;
+   }
+    </style>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVUihLBhHVhadTB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthSDkhSrqrkBjAB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+![Blazor Card Component Image with Title](images/image-Title.png)
 
 ## Divider
 
-Divider used to separate the elements inside the card. You can add divider inside the card elements to separate it. Set `EnableSeparator` property to `true` in card content for adding a divider.
+Dividers are used to visually separate elements within the Card. To add a divider below a `CardContent` component, set its [`EnableSeparator`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cards.CardContent.html#Syncfusion_Blazor_Cards_CardContent_EnableSeparator) property to `true`.
 
 ```cshtml
 @using Syncfusion.Blazor.Cards
@@ -68,4 +81,5 @@ Divider used to separate the elements inside the card. You can add divider insid
 </SfCard>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhqsVBBLnBeVrnG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhqsVBBLnBeVrnG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+![Blazor Card Component with Divider](images/Divider-card.png)