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

Sample HTML

<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

Each link in inset text blocks should be given a data attribute to help with tracking.

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, for example data-navigation="information-link".

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top