Component <H0 /> - <H5 />

Props

Props	Type	Meaning	Possible values
weight	string	Change text font weight	light / normal / semibold / bold
type	string	Change text font family	main / heading / banner
as	string	Set render element. Not working with dangerouslySetInnerHTML	tag name
font	array	Set text custom font size and line height base on screen size	Array<{ fontSize: string, lineHeight: string }>
nestedStyles	boolean	Apply text styles to all nested elements	true / false

Size table

Tag	Font size	Line height
H0	lg: 48px - md: 40px - default: 32px	lg: 52px - md: 44px - default: 36px
H1	lg: 48px - md: 36px - default: 32px	lg: 56px - md: 40px - default: 40px
H2	lg: 36px - md: 32px - default: 24px	lg: 40px - md: 36px - default: 32px
H3	lg: 32px - default: 24px	lg: 40px - default: 32px
H4	lg: 24px - default: 22px	lg: 32px - default: 30px
H5	default: 20px	default: 28px

---

Sizes

Examples:

<H0>Lorem, ipsum dolor</H0>
<H1>Lorem, ipsum dolor</H1>
<H2>Lorem, ipsum dolor</H2>
<H3>Lorem, ipsum dolor</H3>
<H4>Lorem, ipsum dolor</H4>
<H5>Lorem, ipsum dolor</H5>

Lorem, ipsum dolor

Lorem, ipsum dolor

Lorem, ipsum dolor

Lorem, ipsum dolor

Lorem, ipsum dolor

Lorem, ipsum dolor

---

Weight

Examples:

<H2 weight="light">Lorem, ipsum dolor</H2>
<H2 weight="normal">Lorem, ipsum dolor</H2>
<H2 weight="semibold">Lorem, ipsum dolor</H2>
<H2 weight="bold">Lorem, ipsum dolor</H2>

Lorem, ipsum dolor

Lorem, ipsum dolor

Lorem, ipsum dolor

Lorem, ipsum dolor

---

Font

Examples:

<H2
  font={{
    default: { fontSize: '14px', lineHeight: '18px' },
    sm: 'none',
    md: { fontSize: '16px', lineHeight: '20px' },
    lg: { fontSize: '18px', lineHeight: '22px' }
  }}
>
  Lorem, ipsum dolor
</H2>
<H4
    font={{
      default: { fontSize: '24px', lineHeight: '28px' },
      xs: 'none',
      sm: 'none',
      md: 'none',
      lg: 'none',
    }}
  >
    Lorem, ipsum dolor
  </H4>

Lorem, ipsum dolor

Lorem, ipsum dolor

---

Fonts

Examples:

<H2 type="main">Lorem, ipsum dolor</H2>
<H2 type="heading">Lorem, ipsum dolor</H2>
<H2 type="banner">Lorem, ipsum dolor</H2>

Lorem, ipsum dolor

Lorem, ipsum dolor

Lorem, ipsum dolor