From 418cab9e0224c13b4d026a0c48ef12cbe4a5aecb Mon Sep 17 00:00:00 2001 From: sarahgm <38324334+sarahgm@users.noreply.github.com> Date: Mon, 24 Jul 2023 12:59:58 +0200 Subject: [PATCH] docs: headline docs and demo (#3192) --- .../components/headline/headline.demo.tsx | 12 ++++ docs/content/components/headline/headline.mdx | 56 +++++++++++++++++++ 2 files changed, 68 insertions(+) create mode 100644 docs/content/components/headline/headline.demo.tsx create mode 100644 docs/content/components/headline/headline.mdx diff --git a/docs/content/components/headline/headline.demo.tsx b/docs/content/components/headline/headline.demo.tsx new file mode 100644 index 0000000000..e213984a2e --- /dev/null +++ b/docs/content/components/headline/headline.demo.tsx @@ -0,0 +1,12 @@ +import { Body, Headline, Text } from '@marigold/components'; + +export default () => ( + + Awesome Headline! + + 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. + + +); diff --git a/docs/content/components/headline/headline.mdx b/docs/content/components/headline/headline.mdx new file mode 100644 index 0000000000..563bf5f1d4 --- /dev/null +++ b/docs/content/components/headline/headline.mdx @@ -0,0 +1,56 @@ +--- +title: Headline +group: Content +caption: Component for headlines. +--- + +The main task of the `` 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 + + + +### Props + + + +## Examples + +### Headline with Text + +In this example you see a simple headline with some text. + +