import { Meta, ArgTypes, Canvas } from "@storybook/addon-docs/blocks";
import { Title } from "./Title";
import * as TitleStories from "./Title.stories";

<Meta of={TitleStories} />

# Title

The `Title` component is used for displaying context based information. A title and description can be provided.

It was originally designed to display a insurance type, and company name.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { Title } from "@simplybusiness/mobius";
```

### Default

<Canvas of={TitleStories.Default} />

## Props

<ArgTypes of={Title} />

## Component HTML Structure and Class names

The following HTML is rendered for a Title:

```html
<element className="mobius-title">
  <Flex>
    <svg className="mobius-title__icon">{VerticalLine}</svg>
    <Flex flexDirection="column">
      <p className="mobius-title__header">Title</p>
      <div className="mobius-title__description">Description</div>
    </Flex>
  </Flex>
</element>
```
