Inset text

Inset text uses a left border and padding to highlight important information that directly supports users’ current task.

It draws attention to important details, instructions or context that users need to know to complete their task.

Use inset text when information is important enough to emphasise but doesn’t require immediate action.

Use inset text when you need to:

• highlight instructions that apply to the current task or section
• provide important context that affects how users should proceed
• emphasise requirements or conditions users need to meet before proceeding

Don’t use inset text when other components better serve the user need.

Use a notification banner when:

• information requires immediate action
• you’re displaying error or success messages
• content is time-sensitive or urgent

Use a highlighted box when:

• information improves understanding but isn’t essential
• you’re presenting case studies, examples or best practice
• content provides valuable context but users can succeed without it

Write clear, actionable content that directly helps users with their current task.

Include only information that’s essential for task completion. If users can succeed without it, consider whether inset text is the right choice. Use complete sentences and write in the same tone as your main content. Be specific about what users need to know or do.

Position inset text close to where users need the information, typically just before or after the relevant section.

Keep content concise but complete. If you need more than a few sentences, consider whether the information belongs in the main content instead.

Do not use inset text if the content area is less than 66% of content area width.