Inset Text

Use inset text to differentiate a block of text from surrounding content, such as quotes, examples, or additional context.

Default Inset Text

Inset text has a grey left border and muted background to visually separate it from the main content.

<div class="inset-text">
  <p>It can take up to 8 weeks to register a lasting power of attorney...</p>
</div>

Multiple Paragraphs

<div class="inset-text">
  <p>You cannot apply for a provisional driving licence...</p>
  <p>You must also be a resident of Kaharagia.</p>
</div>

With Lists

<div class="inset-text">
  <p>To be eligible, you must:</p>
  <ul>
    <li>be 18 or over</li>
    <li>live in Kaharagia</li>
    ...
  </ul>
</div>

When to Use

Use inset text for:

• Quotes or citations
• Examples that illustrate a point
• Important contextual information
• Clarifying notes about the main content

Don't use inset text for:

• Warnings or alerts (use warning text or alerts instead)
• Error messages
• Primary content that all users need
• Long blocks of text

Usage Guidelines

Do

• Keep inset text concise
• Use to supplement main content, not replace it
• Consider if the information should be in the main flow instead

Don't

• Don't overuse — it loses impact if used too often
• Don't use for critical information users must see
• Don't nest inset text within inset text

Accessibility

• The visual styling helps distinguish the content
• Don't rely on the border alone to convey meaning
• Screen readers will read the content naturally

CSS Classes

.inset-text { }