add design system links

Author: yordan-mitev

components/button/overview.md

@@ -22,7 +22,7 @@ The Blazor Button provides a variety of styling options through the [built-in th
 
 1. Add an `OnClick` event handler to show the current date and time.
 
->caption Basic Blazor Button with OnClick event handler
+>caption Basic Blazor Button with `OnClick` event handler
 
 ````CSHTML
 @result
@@ -39,7 +39,6 @@ The Blazor Button provides a variety of styling options through the [built-in th
 }
 ````
 
-
 ## Icons
 
 To visually communicate the purpose of a button, you can add an image, sprite, or font icon. You can choose between a wide range of built-in font icons or use your custom font icons. [Read more about the Blazor Button icons...]({%slug button-icons%})
@@ -60,6 +59,8 @@ To prevent user interaction with a Button, disable it. [Read more about the disa
 
 To customize the style and the appearance of the Blazor Button, you can use the [built-in themes]({%slug general-information/themes%}). Additionally, set the `Class` attribute and implement custom CSS rules. [Read more about the Blazor Button styling...]({%slug button-styling%})
 
+>tip To learn more about the appearance, anatomy, and accessibility of the Button, visit the [Progress Design System documentation](www.telerik.com/design-system/docs/components/button/)—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
+
 ## Button Reference
 
 Add a reference to the Button instance to use its methods (for example - `FocusAsync()`). Be aware of the Blazor life cycle if you want to [focus the component on page load]({%slug inputs-kb-focus%}#notes).

components/buttongroup/overview.md

@@ -22,7 +22,7 @@ The ButtonGroup component lets you [select one or more toggle buttons]({%slug bu
 1. Inside it, add the desired [button tags]({%slug buttongroup-buttons%}) that denote each button - `<ButtonGroupToggleButton>` or `<ButtonGroupButton>`.
 1. Optionally, use the `OnClick` event of these buttons to handle the user actions. Read more in the [Events]({%slug buttongroup-events%}) article.
 
->caption TelerikButtonGroup with regular buttons and toggle buttons, and their respective OnClick handlers
+>caption Blazor ButtonGroup with regular buttons and toggle buttons, and their respective `OnClick` handlers
 
 ````CSHTML
 <TelerikButtonGroup>
@@ -59,6 +59,8 @@ The ButtonGroup allows you to control the selection mode of its `ButtonGroupTogg
 
 The separate button instances of the ButtonGroup provide several parameters that control their [styling and appearance, including background color, rounded corners and fill]({%slug buttongroup-appearance%}).
 
+>tip To learn more about the appearance, anatomy, and accessibility of the ButtonGroup, visit the [Progress Design System documentation](www.telerik.com/design-system/docs/components/buttongroup/)—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
+
 ## Events
 
 The Blazor ButtonGroup fires events that you can handle and respond to user actions. [Read more about the Blazor ButtonGroup events....]({%slug buttongroup-events%})

components/checkbox/overview.md

@@ -41,6 +41,8 @@ In addition to basic *checked* and *unchecked* states, the Blazor CheckBox has a
 
 The Checkbox component provides size and border settings to control its appearance. [Read more about the Blazor Checkbox appearance settings]({%slug checkbox-appearance%}).
 
+>tip To learn more about the appearance, anatomy, and accessibility of the CheckBox, visit the [Progress Design System documentation](www.telerik.com/design-system/docs/components/checkbox/)—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
+
 ## Events
 
 The Blazor Checkbox fires value change, focus and state change events that you can handle and further customize its behavior. [Read more about the Blazor Checkbox events]({%slug checkbox-events%}).

components/chip/overview.md

@@ -51,6 +51,8 @@ To use a Telerik Chip for Blazor:
 
 You can customize the appearance of the Blazor Chip via a variety of built-in customization options. [Read more about the Chip appearance settings...]({%slug chip-appearance%})
 
+>tip To learn more about the appearance, anatomy, and accessibility of the Chip, visit the [Progress Design System documentation](www.telerik.com/design-system/docs/components/chip/)—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
+
 ## Chip Parameters
 
 The table below lists the Chip parameters. Also check the [Chip API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikChip) for all parameters, methods and events.

components/combobox/overview.md

@@ -101,12 +101,11 @@ The Blazor ComboBox @[template](/_contentTemplates/dropdowns/features.md#groupin
 
 ### Styling and Appearance
 
-The following parameters enable you to customize the appearance of the Blazor ComboBox:
+The following parameters enable you to customize the [appearance]({%slug combobox-appearance%}) of the Blazor ComboBox:
 
 @[template](/_contentTemplates/dropdowns/features.md#styling)
 
-You can find more options for customizing the ComboBox styling in the [Appearance article]({%slug combobox-appearance%}).
-
+>To learn more about the appearance, anatomy, and accessibility of the ComboBox, visit the [Progress Design System documentation](www.telerik.com/design-system/docs/components/combobox/)—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
 
 ### Popup settings
 

components/dropdownlist/overview.md

@@ -100,12 +100,11 @@ The Blazor DropDownList @[template](/_contentTemplates/dropdowns/features.md#gro
 
 ### Styling and Appearance
 
-The following parameters enable you to customize the appearance of the Blazor DropDownList:
+The following parameters enable you to customize the [appearance]({%slug dropdownlist-appearance%}) of the Blazor DropDownList:
 
 @[template](/_contentTemplates/dropdowns/features.md#styling)
 
-You can find more options for customizing the DropDownList styling in the [Appearance article]({%slug dropdownlist-appearance%}).
-
+>To learn more about the appearance, anatomy, and accessibility of the DropDownList, visit the [Progress Design System documentation](www.telerik.com/design-system/docs/components/dropdownlist/)—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
 
 ### Popup Settings
 

components/maskedtextbox/overview.md

@@ -80,12 +80,14 @@ See the [MaskedTextBox API Reference](/blazor-ui/api/Telerik.Blazor.Components.T
 
 ### Styling and Appearance
 
+The following parameters enable you to customize the [appearance]({%slug maskedtextbox-appearance%}) of the Blazor MaskedTextBox:
+
 | Parameter | Type and Default value | Description |
 |---|---|---|
 | `Class` | `string` | The custom CSS class of the `<span class="k-maskedtextbox">` element. |
 | `Width` | `string` | The component width. |
 
-Find more parameters to customize the masked textbox styling in the [Appearance article]({%slug maskedtextbox-appearance%}).
+>To learn more about the appearance, anatomy, and accessibility of the MaskedTextBox, visit the [Progress Design System documentation](www.telerik.com/design-system/docs/components/maskedtextbox/)—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
 
 ## MaskedTextBox Reference and Methods
 

components/multiselect/overview.md

@@ -116,11 +116,11 @@ The Blazor MultiSelect provides various parameters that allow you to configure t
 
 ### Styling and Appearance
 
-The following parameters enable you to customize the appearance of the Blazor MultiSelect:
+The following parameters enable you to customize the [appearance]({%slug multiselect-appearance%}) of the Blazor MultiSelect:
 
 @[template](/_contentTemplates/dropdowns/features.md#styling)
 
-You can find more options for customizing the MultiSelect styling in the [Appearance article]({%slug multiselect-appearance%}).
+>tip To learn more about the appearance, anatomy, and accessibility of the MultiSelect, visit the [Progress Design System documentation](www.telerik.com/design-system/docs/components/multiselect/)—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
 
 ### Popup settings
 

components/numerictextbox/overview.md

@@ -8,17 +8,17 @@ published: True
 position: 0
 ---
 
-# Blazor Numeric Textbox Overview
+# Blazor Numeric TextBox Overview
 
 The <a href="https://www.telerik.com/blazor-ui/numeric-textbox" target="_blank">Blazor Numeric Textbox component</a> allows the user to enter decimal values and no text. The developer can control minimum, maximum values, steps and other elements of the UX.
 
-## Creating Blazor Numeric Textbox
+## Creating Blazor Numeric TextBox
 
 1. Add the `TelerikNumericTextBox` tag to your razor page.
 1. Bind a numeric data type to the component
 1. Optionally, set custom `Format`, `Min`, `Max` and `Step` values
 
->caption Basic numeric textbox with its key features
+>caption Basic numeric text box with its key features
 
 ````CSHTML
 The new value is: @theValue
@@ -72,7 +72,7 @@ The Blazor Numeric TextBox allows you to define your desired custom format throu
 }
 ````
 
-## Numeric Textbox Parameters
+## Numeric TextBox Parameters
 
 @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
 
@@ -95,14 +95,14 @@ The Blazor Numeric TextBox allows you to define your desired custom format throu
 
 ### Styling and Appearance
 
-The following parameters enable you to customize the appearance of the Blazor Numeric TextBox:
+The following parameters enable you to customize the [appearance]({%slug numerictextbox-appearance%}) of the Blazor Numeric TextBox:
 
 | Attribute | Type and Default Value | Description |
 | --- | --- | --- |
 | `Class` | `string` | The CSS class that will be rendered on the `<span class="k-numerictextbox">` element. |
 | `Width` | `string` | The width of the component in [any supported CSS unit]({%slug common-features/dimensions%}). |
 
-Find more options for customizing the Numeric TextBox styling in the [Appearance article]({%slug numerictextbox-appearance%}).
+>tip To learn more about the appearance, anatomy, and accessibility of the NumericTextBox, visit the [Progress Design System documentation](www.telerik.com/design-system/docs/components/numerictextbox/)—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
 
 ## Component Reference
 

components/splitbutton/overview.md

@@ -63,6 +63,7 @@ The primary SplitButton action and each secondary item in the dropdown can [disp
 
 The SplitButton provides a [variety of settings to control its visual appearance]({%slug splitbutton-appearance%}), for example the colors, borders, and size. This spares the need to use custom CSS code.
 
+>tip To learn more about the appearance, anatomy, and accessibility of the SplitButton, visit the [Progress Design System documentation](www.telerik.com/design-system/docs/components/splitbutton/)—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
 
 ## Events