Inset Text

The Inset Text component is a content tool to differentiate a block of text from the content that surrounds it.

Example

Use cases

• Providing additional information or explanations
• Including tips, recommendation or any advice
• Highlighting important information within a larger body of text
• Flagging up exceptions to guidance, or when there's alternative guidance for certain cases

Where not to use

This component should only be used to include any information that wouldn't be suited in the main body of a text or page.

Variants

Inset Text component has two variants:

• positive - This variant can be used to display a positive or neutral message.

• negative - for showing negative messaging.

Configuration

variant: 'positive' | 'negative'