Inset text

Used to highlight a block of text from the content that surrounds it. For example, a quote or something added to the main content.

Open this example in a new window

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

We based our inset text component on the one built by GDS. Find out more about the inset text component on GOV.UK’s Design System.

Website analytics

To understand user behaviour, clicks on links in inset text blocks can be tracked through the click URL, the click text and a data attribute showing the interaction.

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

Live example

Apply for a new Blue Badge (mygov.scot)

Feedback, help and support

If you need help or support you can e-mail us at designsystem@gov.scot

There is a problem

Thanks for your feedback

Was this helpful?

Yes

Your comments

Your feedback helps us to improve this website. Do not give any personal information because we cannot reply to you directly.

Choose a reason for your feedback

Your comments

Your feedback helps us to improve this website. Do not give any personal information because we cannot reply to you directly.

Yes, but

Choose a reason for your feedback

Your comments

Your feedback helps us to improve this website. Do not give any personal information because we cannot reply to you directly.

Information

Information

Sample HTML

Website analytics

Live example

Feedback, help and support

There is a problem