---
name: Text
menu: Patterns
parent: Modules
route: /patterns/text
---

# Text

Renders text in a consistent way across Bulb.

## States

### Paragraph Text

```specimen-react
<Text>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</Text>
```

By simply using the Text component as-is, you'll get the standard paragraph.

### In-line Text

```specimen-react
<Text inline>
  Lorem ipsum dolor sit amet.
</Text>
```

In-line text is used when you have a simple sentence, or a text requirement that doesn't require paragraph styling.

### Sizes and Styles

```specimen-react
<Text size="snail">
  Lorem ipsum dolor sit amet.
</Text>
```

```specimen-react
<Text size="otter">
  Lorem ipsum dolor sit amet.
</Text>
```

```specimen-react
<Text size="dolphin">
  Lorem ipsum dolor sit amet.
</Text>
```

```specimen-react
<Text size="hippo">
  Lorem ipsum dolor sit amet.
</Text>
```

```specimen-react
<Text size="mammoth">
  Lorem ipsum dolor sit amet.
</Text>
```

```specimen-react
<Text size="whale">
  Lorem ipsum dolor sit amet.
</Text>
```

You can specify the size of the text using the size property and one of the size names, as described on the Typography page.

```specimen-react
<Text bold>
  Lorem ipsum dolor sit amet.
</Text>
```

Bold text can also be specified with the `bold` modifier.

```specimen-react
<Text>
  <Text inline size='whale'>Hello!</Text>
  This is some <Text inline bold>text</Text> that we have
  rendered inside some other text.
</Text>
```

It is possible to mix and match bold, inline and sizes together, especially within other Text components.

### Headers

By adding the heading modifier, the text is rendered as an `<h1>` heading. For accessibility, the heading must have the correct level for the heading's context in the document structure. This can be employed using the `level` prop, and is included on the heading element as `aria-level="[level]"`.

A `level` of `1` or no `level` prop supplied will both result in `<h1>`.

```specimen-react
<Text size="otter" heading>
  Lorem ipsum dolor sit amet.
</Text>
```

```specimen-react
<Text size="dolphin" heading level="2">
  Lorem ipsum dolor sit amet.
</Text>
```

```specimen-react
<Text size="hippo" heading level="3">
  Lorem ipsum dolor sit amet.
</Text>
```
