import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { Head1 } from './head.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

- [Header Accessibility
  Tips](/?path=/story/components-typography-accessibility-tips--page)

<Meta title="Components/Typography/Head" component={Head1} />

# Head

- [Header Accessibility
  Tips](/?path=/story/components-typography-accessibility-tips--page)

Headings `h1` - `h5` with safe defaults.

## Accessibility Requirements

Prefer the heading that makes semantic sense for the page on which it's used. Control the font size with the `fontSize` prop.

## Variations

### Default

| H Tag | Pixel Value |
| ----- | ----------- |
| h5    | 16px        |
| h4    | 18px        |
| h3    | 20px        |
| h2    | 27px        |
| h1    | 34px        |

<Canvas>
  <Story id="components-typography-head--default" />
</Canvas>

### Font Sizes

| Size | Pixel Value |
| ---- | ----------- |
| f1   | 16px        |
| f2   | 18px        |
| f3   | 20px        |
| f4   | 27px        |
| f5   | 34px        |
| f6   | 41px        |
| f7   | 48px        |

<Canvas>
  <Story id="components-typography-head--font-sizes" />
</Canvas>

### Color

Change the text colour by providing a theme color to the `colorName` prop

<Canvas>
  <Story id="components-typography-head--color" />
</Canvas>

## Supported Property Mixins

### Spacing

<Canvas>
  <Story id="components-typography-head--mixins-spacing" />
</Canvas>

### Stackee

<Canvas>
  <Story id="components-typography-head--mixins-stackee" />
</Canvas>

## Props

<FlowPropsTable ofComponent={Head1} />

## External Reference

<ExternalReferenceLink src="" type="figma" />
<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/typography/head"
  type="github"
/>