Page Loading

Inset text

Inset text is used to highlight a specific section of content within the page.

Inset text example

This is an important piece of information that stands out on a page

A well-crafted design system caters to the content that lives inside it, and well-crafted content is aware of how it’s presented in the context of a UI.

The interface patterns we establish must accurately reflect the nature of the text, images, and other content that live inside them. Similarly, our content should be aware of the manner in which it will be presented. The close relationship between content and design requires us to consider both as we construct our UIs.

How to use inset text

Use the inset text component to differentiate a block of text from the rest of the content on the page. For example, you can use it to:  

  • Provide an example
  • Provide additional information about the page
  • Highlight a key piece of information – such as a deadline or legal requirement

If inset text is used too often throughout a page or journey, users may stop noticing it. Use it sparingly to make sure it stays effective. Some users may also not notice inset text if it’s used on complex pages or near to other visually prominent elements.

Inset text should be aligned to the left of the page on SE and FBS, but the centre on SDI.

Adding inset text in the CMS

Using a template

To add an inset text component to a page, you should add a new panel, and then use the Inset text template. On pages that use left hand navigation, you'll need to remove the 8 span from the container. 

From scratch

If you're not using a template, you should first add a container to the panel you want to add inset text to. Then add the inset text component within the container, and any components you need within the inset text. You'll need to apply a span of 8 to the container, unless the page uses left hand navigation. 

Using a template

To add an inset text component to a page, you should add a new panel, and then use the Inset text template. 

From scratch

If you're not using a template, you can add this component to an existing panel by adding a new component and selecting inset text. You can then add the components you need underneath. The panel you're adding the inset text to should have a span of 8.

Inset text modifier rules

  • Background: default (white) or ‘background’ (grey)
  • Grid span: 8
    • Standard - applied at container level. Span removed on pages with left hand navigation
    • SDI - applied at panel level
  • Padding: default, unless required to improve layout  
  • Alignment: default 

Accessibility

People with visual disabilities may not be able to see the colour that marks out inset text. Instead they may rely on hidden labels to recognise it.

In the future, we will be looking at how we use section tags for components. This component would sit within an <aside> tag. This element is used to identify content that is related to the primary content on the page. 

Here's how inset text should look as standard

This includes on the SE and FBS websites. It has a span of 8 and it's aligned to the left of the page. We do this by adding the inset text component into a container, and applying the span to the container rather than the panel.

Here's how inset text should look on SDI

It's aligned to the centre of the page (but left-justified) and has a span of 8. We do this by applying the span at the panel level. There's no need for an additional container.