import { Canvas, Controls, Meta } from '@storybook/addon-docs';
import * as HeaderStories from './Header.stories';

# Header

<Meta of={HeaderStories} />

<br />

## Overview

서체는 정보를 전달하고 일관된 경험을 제공하는 요소

글꼴, 크기, 두께, 계층 등을 정의하여 텍스트의 내용과 중요도를 시각적으로 표현하고 다양한 화면에서 동일하게 경험할 수 있도록 한다.

<Canvas of={HeaderStories.Default} />

<Controls />

<br />

## Usage

기본적인 <strong>Header</strong> 컴포넌트 사용방법 입니다.

```javascript
import { Header } from '@lotte-innovate/lui';

export default () => <Header>텍스트</Header>;
```

<br />

## Variant

### Color Props

`color` props는 컴포넌트의 색상을 변경합니다.

기본 값은 `black` 입니다.

<Canvas of={HeaderStories.Color} />
### Weight Props

`weight` props는 컴포넌트의 텍스트 굵기를 변경합니다.

기본 값은 `medium` 입니다.

<Canvas of={HeaderStories.Weight} />

### Size Props

`size` props는 컴포넌트의 크기를 변경합니다.

기본 값은 `6` 입니다.

<Canvas of={HeaderStories.Size} />
### Align Props

`align` props는 텍스트의 정렬 방식을 지정합니다.

<Canvas of={HeaderStories.Align} />