Inset text

Use inset text to help users identify and understand important content on the page, even if they do not read the whole page.

Inset text

Use inset text for content that needs to stand out from the rest of the page. Do not use inset text if you need to tell a user to contact their GP or get medical help. Use a care card instead.

 

How to use Inset text

Create inset text with the example raw HTML block below. Follow the instruction within the raw HTML code to alter content. Or you can copy and paste the codes below to the page you are working on.

Use inset text to help users identify and understand important content on the page, even if they don't read the whole page.

Code for Inset text

CSS code
Paste the below style code at the top of your HTML page content

<style>
.inset-text {
border-left: 10px solid #782B90;
padding: 20px 40px 20px 40px;
}
</style>

Html code
Insert the below html code in your HTML body content

<div class="inset-text">
<p>Change the text here. Change the text here. Change the text here. Change the text here.</p>
</div>