Typography

Heading 1

A 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
Copy
Copied
<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

NameTypeDescription
mtstring | number | array | objectDefines the margin-top style property. Default value: 1em
mbstring | number | array | objectDefines the margin-top style property. Default value: 1em
fontFamilystringDefines the font-family style property. Default value from 'theme.typography.fontFamily' Default value: Soehne, sans-serif
fontSizestringDefines the font-size style property. Default value from 'theme.typography.fontSize Default value: 16px
fontWeightstring | number | array | objectDefines the font-weight style property. Default value from 'theme.typography.fontWeightRegular' Default value: 400
lineHeightstring | number | array | objectDefines the line-height style property. Default value from 'theme.typography.lineHeight' Default value: 1.6
letterSpacingstring | number | array | objectDefines the letter-spacing style property.
fontStylestring | array | objectDefines the font-style style property. Default value: normal
textAlignstring | array | objectDefines the text-align style property. Default value: left
colorstringDefines the color style property. Default value from 'theme.color.text.primary' Default value: #555555

Link props

NameTypeDescription
to*stringThe URL to link.
externalbooleanIf true the link will display with external icon. Default value: false