# Typography

> Typography components

```sh
yarn add @smashing/typography
```

### Text (span)

```jsx
<Text>I'm inline text</Text>
<Text color="muted">I'm inline text</Text>
<Text color="default">I'm inline text</Text>
<Text color="intense">I'm inline text</Text>
<Text intent="danger">I'm inline text</Text>
<Text intent="warning">I'm inline text</Text>
<Text intent="info">I'm inline text</Text>
<Text intent="success">I'm inline text</Text>
<Text size={300}>I'm inline text</Text>
<Text size={400}>I'm inline text</Text>
<Text size={500}>I'm inline text</Text>
<Text size={600}>I'm inline text</Text>
```

### Heading (h2)

```jsx
<Heading>I'm a heading</Heading>
<Heading as="h1" size={100}>I'm a heading</Heading>
<Heading as="h6" size={200}>I'm a heading</Heading>
<Heading size={300}>I'm a heading</Heading>
<Heading size={400}>I'm a heading</Heading>
<Heading size={500}>I'm a heading</Heading>
<Heading size={600}>I'm a heading</Heading>
<Heading size={700}>I'm a heading</Heading>
<Heading size={800}>I'm a heading</Heading>
<Heading size={900}>I'm a heading</Heading>
```

### Paragraph (p)

```jsx
<Paragraph>I'm a paragraph</Paragraph>
<Paragraph size={300}>I'm a paragraph</Paragraph>
<Paragraph size={400}>I'm a paragraph</Paragraph>
<Paragraph size={500}>I'm a paragraph</Paragraph>
<Paragraph size={600}>I'm a paragraph</Paragraph>
```

### Strong (strong)

```jsx
<Strong>I'm a strong tag</Strong>
<Strong size={300}>I'm a strong tag</Strong>
<Strong size={400}>I'm a strong tag</Strong>
<Strong size={500}>I'm a strong tag</Strong>
<Strong size={600}>I'm a strong tag</Strong>
```