Nebula

typography

Import

import { Typography } from '@xpanseinc/nebula'

Heading 1

<Typography variant="h1">
  Heading 1
</Typography>

Heading 2

<Typography variant="h2">
  Heading 2
</Typography>

Heading 3

<Typography variant="h3">
  Heading 3
</Typography>

Subheading

<Typography variant="subheading">
  Subheading
</Typography>

Body

<Typography variant="body">
  Body
</Typography>

Font Weight

I'm using the default theme font weight

<Typography variant="h2">
  I'm using the default theme font weight
</Typography>

I'm using a prop provided font weight

<Typography variant="h2" fontWeight="light">
  I'm using a prop provided font weight
</Typography>

Colors

I have the primary color

<Typography variant="h2" color="primary">
  I have the primary color
</Typography>

I have the positive color

<Typography variant="h2" color="positive">
  I have the positive color
</Typography>

I have the negative color

<Typography variant="h2" color="negative">
  I have the negative color
</Typography>