docs: add CImage component

Author: mrholek

docs/4.0/components/CImage.mdx

@@ -0,0 +1,57 @@
+---
+title: React Image Component
+name: Image
+description: React image component with responsive behavior (so it's never become larger than their parent element) and special styles.
+menu: Components
+route: /components/image
+---
+
+import { Playground, Props } from 'docz'
+
+import { CImage } from '../../../src/index.ts'
+
+## Responsive images
+
+Images in CoreUI for React.js are made responsive with `fluid` property. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent element.
+
+<Playground>
+  <CImage fluid src="/public/images/react.jpg" />
+</Playground>
+
+## 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.
+
+<Playground>
+  <CImage rounded thumbnail src="/public/images/react400.jpg" width={200} height={200}/>
+</Playground>
+
+## Aligning images
+
+Align images with the `align` property.
+
+<Playground>
+  <div className="clearfix">
+    <CImage align="start" rounded src="/public/images/react400.jpg" width={200} height={200}/>
+    <CImage align="end" rounded src="/public/images/react400.jpg" width={200} height={200}/>
+  </div>
+</Playground>
+
+<Playground>
+  <div className="clearfix">
+    <CImage align="center" rounded src="/public/images/react400.jpg" width={200} height={200}/>
+  </div>
+</Playground>
+
+<Playground>
+  <div className="text-center">
+    <CImage rounded src="/public/images/react400.jpg" width={200} height={200}/>
+  </div>
+</Playground>
+
+
+## API
+
+### CImage
+
+<Props of={CImage} />

public/images/react.jpg

@@ -1,5 +1,3 @@
-// TODO: add documentation
-
 import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'