Skip to content

Commit 438709f

Browse files
VengateshManirajVengateshManiraj
authored
Merge pull request #6704 from syncfusion-content/983366-card
Updated the UG document for Card Component
2 parents 809f949 + f6ea1b4 commit 438709f

14 files changed

+131
-117
lines changed

‎blazor/card/action-buttons.md‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ documentation: ug
99

1010
# Action Buttons in Blazor Card Component
1111

12-
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.
12+
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.
1313

14-
For adding action buttons, you can create a `CardFooterContent` component within the card action element.
14+
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.
1515

1616
```cshtml
1717
@using Syncfusion.Blazor.Cards
@@ -27,21 +27,29 @@ For adding action buttons, you can create a `CardFooterContent` component withi
2727

2828
## Vertical
2929

30-
By default, action buttons are aligned horizontally. They can also be aligned vertically by adding the `Orientation` property.
30+
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`.
3131

3232
```cshtml
3333
@using Syncfusion.Blazor.Cards
3434
@using Syncfusion.Blazor.Buttons
35-
35+
<div style="height:300px;">
3636
<SfCard ID="HugeImage" Orientation="CardOrientation.Vertical">
37-
<CardImage Image="images/cards/steven.png"/>
38-
<CardHeader Title="Harrisburg Keith" SubTitle="@CardSubTitle"/>
37+
<CardImage Image="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net9/images/cards/steven.png"/>
38+
<CardHeader Title="Harrisburg Keith"/>
3939
<CardContent Content="Hi, I'm creative graphic design for print, new media based in Edenbridge"/>
4040
<CardFooter>
4141
<CardFooterContent>
4242
<SfButton CssClass="e-btn e-outline e-primary">FOLLOW US</SfButton>
4343
</CardFooterContent>
4444
</CardFooter>
4545
</SfCard>
46+
</div>
47+
<style>
48+
.e-card-image {
49+
width: 150px !important;
50+
margin-left: 35vw;
51+
}
52+
</style>
4653
```
47-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVUWVrhVdfXSDrA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
54+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZByXarSVsIBkeKz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
55+
![Blazor Card Component with Vertical Orientation](images/vertical-card.png)

‎blazor/card/card-image.md‎

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,40 +13,53 @@ documentation: ug
1313

1414
## Images
1515

16-
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.
16+
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.
1717

1818
N> By default, card images occupies full width of its parent element.
1919

20+
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.
21+
2022
```cshtml
2123
@using Syncfusion.Blazor.Cards
2224
2325
<SfCard>
24-
<CardImage/>
26+
<CardImage Image="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net9/images/cards/steven.png"/>
2527
</SfCard>
2628
```
27-
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVgihBBLRBjgnKM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
29+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLyDOroLVSvaiee?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
30+
![Blazor Card Component with Image](images/image-card.png)
2831

2932
### Title
3033

3134
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.
3235

3336
```cshtml
3437
@using Syncfusion.Blazor.Cards
35-
36-
<SfCard>
37-
<CardHeader Title="JavaScript"></CardHeader>
38-
<CardContent>
39-
JavaScript Succinctly was written to give readers an accurate, concise examination
40-
of JavaScript objects and their supporting nuances, such as complex values, primitive
41-
values scope, inheritance, the head object, and more.
42-
</CardContent>
38+
@using Syncfusion.Blazor.Buttons
39+
<div style="height:300px;">
40+
<SfCard ID="HugeImage" Orientation="CardOrientation.Vertical">
41+
<CardImage Image="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net9/images/cards/steven.png" Title="Harrisburg Keith"/>
42+
<CardContent Content="Hi, I'm creative graphic design for print, new media based in Edenbridge"/>
43+
<CardFooter>
44+
<CardFooterContent>
45+
<SfButton CssClass="e-btn e-outline e-primary">FOLLOW US</SfButton>
46+
</CardFooterContent>
47+
</CardFooter>
4348
</SfCard>
49+
</div>
50+
<style>
51+
.e-card-image {
52+
width: 150px !important;
53+
margin-left: 35vw;
54+
}
55+
</style>
4456
```
45-
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVUihLBhHVhadTB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
57+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BthSDkhSrqrkBjAB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
58+
![Blazor Card Component Image with Title](images/image-Title.png)
4659

4760
## Divider
4861

49-
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.
62+
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`.
5063

5164
```cshtml
5265
@using Syncfusion.Blazor.Cards
@@ -68,4 +81,5 @@ Divider used to separate the elements inside the card. You can add divider insid
6881
</SfCard>
6982
7083
```
71-
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhqsVBBLnBeVrnG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
84+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhqsVBBLnBeVrnG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
85+
![Blazor Card Component with Divider](images/Divider-card.png)

0 commit comments

Comments
 (0)