# Typography

**Material documentation:**
[Typography](https://material.io/design/typography/the-type-system.html)

**Selector:**
og-typography

**Use:**
`<og-typography></og-typography>`

## Module
```javascript
import { TypographyModule } from '@opensesame/opensesameui';
```

## Types
```javascript
import { TypographyProps } from '@opensesame/opensesameui';
import { TypographyClasses } from '@opensesame/opensesameui';
```

## Props
Name | Type | Default | Description
---- | ---- | ------- | -----------
align | 'inherit' &#124; 'left' &#124; 'center' &#124; 'right' &#124; 'justify' | 'inherit' |
classes | object | | Override or extend the styles applied to the component.
className | string | | Class(es) applied to the component.
color | 'initial' &#124; 'inherit' &#124; 'primary' &#124; 'secondary' &#124; 'textPrimary' &#124; 'textSecondary' | 'initial' |
display | 'block' &#124; 'initial' &#124; 'inline' | 'initial' |
gutterBottom | boolean &#124; string | false | If `true`, a little bit of padding will be added at the bottom.
noWrap | boolean &#124; string | false |
paragraph | boolean &#124; string | false | If `true`, padding will be added at the bottom.
variant | 'h1' &#124; 'h2' &#124; 'h3' &#124; 'h4' &#124; 'h5' &#124; 'h6' &#124; 'subtitle1' &#124; 'subtitle2' &#124; 'body1' &#124; 'body2' &#124; 'button' &#124; 'caption' &#124; 'overline' &#124; 'inherit' &#124; 'srOnly' | 'body1' |

## Classes
Rule name | Class | Description
--------- | ----- | -----------
root | .og-typography-root | Styles applied to the root element.
alignCenter | .og-typography-align-center | Styles applied when `align="center"`.
alignInherit | .og-typography-align-inherit | Styles applied when `align="inherit"`.
alignJustify | .og-typography-align-justify | Styles applied when `align="justify"`.
alignLeft | .og-typography-align-left | Styles applied when `align="left"`.
alignRight | .og-typography-align-right | Styles applied when `align="right"`.
colorError | .og-typography-color-error | Styles applied when `color="error"`.
colorInherit | .og-typography-color-inherit | Styles applied when `color="inherit"`.
colorInitial | .og-typography-color-initial | Styles applied when `color="initial"`.
colorPrimary | .og-typography-color-primary | Styles applied when `color="primary"`.
colorSecondary | .og-typography-color-secondary | Styles applied when `color="secondary"`.
colorTextPrimary | .og-typography-color-text-primary | Styles applied when `color="textPrimary"`.
colorTextSecondary | .og-typography-color-text-secondary | Styles applied when `color="textSecondary"`.
displayBlock | .og-typography-display-block | Styles applied when `display="block"`.
displayInitial | .og-typography-display-initial | Styles applied when `display="initial"`.
displayInline | .og-typography-display-inline | Styles applied when `display="inline"`.
gutterBottom | .og-typography-gutter-bottom | Styles applied when `[gutterBottom]="true"`.
noWrap | .og-typography-no-wrap | Styles applied when `[noWrap]="true"`.
paragraph | .og-typography-paragraph | Styles applied when `[paragraph]="true"`.
h1 | .og-typography-h1 |
h2 | .og-typography-h2 |
h3 | .og-typography-h3 |
h4 | .og-typography-h4 |
h5 | .og-typography-h5 |
h6 | .og-typography-h6 |
subtitle1 | .og-typography-subtitle1 |
subtitle2 | .og-typography-subtitle2 |
body1 | .og-typography-body1 |
body2 | .og-typography-body2 |
button | .og-typography-button |
caption | .og-typography-caption |
overline | .og-typography-overline |
inherit | .og-typography-inherit |
srOnly | .og-typography-sr-only |