docs: headline docs and demo (#3192)

marigold-ui · Jul 24, 2023 · 418cab9 · 418cab9 · vercel · Jul 24, 2023
1 parent 09e11c6
commit 418cab9
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 0 deletions.
diff --git a/docs/content/components/headline/headline.demo.tsx b/docs/content/components/headline/headline.demo.tsx
@@ -0,0 +1,12 @@
+import { Body, Headline, Text } from '@marigold/components';
+
+export default () => (
+  <Body>
+    <Headline level="3">Awesome Headline!</Headline>
+    <Text>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+    </Text>
+  </Body>
+);
diff --git a/docs/content/components/headline/headline.mdx b/docs/content/components/headline/headline.mdx
@@ -0,0 +1,56 @@
+---
+title: Headline
+group: Content
+caption: Component for headlines.
+---
+
+The main task of the `<Headline>` component is to serve as a title of a content section.
+It should be used when you want to structure different parts of informations. That could be the page title, text headings or the title of different content parts.
+
+The component has a `level` property that allows you to select a number from 1-6. This is a feature for SEO optimization, so that a rendered `level="5"` can look like a HTML H2 element.
+
+Alternatively you can set this with the `size` prop.
+With the `size` prop you can style the different levels.
+
+## Usage
+
+### Import
+
+```tsx
+import { Headline } from '@marigold/components';
+```
+
+### Appearance
+
+<AppearanceTable component={title} />
+
+### Props
+
+<PropsTable
+  props={[
+    {
+      property: 'level',
+      type: 'string',
+      description: 'Set a different level from theme, values are from 1 - 6.',
+      default: `1`,
+    },
+    {
+      property: 'align',
+      type: 'left | center | right',
+      description: 'Set the align of the headline.',
+    },
+    {
+      property: 'color',
+      type: 'string',
+      description: 'Set the color of the headline.',
+    },
+  ]}
+/>
+
+## Examples
+
+### Headline with Text
+
+In this example you see a simple headline with some text.
+
+<ComponentDemo file="./headline.demo.tsx" />