syncfusion-content · Backiaraj · Nov 13, 2025 · Nov 14, 2025 · Nov 14, 2025
diff --git a/blazor/color-picker/how-to/customize-color-picker.md b/blazor/color-picker/how-to/customize-color-picker.md
@@ -76,9 +76,7 @@ By default, the Palette will be rendered with default colors. To load custom col
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrKsLhcASTCtgHM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor ColorPicker with Custom Palette](./../images/blazor-colorpicker-with-custom-palette.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrKsLhcASTCtgHM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Custom Palette](./../images/blazor-colorpicker-with-custom-palette.png)" %}
 
 ## Hide input area from picker
 
@@ -92,9 +90,7 @@ In the following sample, the Color Picker is rendered without input area.
 <h4>Choose a color</h4>
 <SfColorPicker ModeSwitcher="false" CssClass="e-hide-value"></SfColorPicker>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhKMLLwqoJqULKi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Hide Input Area in Blazor ColorPicker](./../images/blazor-colorpicker-hide-input.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhKMLLwqoJqULKi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hide Input Area in Blazor ColorPicker](./../images/blazor-colorpicker-hide-input.png)" %}
 
 ## Custom handle
 
@@ -126,6 +122,4 @@ The following sample shows the customized Color Picker handle.
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhKWrLGKyTIhQGO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Customizing Blazor ColorPicker Handle Shape](./../images/blazor-colorpicker-handle-customization.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhKWrLGKyTIhQGO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor ColorPicker Handle Shape](./../images/blazor-colorpicker-handle-customization.png)" %}
diff --git a/blazor/color-picker/how-to/disable-color-picker.md b/blazor/color-picker/how-to/disable-color-picker.md
@@ -19,6 +19,4 @@ The following example shows the `Disabled` state of Color Picker component.
 <h4>Choose a color</h4>
 <SfColorPicker Disabled="true"></SfColorPicker>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLKsLrGgeJFrvZn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Disable State in Blazor ColorPicker](./../images/blazor-colorpicker-disable-state.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLKsLrGgeJFrvZn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Disable State in Blazor ColorPicker](./../images/blazor-colorpicker-disable-state.png)" %}
diff --git a/blazor/color-picker/how-to/hide-control-buttons.md b/blazor/color-picker/how-to/hide-control-buttons.md
@@ -17,6 +17,4 @@ Color Picker can be rendered without control buttons (Apply/Cancel). In this cas
 <h4>Choose a color</h4>
 <SfColorPicker ShowButtons="false"></SfColorPicker>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhAWLBcqoIBqnae?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Hide Control Buttons in Blazor ColorPicker](./../images/blazor-colorpicker-hide-control.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhAWLBcqoIBqnae?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hide Control Buttons in Blazor ColorPicker](./../images/blazor-colorpicker-hide-control.png)" %}
diff --git a/blazor/color-picker/how-to/no-color-support.md b/blazor/color-picker/how-to/no-color-support.md
@@ -40,9 +40,7 @@ To achieve this, set [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVUsLLGKoIFoxSv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor ColorPicker with Default No Color](./../images/blazor-colorpicker-nocolor.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVUsLLGKoIFoxSv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Default No Color](./../images/blazor-colorpicker-nocolor.png)" %}
 
 >If the [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_NoColor) property is enabled, make sure to disable the [ModeSwitcher](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ModeSwitcher) property.
 
@@ -130,6 +128,4 @@ The following sample shows the color palette with custom no color option.
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthAsLLwAyxsVKHl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor ColorPicker with Custom No Color](./../images/blazor-colorpicker-custom-nocolor.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthAsLLwAyxsVKHl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Custom No Color](./../images/blazor-colorpicker-custom-nocolor.png)" %}
diff --git a/blazor/color-picker/how-to/render-palette-alone.md b/blazor/color-picker/how-to/render-palette-alone.md
@@ -19,8 +19,6 @@ In the following sample, the [ShowButtons](https://help.syncfusion.com/cr/blazor
 <h4>Choose a color</h4>
 <SfColorPicker Mode="ColorPickerMode.Palette" ModeSwitcher="false" ShowButtons="false"></SfColorPicker>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Rendering Palette Alone in Blazor ColorPicker](./../images/blazor-colorpicker-with-palette-alone.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rendering Palette Alone in Blazor ColorPicker](./../images/blazor-colorpicker-with-palette-alone.png)" %}
 
 N> To render `Picker` alone, specify the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property as 'Picker'.
diff --git a/blazor/color-picker/how-to/show-recent-color.md b/blazor/color-picker/how-to/show-recent-color.md
@@ -21,6 +21,4 @@ In the following sample, the [`ShowRecentColors`](https://help.syncfusion.com/cr
 <h4>Choose a color</h4>
 <SfColorPicker ShowRecentColors="true"></SfColorPicker>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Rendering Show Recent color in Blazor ColorPicker](./../images/blazor-colorpicker-show-recent-color.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rendering Show Recent color in Blazor ColorPicker](./../images/blazor-colorpicker-show-recent-color.png)" %}
diff --git a/blazor/color-picker/inline-rendering.md b/blazor/color-picker/inline-rendering.md
@@ -20,8 +20,6 @@ The following sample shows the inline type rendering of ColorPicker.
 <SfColorPicker Value="035a" Inline="true" ShowButtons="false"></SfColorPicker>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVKsVrQgIVKJnGz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Inline Rendering in Blazor ColorPicker](./images/blazor-colorpicker-inline-rendering.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVKsVrQgIVKJnGz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Inline Rendering in Blazor ColorPicker](./images/blazor-colorpicker-inline-rendering.png)" %}
 
 N> The `ShowButtons` property is disabled in this sample because the control buttons are not needed for inline type. To know about the control buttons functionality, refer to the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons).
diff --git a/blazor/color-picker/localization.md b/blazor/color-picker/localization.md
@@ -29,9 +29,7 @@ You can modify the default value in `.res` file added to Resource folder. Enter
 <SfColorPicker></SfColorPicker>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhKsVVwqSUTjofI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Localization in Blazor ColorPicker](./images/blazor-colorpicker-localization.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhKsVVwqSUTjofI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Localization in Blazor ColorPicker](./images/blazor-colorpicker-localization.png)" %}
 
 ## RTL
 
@@ -46,6 +44,4 @@ In the following example, Color Picker component is rendered in RTL mode with `a
 <SfColorPicker EnableRtl="true"></SfColorPicker>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBUsrLmqSKnHwGP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Right to Left in Blazor ColorPicker](./images/blazor-colorpicker-right-to-left.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBUsrLmqSKnHwGP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Right to Left in Blazor ColorPicker](./images/blazor-colorpicker-right-to-left.png)" %}
diff --git a/blazor/color-picker/mode-and-value.md b/blazor/color-picker/mode-and-value.md
@@ -22,9 +22,7 @@ In the following sample, it will render the `Palette` at initial load.
 <SfColorPicker Mode="ColorPickerMode.Palette"></SfColorPicker>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgshBQKIhHYIMT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor ColorPicker with Palette](./images/blazor-colorpicker-with-palette.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgshBQKIhHYIMT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Palette](./images/blazor-colorpicker-with-palette.png)" %}
 
 ## Color value
 
@@ -39,8 +37,6 @@ In the following sample, the color value is set as `four` digit hex code, the la
 <SfColorPicker Value="035a" ModeSwitcher="false"></SfColorPicker>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVUCBBQUeLkCZYv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Changing Blazor ColorPicker value](./images/blazor-colorpicker-value.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVUCBBQUeLkCZYv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor ColorPicker value](./images/blazor-colorpicker-value.png)" %}
 
 N> The [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Value) property supports hex code with or without `#` prefix.
diff --git a/blazor/combobox/cascading.md b/blazor/combobox/cascading.md
@@ -25,9 +25,7 @@ In the following example, when a country is selected in the first ComboBox, the
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLUsVBmKweKQSWe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Cascading in Blazor ComboBox](./images/cascading/blazor_combobox_cascading.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLUsVBmKweKQSWe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Cascading in Blazor ComboBox](./images/cascading/blazor_combobox_cascading.gif)" %}
 
 ## Cascading with other form field 
 
@@ -41,8 +39,6 @@ In the following example, the ComboBox displays a list of countries, and the tex
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BthKWhhGKcenJwTt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Cascading with other form field in Blazor ComboBox](./images/cascading/blazor_combobox_cascading-with-other-form-field.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthKWhhGKcenJwTt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Cascading with other form field in Blazor ComboBox](./images/cascading/blazor_combobox_cascading-with-other-form-field.png)" %}
 
 N> [View Sample in Demo](https://blazor.syncfusion.com/demos/combobox/cascading?theme=bootstrap5).
diff --git a/blazor/combobox/custom-value.md b/blazor/combobox/custom-value.md
@@ -11,6 +11,4 @@ documentation: ug
 
 You can add custom value to the ComboBox component. When the typed character(s) is not present in the list, a button will be shown in the popup list. By clicking on this button, the custom value character(s) get added to the existing list as a new item. Default value of [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowCustom) is `true`.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBACVLQKFyiyoKz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor ComboBox with custom value](./images/blazor-combobox-custom-value.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBACVLQKFyiyoKz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with custom value](./images/blazor-combobox-custom-value.png)" %}
diff --git a/blazor/combobox/data-source.md b/blazor/combobox/data-source.md
@@ -72,9 +72,7 @@ In the following example, `Name` column from complex data has been mapped to the
     };
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBKsLLcKnxcdvLv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Binding Blazor ComboBox Items](./images/blazor-combobox-binding-items.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBKsLLcKnxcdvLv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Binding Blazor ComboBox Items](./images/blazor-combobox-binding-items.png)" %}
 
 ### Array of complex data
 
@@ -121,9 +119,7 @@ public IEnumerable<Complex> LocalData { get; set; } = new Complex().GetData();
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrqiLVwKHwhTfxb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Binding Complex Items with Blazor ComboBox](./images/blazor-combobox-complex-data.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrqiLVwKHwhTfxb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Binding Complex Items with Blazor ComboBox](./images/blazor-combobox-complex-data.png)" %}
 
 ## Binding remote data
 
@@ -159,9 +155,7 @@ In the following sample, First 6 contacts are displayed from the **Customers** t
     }
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthUChrmAnbDTsys?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor ComboBox with Data Binding](./images/blazor-combobox-binding-data.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthUChrmAnbDTsys?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with Data Binding](./images/blazor-combobox-binding-data.png)" %}
 
 ### Web API Adaptor
 
@@ -188,9 +182,7 @@ Use the `WebApiAdaptor` to bind ComboBox with Web API created using OData.
     }
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBgiVLwKnloDWBQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor ComboBox with Web API Data](./images/blazor-combobox-web-api-data.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBgiVLwKnloDWBQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with Web API Data](./images/blazor-combobox-web-api-data.png)" %}
 
 ### Custom adaptor
 
@@ -302,9 +294,7 @@ The following example for remote data binding and enabled offline mode,
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBACrBQKGCrmiJb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor ComboBox in Offline Mode](./images/blazor-combobox-web-api-data.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBACrBQKGCrmiJb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox in Offline Mode](./images/blazor-combobox-web-api-data.png)" %}
 
 ### ValueTuple data binding
 
@@ -320,9 +310,7 @@ You can bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.va
 </SfComboBox>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrKihrcgcMdJUXG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor ComboBox ValueTuple Data](./images/blazor_combobox_valuetuple.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrKihrcgcMdJUXG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox ValueTuple Data](./images/blazor_combobox_valuetuple.png)" %}
 
 ## Binding ExpandoObject
 
@@ -448,10 +436,7 @@ You can bind [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBgCBVcAmhLLFOi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-![Blazor ComboBox with observable collection data binding](./images/blazor_combobox_observable-collection.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBgCBVcAmhLLFOi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with observable collection data binding](./images/blazor_combobox_observable-collection.png)" %}
 
 ## Entity Framework
 

diff --git a/blazor/combobox/form-validation.md b/blazor/combobox/form-validation.md
@@ -29,6 +29,4 @@ When the ComboBox input is valid, the form is ready to be submitted. If the inpu
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrKWVrGUcRBhJQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor ComboBox inside editform](./images/form-validation/blazor_combobox_inside-editform.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrKWVrGUcRBhJQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox inside editform](./images/form-validation/blazor_combobox_inside-editform.png)" %}
diff --git a/blazor/combobox/grouping.md b/blazor/combobox/grouping.md
@@ -23,9 +23,7 @@ In the following sample, vegetables are grouped according to their category usin
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrAsLhwUmUFCjYX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Grouping in Blazor ComboBox](./images/blazor-combobox-grouping.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrAsLhwUmUFCjYX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor ComboBox](./images/blazor-combobox-grouping.png)" %}
 
 ## Fixed group header
 

diff --git a/blazor/combobox/how-to/tooltip.md b/blazor/combobox/how-to/tooltip.md
@@ -64,6 +64,4 @@ The following code demonstrates how to display a tooltip when hovering over the
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htrqMBVwKYqDMxaA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor Combobox displays Tooltip for Dropdown Items](../images/blazor-combobox-tooltip.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htrqMBVwKYqDMxaA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Combobox displays Tooltip for Dropdown Items](../images/blazor-combobox-tooltip.png)" %}