Component <P1 /> - <P4 />

Props

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

Size table

Tag	Font size	Line height
P1	default: 18px	default: 26px
P2	default: 16px	default: 24px
P3	default: 14px	default: 20px
P4	default: 12px	default: 16px

---

Sizes

Examples:

<P1>Lorem, ipsum dolor</P1>
<P2>Lorem, ipsum dolor</P2>
<P3>Lorem, ipsum dolor</P3>
<P4>Lorem, ipsum dolor</P4>

Lorem, ipsum dolor

Lorem, ipsum dolor

Lorem, ipsum dolor

Lorem, ipsum dolor

---

Weight

Examples:

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

Lorem, ipsum dolor

Lorem, ipsum dolor

Lorem, ipsum dolor

Lorem, ipsum dolor

---

Font

Examples:

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

Lorem, ipsum dolor

Lorem, ipsum dolor

---

Fonts

Examples:

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

Lorem, ipsum dolor

Lorem, ipsum dolor

Lorem, ipsum dolor