Components

Inset text (highlighted)

Experimental

Added by Rebecca Gorton in ‘CAS2 Short term accommodation for bail’ in September 2025.

How to use ‘experimental’ components

Anyone can add an ‘experimental’ status component to the MOJ Design System. They’re early in development and can be used as a starting point. Read about all the Design System statuses.

The inset text (highlighted) component emphasises guidance to busy internal users of a service.

Contents

Overview

A blue variable version of the inset text component

How the component is currently used

To highlight guidance to internal users as part of a service. We hypothesised that the warning component felt too urgent and the inset text could be easily missed or ignored in this context. Users are time-poor and expected to read through a fair bit of guidance. This component was being used by the DVLA to highlight content to users. This guidance inset has tested well and especially with users with access needs, they remarked that it helped them break down the content visually to process the content easier.

Contribute to this component

You can help develop this component by adding information to the ‘inset text (highlighted)’ Github discussion. This helps other people to use it in their service.

Designs

A Figma design has been added for this component. There may be more links and resources in the ‘inset text (highlighted)’ Github discussion.

Figma

If you work for MOJ, view the ‘inset text (highlighted)’ component in the MOJ Figma Kit.

If you work outside MOJ, go to the MOJ Figma Kit on the Figma community platform.

Contribute prototypes and Figma links

If you have design files that are relevant to this component you can add them to the Github discussion. This helps other people to use it in their service.

Accessibility

Accessibility findings have been added for this component. There may be more findings in the ‘inset text (highlighted)’ Github discussion.

External audit

• Conducted by: User Vision
• Date: 5 May 2025

Audit findings

No issues reported

Assistive Technology testing

Date: 6 March 2025

Testing details

No issues discovered

Contribute accessibility findings

If you have accessibility findings that are relevant to this component you can add them to the Github discussion. This helps other people to use it in their service.

Code

Code has been added for this component. There may be other code blocks in the ‘inset text (highlighted)’ Github discussion.

Code block 1: Nunjucks

    {% call govukInsetText({ classes: "govuk-!-margin-0 guidance-panel" }) %}
       <p>To apply for short-term accommodation (CAS2) for bail, the applicant must:</p>
       <h2 class="govuk-heading-s govuk-!-margin-0">Be:</h2>
       <ul class="govuk-list govuk-list--bullet">
         <li>18 years old or older</li>
         <li>able to live independently in shared accommodation
         </li>
       </ul>
       <h2 class="govuk-heading-s govuk-!-margin-0">Not:</h2>
       <ul class="govuk-list govuk-list--bullet">
         <li>be currently charged with, or have any past convictions or cautions, or current allegations of any sexual offences in Schedule 3 of the Sexual Offences Act 2003</li>
         <li>have breached immigration law (other than overstaying an approved period of leave to enter or remain in the UK)</li>
         <li>have the 'no recourse to public funds' (NRPF) condition applied to their permission to enter or stay in the UK</li>
         <li>be assessed as at high or very high risk of serious harm on OASys (Offender Assessment System)</li>
      </ul>
    {% endcall %}
    
    
    

How to use the code

Add class ‘guidance-panel’ to the govukInsetText component.

Code block 2: CSS

    .guidance-panel {
        border-left-color: govuk-colour('blue');
        background-color: #eaf4f9;
    }
    
    

Contribute code for this component

If you have code that is relevant to this component you can add it to the Github discussion. This helps other people to use it in their service.