Typography
Heading 1
Heading 2
Heading 3
Section header
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas unde ut quo eligendi deleniti nobis non veniam culpa asperiores accusamus. Adipisci dicta aspernatur quis, cumque vitae ipsa fugiat vel voluptas.
Internal linkExternal link<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3 fontWeight="{400}">Heading 3</H3>
<SectionHeader> Section <Emphasis>header</Emphasis> </SectionHeader>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas unde ut quo eligendi deleniti nobis
non veniam culpa asperiores accusamus. Adipisci dicta aspernatur quis, cumque vitae ipsa fugiat
vel voluptas.
</Typography>
<Link to="/">
Internal link
</Link>
<Link to="https://google.com" external>
External link
</Link>
Props
Name | Type | Default | Description |
---|---|---|---|
mt | string | number | array | object | 1em | Defines the margin-top style property. |
mb | string | number | array | object | 1em | Defines the margin-top style property. |
fontFamily | string | Soehne, sans-serif | Defines the font-family style property. Default value from 'theme.typography.fontFamily' |
fontSize | string | 16px | Defines the font-size style property. Default value from 'theme.typography.fontSize |
fontWeight | string | number | array | object | 400 | Defines the font-weight style property. Default value from 'theme.typography.fontWeightRegular' |
lineHeight | string | number | array | object | 1.6 | Defines the line-height style property. Default value from 'theme.typography.lineHeight' |
letterSpacing | string | number | array | object | Defines the letter-spacing style property. | |
fontStyle | string | array | object | normal | Defines the font-style style property. |
textAlign | string | array | object | left | Defines the text-align style property. |
color | string | #555555 | Defines the color style property. Default value from 'theme.color.text.primary' |
Link props
Name | Type | Default | Description |
---|---|---|---|
to* | string | The URL to link. | |
external | boolean | false | If true the link will display with external icon. |