docs: Body docs page (#3186)

marigold-ui · Jul 24, 2023 · 5c92b32 · 5c92b32
1 parent 7e2e5cb
commit 5c92b32
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 0 deletions.
diff --git a/docs/content/components/body/body.mdx b/docs/content/components/body/body.mdx
@@ -0,0 +1,37 @@
+---
+title: Body
+group: Content
+caption: Structure for contents in a content context.
+---
+
+The `<Body>` is a content component, like the [`<Header>`](/components/header) and [`<Footer>`](/components/footer/) and is used to help structure the contents of components such as a [`<Card>`](/components/card) or [`<Dialog>`](/components/dialog).
+
+It behaves similar to its related components [`<Header>`](/components/header) and [`<Footer>`](/components/footer/). So the component has no properties, but that is not its task. It should wrap other components and structure its contents for a better code base.
+
+You can set `variant` and `size` props to style your `<Body>` element.
+
+## Usage
+
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx onlyCode
+import { Body } from '@marigold/components';
+```
+
+### Apperance
+
+<AppearanceTable component={title} />
+
+### Props
+
+<PropsTable />
+
+## Examples
+
+### Body used in context
+
+In this example you can see a `<Body>` element within a `<Card>`. This is a context in which the `<Body>` should be used.
+
+<ComponentDemo file="./simple-body.demo.tsx" />
diff --git a/docs/content/components/body/simple-body.demo.tsx b/docs/content/components/body/simple-body.demo.tsx
@@ -0,0 +1,22 @@
+import {
+  Card,
+  Header,
+  Headline,
+  Body,
+  Footer,
+  Text,
+} from '@marigold/components';
+
+export default () => (
+  <Card>
+    <Header>
+      <Headline level="2">A really good header!</Headline>
+    </Header>
+    <Body>
+      <Text>In this body fits really great content.</Text>
+    </Body>
+    <Footer>
+      <Text>And awesome footer!</Text>
+    </Footer>
+  </Card>
+);