Last updated 4 months ago

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

NameTypeDefaultDescription
mtstring | number | array | object1emDefines the margin-top style property.
mbstring | number | array | object1emDefines the margin-top style property.
fontFamilystring"Source Sans Pro", sans-serifDefines the font-family style property. Default value from 'theme.typography.fontFamily'
fontSizestring16pxDefines the font-size style property. Default value from 'theme.typography.fontSize
fontWeightstring | number | array | object400Defines the font-weight style property. Default value from 'theme.typography.fontWeightRegular'
lineHeightstring | number | array | object1.6Defines the line-height style property. Default value from 'theme.typography.lineHeight'
letterSpacingstring | number | array | objectDefines the letter-spacing style property.
fontStylestring | array | objectnormalDefines the font-style style property.
textAlignstring | array | objectleftDefines the text-align style property.
colorstring#555555Defines the color style property. Default value from 'theme.color.text.primary'

Link props

NameTypeDefaultDescription
to*stringThe URL to link.
externalbooleanfalseIf true the link will display with external icon.