From dd90ad93b80b06f0f50c5e8bf13e0e4b15ca41a0 Mon Sep 17 00:00:00 2001 From: ponselvajeganathan <68591831+ponselvajeganathan@users.noreply.github.com> Date: Fri, 12 Jun 2026 13:37:08 +0530 Subject: [PATCH 1/2] 1031413: Updated Calendar playground sample --- blazor/calendar/calendar-views.md | 4 ++-- blazor/calendar/data-binding.md | 6 +++--- blazor/calendar/date-range.md | 2 +- blazor/calendar/dateonly-support.md | 2 +- blazor/calendar/getting-started-with-server-app.md | 4 ++-- blazor/calendar/getting-started-with-web-app.md | 4 ++-- blazor/calendar/getting-started.md | 4 ++-- blazor/calendar/how-to/change-the-first-day-of-week.md | 2 +- .../how-to/render-the-calendar-with-week-numbers.md | 2 +- blazor/calendar/how-to/show-dates-of-other-months.md | 2 +- blazor/calendar/multi-select.md | 2 +- blazor/calendar/special-dates.md | 2 +- 12 files changed, 18 insertions(+), 18 deletions(-) diff --git a/blazor/calendar/calendar-views.md b/blazor/calendar/calendar-views.md index c2cc4275d2..3fc56be4e9 100644 --- a/blazor/calendar/calendar-views.md +++ b/blazor/calendar/calendar-views.md @@ -33,7 +33,7 @@ The following example demonstrates how to set the `Year` as the start view of th } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLUsVVVhopruWLg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Calendar View](./images/blazor-full-calendar-view.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrdNRCBhvvQzKOi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Calendar View](./images/blazor-full-calendar-view.webp)" %} ## View restriction @@ -54,4 +54,4 @@ N> The Depth view must be “smaller” (more detailed) than the Start view. If } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVgsLhhhofIigEl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Restriction in Blazor Calendar](./images/blazor-calendar-restriction.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrHDRCrBbONJACo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Restriction in Blazor Calendar](./images/blazor-calendar-restriction.webp)" %} diff --git a/blazor/calendar/data-binding.md b/blazor/calendar/data-binding.md index 25bd4e6f7f..29e3ac453f 100644 --- a/blazor/calendar/data-binding.md +++ b/blazor/calendar/data-binding.md @@ -35,7 +35,7 @@ In one-way binding, Bind the value to the Calendar component directly for `Value } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhKiVLVVoLNbXdK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrxjdMrVmaWCLQo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Two-Way data binding @@ -52,7 +52,7 @@ Use `@bind-Value` to keep the Calendar and your data source in sync. The bound f public DateTime? DateValue { get; set; } = DateTime.Now; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhgWLhrrSBqdcMZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBxNdMVLGOIHJQV?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Dynamic value binding @@ -82,4 +82,4 @@ private void onChange(Syncfusion.Blazor.Calendars.ChangedEventArgs ar } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhKMBhBreLoYIse?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVRZdCLrbtMNMeE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} \ No newline at end of file diff --git a/blazor/calendar/date-range.md b/blazor/calendar/date-range.md index 8e23ebcc63..0b02368a1e 100644 --- a/blazor/calendar/date-range.md +++ b/blazor/calendar/date-range.md @@ -29,4 +29,4 @@ The following code allows you to select a date within the range of 7th to 27th d } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBgMhBLLyBEcqBn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[DataRange in Blazor Calendar Component](./images/blazor-calendar-date-range.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVRtRshrFnXUsXL?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[DataRange in Blazor Calendar Component](./images/blazor-calendar-date-range.webp)" %} diff --git a/blazor/calendar/dateonly-support.md b/blazor/calendar/dateonly-support.md index a65dbb697c..372d2c3d25 100644 --- a/blazor/calendar/dateonly-support.md +++ b/blazor/calendar/dateonly-support.md @@ -21,4 +21,4 @@ The following example demonstrates configuring the Calendar with `TValue=DateOnl {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrKsVBrLeKgEwxS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar with DateOnly](./images/CalendarDateOnly.gif)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVRjdCrhFnyfOpB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Calendar with DateOnly](./images/CalendarDateOnly.gif)" %} diff --git a/blazor/calendar/getting-started-with-server-app.md b/blazor/calendar/getting-started-with-server-app.md index 9f5e37764e..ca9d644464 100644 --- a/blazor/calendar/getting-started-with-server-app.md +++ b/blazor/calendar/getting-started-with-server-app.md @@ -168,7 +168,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Calendar component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVpNsVIpTDiqybO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar Component](./images/blazor-calendar-component.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrHjnsVBcxOkeWD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Calendar Component](./images/blazor-calendar-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar). @@ -194,7 +194,7 @@ Here, the Calendar allows selecting a date from the 5th to the 27th of the curre {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzjMLSzUEDfIGE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Selection in Blazor Calendar Component](./images/blazor-calendar-selection.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrdZHsVVmcdCwgj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Selection in Blazor Calendar Component](./images/blazor-calendar-selection.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar). diff --git a/blazor/calendar/getting-started-with-web-app.md b/blazor/calendar/getting-started-with-web-app.md index ffebde1396..2ab6184717 100644 --- a/blazor/calendar/getting-started-with-web-app.md +++ b/blazor/calendar/getting-started-with-web-app.md @@ -176,7 +176,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Calendar component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVpNsVIpTDiqybO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar Component](./images/blazor-calendar-component.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrHjnsVBcxOkeWD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Calendar Component](./images/blazor-calendar-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar). @@ -202,7 +202,7 @@ Here, the Calendar allows selecting a date from the 5th to the 27th of the curre {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzjMLSzUEDfIGE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Selection in Blazor Calendar Component](./images/blazor-calendar-selection.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrdZHsVVmcdCwgj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Selection in Blazor Calendar Component](./images/blazor-calendar-selection.webp)" %} ## See also diff --git a/blazor/calendar/getting-started.md b/blazor/calendar/getting-started.md index 3e1ca9339b..707db90465 100644 --- a/blazor/calendar/getting-started.md +++ b/blazor/calendar/getting-started.md @@ -156,7 +156,7 @@ Add the Blazor Calendar component in the **~/Pages/Index.razor** file. - Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Calendar component renders in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVpNsVIpTDiqybO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar Component](./images/blazor-calendar-component.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrHjnsVBcxOkeWD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Calendar Component](./images/blazor-calendar-component.webp)" %} ## Setting the Value, Min, and Max dates @@ -180,7 +180,7 @@ Here, the Calendar allows selecting a date from the 5th to the 27th of the curre {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzjMLSzUEDfIGE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Selection in Blazor Calendar Component](./images/blazor-calendar-selection.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrdZHsVVmcdCwgj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Selection in Blazor Calendar Component](./images/blazor-calendar-selection.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar). diff --git a/blazor/calendar/how-to/change-the-first-day-of-week.md b/blazor/calendar/how-to/change-the-first-day-of-week.md index 87656c0cee..d24ca17402 100644 --- a/blazor/calendar/how-to/change-the-first-day-of-week.md +++ b/blazor/calendar/how-to/change-the-first-day-of-week.md @@ -20,4 +20,4 @@ The following code shows the Calendar with `Tuesday` as the first day of the wee ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBgChhVBSnmAEDf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing First Day of Week in Blazor Calendar](../images/blazor-calendar-first-day-of-week.webp)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLdjHCrrYWSifyM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing First Day of Week in Blazor Calendar](../images/blazor-calendar-first-day-of-week.webp)" %} \ No newline at end of file diff --git a/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md b/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md index a1d78d9681..7cbaeb74bd 100644 --- a/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md +++ b/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md @@ -20,7 +20,7 @@ You can enable `WeekNumber` in the Calendar by using the [WeekNumber](https://he ``` This example shows the Calendar displaying a week number column at the left. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLAWBrVhoxzJZmT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar displays Week Numbers](../images/blazor-calendar-week-number.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrxZHiBLustErAF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Calendar displays Week Numbers](../images/blazor-calendar-week-number.webp)" %} ## Week rule diff --git a/blazor/calendar/how-to/show-dates-of-other-months.md b/blazor/calendar/how-to/show-dates-of-other-months.md index 451f5a5539..100ee55b32 100644 --- a/blazor/calendar/how-to/show-dates-of-other-months.md +++ b/blazor/calendar/how-to/show-dates-of-other-months.md @@ -34,4 +34,4 @@ The following code demonstrates how to show dates of other months. Using the sty } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVAsVLLLeSYtRiu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying other Month Dates in Blazor Calendar](../images/blazor-calendar-other-month-dates.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVdNnMBhYZdyayo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Displaying other Month Dates in Blazor Calendar](../images/blazor-calendar-other-month-dates.webp)" %} diff --git a/blazor/calendar/multi-select.md b/blazor/calendar/multi-select.md index d5ea11c99d..5c7206c2cc 100644 --- a/blazor/calendar/multi-select.md +++ b/blazor/calendar/multi-select.md @@ -25,4 +25,4 @@ public DateTime[] MultipleValues { get; set; } = new DateTime[] { new DateTime(D } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVqCrrrBIKclcWx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Multi Selection in Blazor Calendar Component](./images/blazor-calendar-multi-selection.webp)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBdjRsVLblhrqeB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Multi Selection in Blazor Calendar Component](./images/blazor-calendar-multi-selection.webp)" %} \ No newline at end of file diff --git a/blazor/calendar/special-dates.md b/blazor/calendar/special-dates.md index 55b4ed6787..dc3440d0c0 100644 --- a/blazor/calendar/special-dates.md +++ b/blazor/calendar/special-dates.md @@ -91,6 +91,6 @@ Customize specific dates in a [Blazor Calendar](https://www.syncfusion.com/blazo ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVAMBLBLyofGefV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar with special dates](./images/blazor_calendar_special_dates.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhdtRMBrlYlIhNB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Calendar with special dates](./images/blazor_calendar_special_dates.webp)" %} N> The `RenderDayCellEventArgs` includes a `CurrentView` property that identifies the active calendar view during rendering. Possible values are `Month`, `Year`, and `Decade`. Use this to apply view-specific logic within the [OnRenderDayCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarEvents-1.html#Syncfusion_Blazor_Calendars_CalendarEvents_1_OnRenderDayCell) handler. This property is useful for customizing the rendering of day cells based on the calendar's current view. \ No newline at end of file From 17bf1933ae5ee64ab0d85c4a5b1df585a0eb6573 Mon Sep 17 00:00:00 2001 From: ponselvajeganathan <68591831+ponselvajeganathan@users.noreply.github.com> Date: Fri, 12 Jun 2026 13:49:23 +0530 Subject: [PATCH 2/2] 1031413: Updated BulletChart playground sample --- blazor/card/action-buttons.md | 4 ++-- blazor/card/card-image.md | 6 +++--- blazor/card/getting-started-with-server-app.md | 2 +- blazor/card/getting-started-with-web-app.md | 2 +- blazor/card/getting-started.md | 2 +- blazor/card/header-content.md | 6 +++--- blazor/card/horizontal.md | 2 +- 7 files changed, 12 insertions(+), 12 deletions(-) diff --git a/blazor/card/action-buttons.md b/blazor/card/action-buttons.md index 9edd68b5fe..b08063ebd9 100644 --- a/blazor/card/action-buttons.md +++ b/blazor/card/action-buttons.md @@ -23,7 +23,7 @@ For adding action buttons, you can create a `CardFooterContent` component withi ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBgMrBLhHADhaVd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLnDnsLBkQSGAqR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Vertical @@ -44,4 +44,4 @@ By default, action buttons are aligned horizontally. They can also be aligned ve ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVUWVrhVdfXSDrA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBdtxsrVOlDOpyD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} \ No newline at end of file diff --git a/blazor/card/card-image.md b/blazor/card/card-image.md index 664a6c1116..4e8e93fcaa 100644 --- a/blazor/card/card-image.md +++ b/blazor/card/card-image.md @@ -24,7 +24,7 @@ N> By default, card images occupies full width of its parent element. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVgihBBLRBjgnKM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrRtHsLrOnTFpDk?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Title @@ -42,7 +42,7 @@ Card image is supported to include a `Title` property for the image. By default, ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVUihLBhHVhadTB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLnDHCBBYxcOZwm?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Divider @@ -68,4 +68,4 @@ Divider used to separate the elements inside the card. You can add divider insid ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhqsVBBLnBeVrnG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBRZdMhVamtbNWR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} \ No newline at end of file diff --git a/blazor/card/getting-started-with-server-app.md b/blazor/card/getting-started-with-server-app.md index 5a502493c2..5aaf392da4 100644 --- a/blazor/card/getting-started-with-server-app.md +++ b/blazor/card/getting-started-with-server-app.md @@ -189,7 +189,7 @@ You can add the header by using [CardHeader](https://help.syncfusion.com/cr/blaz {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLzZshSzfQZOzAc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Card Component](images/blazor-card-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhRXnCVLupGVFFQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Card Component](images/blazor-card-component.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Card). diff --git a/blazor/card/getting-started-with-web-app.md b/blazor/card/getting-started-with-web-app.md index 9775e40344..8a387e3a48 100644 --- a/blazor/card/getting-started-with-web-app.md +++ b/blazor/card/getting-started-with-web-app.md @@ -197,7 +197,7 @@ You can add the header by using [CardHeader](https://help.syncfusion.com/cr/blaz {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLzZshSzfQZOzAc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Card Component](images/blazor-card-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhRXnCVLupGVFFQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Card Component](images/blazor-card-component.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Card). diff --git a/blazor/card/getting-started.md b/blazor/card/getting-started.md index 9f566ffc7f..8c45e409cc 100644 --- a/blazor/card/getting-started.md +++ b/blazor/card/getting-started.md @@ -182,6 +182,6 @@ You can add the header by using [CardHeader](https://help.syncfusion.com/cr/blaz {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLzZshSzfQZOzAc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Card Component](images/blazor-card-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhRXnCVLupGVFFQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Card Component](images/blazor-card-component.png)" %} N> You can also explore our [Blazor Card example](https://blazor.syncfusion.com/demos/card/basic-card) that shows you how to render and configure the Card. diff --git a/blazor/card/header-content.md b/blazor/card/header-content.md index b45075004f..995b7e0b57 100644 --- a/blazor/card/header-content.md +++ b/blazor/card/header-content.md @@ -48,7 +48,7 @@ Card header has an option for adding images in the header. It is aligned with ei ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrKWLLVLykMTnDF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrRtxiVBYyfeJns?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Content @@ -69,7 +69,7 @@ Content in Card holds texts, images, links, and all possible HTML elements. It i ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAWVhrLSuSWdJj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrdjHsrVEycBMCY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Image @@ -94,4 +94,4 @@ Card content is designed to display an image tag within it. You can wrap an imag ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBUWBrBVxCfudwi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Card Component Content with Image](images/Blazor-Card-Component-Content-with-Image.png)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBnjRsrrunDISPn?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Card Component Content with Image](images/Blazor-Card-Component-Content-with-Image.png)" %} \ No newline at end of file diff --git a/blazor/card/horizontal.md b/blazor/card/horizontal.md index 700c242fe8..382d2b7db2 100644 --- a/blazor/card/horizontal.md +++ b/blazor/card/horizontal.md @@ -37,7 +37,7 @@ A horizontally aligned card can push a specific column to align vertically using } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBUMVVVrHJeVdaS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Card Component with Horizontal Orientation](images/blazor-card-with-horizontal-orientation.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrntdCVhklogiNY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Card Component with Horizontal Orientation](images/blazor-card-with-horizontal-orientation.png)" %} ## See also