We use cookies to collect anonymous data to help us improve your site browsing experience.

Click 'Accept all cookies' to agree to all cookies that collect anonymous data. To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.

Set cookie preferences

Your cookie preferences have been saved. You can change your cookie settings at any time.

Help us improve the Design System by taking our short survey.

Components

Inset text

Published
19 August 2020
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.

Live example

Apply for a new Blue Badge (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>
Back to top