---
title: "Components — Text"
canonical: https://sky-ui.cf.sky.com/components/text
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Components — Text

Allows for the ability to write content.

```js
import { Text } from '@sky-uk/ui-core';
```

The `Text` component allows for the ability to write content with a consistent typographic scale. It supports different font sizes and variants to suit various use cases, for more information on when to use each visit our [Text Usage](/components/text/usage) section.

```tsx
<Flex $flexDirection="column" $gap={4}>
  <Text $fontSize="display-1" $variant="headline">Headline Display 1</Text>
  <Text $fontSize="display-2" $variant="headline">Headline Display 2</Text>
  <Text $fontSize="display-3" $variant="headline">Headline Display 3</Text>
  <Text $fontSize="display-4" $variant="headline">Headline Display 4</Text>
  <Text $fontSize="display-5" $variant="headline">Headline Display 5</Text>

  <Text $fontSize="display-1">Display 1</Text>
  <Text $fontSize="display-2">Display 2</Text>
  <Text $fontSize="display-3">Display 3</Text>
  <Text $fontSize="display-4">Display 4</Text>
  <Text $fontSize="display-5">Display 5</Text>
  <Text $fontSize="display-6">Display 6</Text>
  <Text $fontSize="display-7">Display 7</Text>

  <Text $fontSize="body-lg">Body Large</Text>
  <Text $fontSize="body">Body</Text>
  <Text $fontSize="body-sm">Body Small</Text>

  <Text $fontSize="legal">Legal</Text>
</Flex>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| $fontSize | string | undefined | For a full list of available font sizes, please refer to the [Typography](/foundations/typography/) documentation. |
| $variant | string | default (Sky Text) | Allows use of the "Sky Headline" font by using `$variant="headline"`. Any unsupported Headline $fontSize values fallback to default sizes. |

---

## System Modifiers

The `Text` component also supports the props applied using the following system modifiers:

- [color](/core/system/color/)
- [display](/core/system/display/)
- [flex-child](/core/system/flex-child/)
- [font](/core/system/font/)
- [grid-child](/core/system/grid-child/)
- [margin](/core/system/margin/)
- [padding](/core/system/padding/)
- [text](/core/system/text/)

---

## As

The `Text` component renders a `span` element by default. You can override this with an element that is more semantic within the context of your app using the `as` prop:

```jsx
<Text as="p">Hello World!</Text>
```

---

## VisuallyHiddenText

For accessibility purposes we may want to include visually hidden text content to provide additional context for screen readers.

```js
import { VisuallyHiddenText } from '@sky-uk/ui-core';
```

---

```tsx
<p>All of this text will be shown <VisuallyHiddenText>except for this</VisuallyHiddenText> to the browser.</p>
```