docs: image docs and demos (#3194)

docs/content/components/image/image-fit-position.demo.tsx

@@ -0,0 +1,12 @@
+import { Aspect, Image } from '@marigold/components';
+
+export default () => (
+  <Aspect ratio="landscape">
+    <Image
+      fit="cover"
+      position="bottom"
+      src="https://images.unsplash.com/photo-1603910234616-3b5f4a6be2b4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
+      alt="event_image"
+    />
+  </Aspect>
+);

docs/content/components/image/image.demo.tsx

@@ -0,0 +1,8 @@
+import { Image } from '@marigold/components';
+
+export default () => (
+  <Image
+    src="https://images.unsplash.com/photo-1603910234616-3b5f4a6be2b4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
+    alt="event_image"
+  />
+);

docs/content/components/image/image.mdx

@@ -0,0 +1,66 @@
+---
+title: Image
+group: Content
+caption: Component to render images
+---
+
+The `<Image>` is a content component that renders an image on the page.
+
+The `src` property is always required. It can be used with a link or with an image from the server's file system.
+
+To improve accessibility, `alt` information should be provided whenever possible.
+The `alt` attribute holds a text description of the image and screen readers read this description out to their users so they know what the image means. The `alt` text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot.
+
+For more information about accessibility please visit [w3.org](https://www.w3.org/WAI/tutorials/images/tips/) or [bitvtest.de](https://ergebnis.bitvtest.de/pruefschritt/bitv-20-web/9-1-1-1b-alternativtexte-fuer-grafiken-und-objekte)
+
+## Usage
+
+### Import
+
+```tsx
+import { Image } from '@marigold/components';
+```
+
+### Apperance
+
+<AppearanceTable component={title} />
+
+### Props
+
+<PropsTable
+  props={[
+    {
+      property: 'alt (required)',
+      type: 'string',
+      description:
+        'The alt tag contains descriptive text that is displayed when an image fails to load or is read aloud when a user interacts with a screen reader on the page.',
+      default: '',
+    },
+    {
+      property: 'fit',
+      type: '"contain" | "cover" | "fill" | "none" | "scale-down"',
+      description: 'Resized the Image to fit its container',
+      default: '',
+    },
+    {
+      property: 'position',
+      type: '"bottom" | "center" | "left" | "right" | "top" | "leftBottom" | "rightBottom" | "leftTop" | "rightTop"',
+      description: 'Position the Image inside the container when you use "fit"',
+      default: '',
+    },
+  ]}
+/>
+
+## Usage
+
+### Simple Image
+
+In this example you can see a `<Image>` Component.
+
+<ComponentDemo file="./image.demo.tsx" />
+
+### Image with fit and position
+
+In this example, the `<Image>` gets the `<fit>` property and the `<position>` property is set to bottom. You also need to wrap the `<Image>` in a `<Ratio>` component so that the fit and position properties can be used.
+
+<ComponentDemo file="./image-fit-position.demo.tsx" />