Inset text

<div class="ds_inset-text">
    <div class="ds_inset-text__text">
        You may be able to <a href="#">apply for free school meals</a> at the same time as you apply for the clothing grant.
    </div>
</div>

About this component

The inset text component is used to emphasise text so that it stands out from other surrounding text. 

When to use this component

Use inset text when you want to draw a user’s attention to a block of text on the page.

Use it when information is important enough to emphasise but does not require user action.

When not to use this component

Do not use this component for information that is very important, such as legal consequences. Use the warning text component instead.

For time-sensitive updates to your service, use the information notification message rather than inset text, for example if:

• the service will be unavailable
• a deadline is coming up

Do not use inset text on complex pages that have a lot of visually prominent components. Users may not notice inset text as a result. 

How to use

Keep information in inset text concise. One or two sentences is ideal.

Inset text only stands out if it’s used infrequently. Do not over-use it multiple times on a page.

Live example

Apply to the PVG scheme (mygov.scot)

Website analytics

To understand user behaviour, clicks on links in inset text blocks can be tracked through:

• the selected URL (also known as the 'click URL')
• the selected text (also known as 'click text')
• a data attribute showing the interaction

The data attribute is added automatically by the Design System’s ‘tracking’ script.

Tracking attributes

Links in inset text components get a data-navigation attribute of inset-link.

<div class="ds_inset-text">
    <div class="ds_inset-text__text">
        You may be able to <a data-navigation="inset-link" href="#">apply for free school meals</a> at the same time as you apply for the clothing grant.
    </div>
</div>