Skip to content

Commit f284529

Browse files
praveensf4999praveensf4999
committed
983366: Updated the ug document for Card
1 parent 5bd3f65 commit f284529

File tree

8 files changed

+42
-25
lines changed

8 files changed

+42
-25
lines changed

‎blazor/card/action-buttons.md‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,24 @@ By default, action buttons within the `CardFooter` are aligned horizontally. To
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: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,29 +23,39 @@ The CardImage supports direct specification of the image source using its `Image
2323
@using Syncfusion.Blazor.Cards
2424
2525
<SfCard>
26-
<CardImage/>
26+
<CardImage Image="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net9/images/cards/steven.png"/>
2727
</SfCard>
2828
```
29-
{% 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)
3031

3132
### Title
3233

33-
To apply custom CSS styles to an image within a `CardImage` component, define a CSS class and apply it using the `CssClass` property. This allows for advanced styling such as background images, specific sizing, or positioning.
34+
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.
3435

3536
```cshtml
3637
@using Syncfusion.Blazor.Cards
37-
38-
<SfCard>
39-
<CardHeader Title="JavaScript"></CardHeader>
40-
<CardContent>
41-
JavaScript Succinctly was written to give readers an accurate, concise examination
42-
of JavaScript objects and their supporting nuances, such as complex values, primitive
43-
values scope, inheritance, the head object, and more.
44-
</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>
4548
</SfCard>
49+
</div>
50+
<style>
51+
.e-card-image {
52+
width: 150px !important;
53+
margin-left: 35vw;
54+
}
55+
</style>
4656
```
47-
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVUihLBhHVhadTB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
48-
![Blazor Card Component with Title](images/Title-card.png)
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)
4959

5060
## Divider
5161

‎blazor/card/header-content.md‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -36,21 +36,19 @@ For adding header to the Card, Title Property.
3636

3737
* Add `SubTitle` Property inside the header caption element for adding Title.
3838

39-
### Image
39+
### Header with Image
4040

4141
Card header has an option for adding images in the header. It is aligned with either before or after the header based on the HTML element positioned in the header structure. The header image can be added by `ImageUrl` component which can be placed before or after the header caption wrapper element.
4242

4343
```cshtml
4444
@using Syncfusion.Blazor.Cards
4545
4646
<SfCard ID="HugeImage">
47-
<CardHeader Title="Laura Callahan" SubTitle="Sales Coordinator and Representative" ImageUrl="images/cards/football.png" />
48-
</SfCard>
49-
<SfCard ID="SecondCard">
50-
<CardHeader Title="Laura Callahan" SubTitle="Sales Coordinator and Representative" ImageUrl="images/cards/football.png" />
47+
<CardHeader Title="Laura Callahan" SubTitle="Sales Coordinator and Representative" ImageUrl="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net9/images/cards/profile-four.png" />
5148
</SfCard>
5249
```
53-
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrKWLLVLykMTnDF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
50+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBSDuLoVztwxgGu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
51+
![Blazor Card Component with Title, SubTitle, Image](images/header-image.png)
5452

5553
## Content
5654

@@ -62,15 +60,16 @@ The `CardContent` component is used to display the main textual or HTML content
6260
@using Syncfusion.Blazor.Cards
6361
6462
<SfCard ID="HugeImage">
65-
<CardHeader Title="Laura Callahan" SubTitle="Sales Coordinator and Representative" ImageUrl="images/cards/football.png" />
63+
<CardHeader Title="Laura Callahan" SubTitle="Sales Coordinator and Representative" ImageUrl="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net9/images/cards/profile-four.png" />
6664
</SfCard>
6765
6866
<SfCard ID="SecondCard">
6967
<CardContent Content="Laura received a BA in psychology from the University of Washington. She has also completed a course in business French. She reads and writes French."/>
7068
</SfCard>
7169
7270
```
73-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAWVhrLSuSWdJj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
71+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrIDEhyhgoGAJyl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
72+
![Blazor Card Component with Content](images/card-content.png)
7473

7574
### Image
7675

‎blazor/card/images/card-content.png‎

23.8 KB
Loading

‎blazor/card/images/header-image.png‎

15.4 KB
Loading

‎blazor/card/images/image-Title.png‎

27.5 KB
Loading

‎blazor/card/images/image-card.png‎

21.4 KB
Loading

‎blazor/card/images/vertical-card.png‎

30.7 KB
Loading

0 commit comments

Comments
 (0)