Text

View on GitHub

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 section.

<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 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:

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:

<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.

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

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