---
title: BlockText
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/text/BlockText
---

Typography styles are used throughout the UI. If used consistently they will help you maintain a hierarchy that is clear to your users.

### Usage

```jsx
import { BlockText } from 'nr1'
```

### Examples

#### Basic

```jsx
<>
  <BlockText>
    Typography is at the core of <strong>great</strong> user interface design.
  </BlockText>
</>
```

#### Types

```jsx
<>
  <BlockText type={BlockText.TYPE.NORMAL}>
    Typography is at the core of <strong>great</strong> user interface design.
  </BlockText>
  <BlockText type={BlockText.TYPE.PARAGRAPH}>
    Typography is at the core of <strong>great</strong> user interface design.
  </BlockText>
</>
```

#### Changing semantic

```jsx
<BlockText type={BlockText.TYPE.PARAGRAPH} tagType={BlockText.TYPE.DIV}>
  This is a div element styled as a paragraph
</BlockText>
```

### Props

| `children` node       | Text to display.                                                                                                                                                                                                                                                                                                                                                                           |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `className` string    | Appends class names to the component. Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                            |
| `spacingType` enum\[] | Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like `margin` or `padding`. To omit a value, use `SPACING_TYPE.OMIT`. BlockText.SPACING_TYPE.EXTRA_LARGE, BlockText.SPACING_TYPE.LARGE, BlockText.SPACING_TYPE.MEDIUM, BlockText.SPACING_TYPE.NONE, BlockText.SPACING_TYPE.OMIT, BlockText.SPACING_TYPE.SMALL, |
| `style` object        | Inline style for custom styling. Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                                 |
| `tagType` enum        | Tag in which to wrap the text. Useful for changing the semantic meaning of the text. This does not apply any style. BlockText.TAG_TYPE.DIV, BlockText.TAG_TYPE.P                                                                                                                                                                                                                           |
| `testId` string       | Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests. For a test id to be valid, prefix it with your nerdpack id, followed up by a dot. For example, `my-nerdpack.some-element`. **Note:** You might not see `data-test-id` attributes as they are removed from the DOM, to debug them pass a `e2e-test` query parameter to the URL.                      |
| `type` enum           | Type of text that you want to display.This applies styles according to the type. BlockText.TYPE.NORMAL, BlockText.TYPE.PARAGRAPH                                                                                                                                                                                                                                                           |