Text

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

<Text $fontSize="display-1">Hello World!</Text>

System Modifiers

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

• color
• display
• flex-child
• font
• grid-child
• margin
• padding
• 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:

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