docs: update content

Author: mrholek

packages/docs/content/4.2/components/accordion.mdx

@@ -1,7 +1,7 @@
 ---
 title: React Accordion Component
 name: Accordion
-description: Build vertically collapsing accordions in combination with our React Collapse component.
+description: Build vertically collapsing accordions in combination with our React Accordion component.
 menu: Components
 route: /components/accordion
 ---
@@ -17,7 +17,7 @@ import {
 } from '@coreui/react/src/index'
 
 
-## Examples
+## How to use React Accordion component.
 
 Click the accordions below to expand/collapse the accordion content.
 
@@ -203,7 +203,7 @@ Add `flush` to remove the default `background-color`, some borders, and some rou
 
 ### Always open
 
-Add `alwaysOpen` property to make accordion items stay open when another item is opened.
+Add `alwaysOpen` property to make react accordion items stay open when another item is opened.
 
 <Example>
   <CAccordion alwaysOpen activeItemKey={2}>

packages/docs/content/4.2/components/alert.mdx

@@ -19,7 +19,7 @@ import CIcon from '@coreui/icons-react'
 
 import { cilBurn, cilCheckCircle, cilInfo, cilWarning } from '@coreui/icons'
 
-## Examples
+## How to use React Alert Component.
 
 React Alert is prepared for any length of text, as well as an optional close button. For a styling, use one of the **required** contextual `color` props (e.g., `primary`). For inline dismissal, use the [dismissing prop](#dismissing).
 
@@ -114,7 +114,7 @@ return (
 
 ### Link color
 
-Use the `<CAlertLink>` component to immediately give matching colored links inside any alert.
+Use the `<CAlertLink>` component to immediately give matching colored links inside any react alert component.
 
 <Example>
   <CAlert color="primary">
@@ -172,7 +172,7 @@ Use the `<CAlertLink>` component to immediately give matching colored links insi
 
 ### Additional content
 
-Alert can also incorporate supplementary components &amp; elements like heading, paragraph, and divider.
+React Alert can also incorporate supplementary components &amp; elements like heading, paragraph, and divider.
 
 <Example>
   <CAlert color="success">
@@ -194,7 +194,7 @@ Alert can also incorporate supplementary components &amp; elements like heading,
 
 ### Icons
 
-Similarly, you can use [flexbox utilities](https//coreui.io/docs/4.0/utilities/flex") and [CoreUI Icons](https://icons.coreui.io) to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
+Similarly, you can use [flexbox utilities](https//coreui.io/docs/4.0/utilities/flex") and [CoreUI Icons](https://icons.coreui.io) to create react alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
 
 <Example>
   <CAlert color="primary" className="d-flex align-items-center">
@@ -218,7 +218,7 @@ Similarly, you can use [flexbox utilities](https//coreui.io/docs/4.0/utilities/f
 </CAlert>
 ```
 
-Need more than one icon for your alerts? Consider using [CoreUI Icons](https://icons.coreui.io).
+Need more than one icon for your react alerts? Consider using [CoreUI Icons](https://icons.coreui.io).
 
 <Example>
   <CAlert color="primary" className="d-flex align-items-center">
@@ -302,7 +302,7 @@ Use `variant="solid"` to change contextual colors to solid.
 
 ### Dismissing
 
-Alerts can also be easily dismissed. Just add the `dismissible` prop.
+React Alert component can also be easily dismissed. Just add the `dismissible` prop.
 
 <Example>
   <CAlert

packages/docs/content/4.2/components/avatar.mdx

@@ -48,7 +48,7 @@ import Avatar3 from './../assets/images/avatars/3.jpg'
 
 ## Rounded avatars
 
-Use the `shape="rounded"` prop to make avatars squared with rounded corners.
+Use the `shape="rounded"` prop to make react avatars squared with rounded corners.
 
 <Example>
   <CAvatar color="primary" textColor="white" shape="rounded">
@@ -70,7 +70,7 @@ Use the `shape="rounded"` prop to make avatars squared with rounded corners.
 
 ## Square avatars
 
-Use the `shape="rounded-0"` prop to make avatars squared.
+Use the `shape="rounded-0"` prop to make react avatars squared.
 
 <Example>
   <CAvatar color="primary" textColor="white" shape="rounded-0">
@@ -92,7 +92,7 @@ Use the `shape="rounded-0"` prop to make avatars squared.
 
 ## Sizes
 
-Fancy larger or smaller avatar? Add `size="xl"`, `size="lg"` or `size="sm"` for additional sizes.
+Fancy larger or smaller react avatar component? Add `size="xl"`, `size="lg"` or `size="sm"` for additional sizes.
 
 <Example>
   <CAvatar color="secondary" size="xl">

packages/docs/content/4.2/components/badge.mdx

@@ -11,7 +11,7 @@ import { CBadge, CButton } from '@coreui/react/src/index'
 
 ## Example
 
-Badge component scales to suit the size of the parent element by using relative font sizing and `em` units.
+React badge component scales to suit the size of the parent element by using relative font sizing and `em` units.
 
 ### Basic usage
 
@@ -33,7 +33,7 @@ Badge component scales to suit the size of the parent element by using relative
 <h6>Example heading <CBadge color="secondary">New</CBadge></h6>
 ```
 
-Badges can be used as part of links or buttons to provide a counter.
+React badges can be used as part of links or buttons to provide a counter.
 
 <Example>
   <CButton color="primary">
@@ -47,7 +47,7 @@ Badges can be used as part of links or buttons to provide a counter.
 </CButton>
 ```
 
-Remark that depending on how you use them, badges may be complicated for users of screen readers and related assistive technologies.
+Remark that depending on how you use them, react badges may be complicated for users of screen readers and related assistive technologies.
 
 Unless the context is clear, consider including additional context with a visually hidden piece of additional text.
 

packages/docs/content/4.2/components/image.mdx

@@ -25,7 +25,7 @@ Images in CoreUI for React.js are made responsive with `fluid` property. This ap
 
 ## Image thumbnails
 
-In addition to our [border-radius utilities](https://coreui.io/docs/4.0/utilities/borders), you can use prop`thumbnail` to give an image a rounded 1px border appearance.
+In addition to our [border-radius utilities](https://coreui.io/docs/utilities/borders), you can use prop`thumbnail` to give an image a rounded 1px border appearance.
 
 <Example>
   <CImage rounded thumbnail src={React400Img} width={200} height={200} />

packages/docs/content/4.2/components/navbar.mdx

@@ -514,7 +514,7 @@ Place various form controls and components within a navbar:
 </CNavbar>
 ```
 
-Immediate child elements of `<CNavbar>` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities](https://coreui.io/docs/4.0/utilities/flex/) as needed to adjust this behavior.
+Immediate child elements of `<CNavbar>` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities](https://coreui.io/docs/utilities/flex/) as needed to adjust this behavior.
 
 <Example>
   <CNavbar colorScheme="light" className="bg-light">

packages/docs/content/4.2/components/table.mdx

@@ -17,9 +17,9 @@ import {
   CTableRow,
 } from '@coreui/react/src/index'
 
-## Overview
+## How to use React Table Component
 
-Due to the widespread use of `<CTable>` elements across third-party widgets like calendars and date pickers, CoreUI's tables are **opt-in**. All table styles are not inherited in CoreUI, meaning any nested tables can be styled independent from the parent.
+Due to the widespread use of `<CTable>` elements across third-party widgets like calendars and date pickers, CoreUI's react tables are **opt-in**. All table styles are not inherited in CoreUI, meaning any nested tables can be styled independent from the parent.
 
 Using the most basic table CoreUI, here's how `<CTable>`-based tables look in CoreUI.
 
@@ -89,7 +89,7 @@ Using the most basic table CoreUI, here's how `<CTable>`-based tables look in Co
 
 ## Variants
 
-Use contextual classes to color tables, table rows or individual cells.
+Use contextual classes to color react tables, table rows or individual cells.
 
 <Example>
   <CTable>
@@ -213,7 +213,7 @@ Use contextual classes to color tables, table rows or individual cells.
 
 ### striped rows
 
-Use `striped` property to add zebra-striping to any table row within the `<CTableBody>`.
+Use `striped` property to add zebra-striping to any react table row within the `<CTableBody>`.
 
 <Example>
   <CTable striped>
@@ -279,7 +279,7 @@ Use `striped` property to add zebra-striping to any table row within the `<CTabl
 </CTable>
 ```
 
-These classes can also be added to table variants:
+These classes can also be added to react table variants:
 
 <Example>
   <CTable color="dark" striped>
@@ -411,7 +411,7 @@ These classes can also be added to table variants:
 
 ### Hoverable rows
 
-Use `hover` property to enable a hover state on table rows within a `<CTableBody>`.
+Use `hover` property to enable a hover state on react table rows within a `<CTableBody>`.
 
 <Example>
   <CTable hover>
@@ -817,7 +817,7 @@ Add `bordered` property for borders on all sides of the table and cells.
 </CTable>
 ```
 
-[Border color utilities](https://coreui.io/docs/4.0/utilities/borders#border-color) can be added to change colors:
+[Border color utilities](https://coreui.io/docs/utilities/borders#border-color) can be added to change colors:
 
 <Example>
   <CTable bordered borderColor="primary">
@@ -885,7 +885,7 @@ Add `bordered` property for borders on all sides of the table and cells.
 
 ### Tables without borders
 
-Add `borderless` property for a table without borders.
+Add `borderless` property for a react table without borders.
 
 <Example>
   <CTable borderless>
@@ -1221,7 +1221,7 @@ Table cells of `<CTableHead>` are always vertical aligned to the bottom. Table c
 
 ## Nesting
 
-Border styles, active styles, and table variants are not inherited by nested tables.
+Border styles, active styles, and react table component variants are not inherited by nested tables.
 
 <Example>
   <CTable striped>

packages/docs/content/4.2/components/toast.mdx

@@ -276,7 +276,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
 
 ### Custom content
 
-Customize your toasts by removing sub-components, tweaking them with [utilities](https://coreui.io/docs/4.0/utilities/api), or by adding your own markup. Here we've created a simpler toast by removing the default `<CToastHeader>`, adding a custom hide icon from [CoreUI Icons](https://icons.coreui.io), and using some [flexbox utilities](https://coreui.io/docs/4.0/utilities/flex) to adjust the layout.
+Customize your toasts by removing sub-components, tweaking them with [utilities](https://coreui.io/docs/utilities/api), or by adding your own markup. Here we've created a simpler toast by removing the default `<CToastHeader>`, adding a custom hide icon from [CoreUI Icons](https://icons.coreui.io), and using some [flexbox utilities](https://coreui.io/docs/utilities/flex) to adjust the layout.
 
 <Example>
   <CToast autohide={false} visible={true} className="align-items-center">
@@ -332,7 +332,7 @@ Alternatively, you can also add additional controls and components to toasts.
 
 ### Color schemes
 
-Building on the above example, you can create different toast color schemes with our [color](https://coreui.io/docs/4.0/utilities/colors) and [background](https://coreui.io/docs/4.0//utilities/background) utilities. Here we've set `color="primary"` and added `.text-white` class to the `<Ctoast>`, and then set `white` property to our close button. For a crisp edge, we remove the default border with `.border-0`.
+Building on the above example, you can create different toast color schemes with our [color](https://coreui.io/docs/utilities/colors) and [background](https://coreui.io/docs//utilities/background) utilities. Here we've set `color="primary"` and added `.text-white` class to the `<Ctoast>`, and then set `white` property to our close button. For a crisp edge, we remove the default border with `.border-0`.
 
 <Example>
   <CToast autohide={false} visible={true} color="primary" className="text-white align-items-center">

packages/docs/content/4.2/layout/breakpoints.mdx

@@ -76,7 +76,7 @@ $grid-breakpoints: (
 );
 ```
 
-For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation](https://coreui.io/docs/4.0/layout/grid#sass).
+For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation](https://coreui.io/docs/layout/grid#sass).
 
 ## Media queries
 

packages/docs/content/4.2/migration/v4.mdx

@@ -5,7 +5,7 @@ menu: "Migration"
 route: "/migration/v4"
 ---
 
-CoreUI for React is the React.js version of CoreUI components library, so before read this migration guide, please check also [CoreUI 3 to 4 migration guide](https://coreui.io/docs/4.0/migration/).
+CoreUI for React is the React.js version of CoreUI components library, so before read this migration guide, please check also [CoreUI 3 to 4 migration guide](https://coreui.io/docs/migration/).
 
 ## Components