Inset text
A short block of text set apart from the text around it, so it is harder to skim past.
In a page
Inset text only makes sense with prose on both sides of it — the indentation is the whole signal, and there is nothing to indent from if it stands alone.
Medication recorded during this admission is listed below, in the order it was prescribed.
Medication stopped before admission is not shown here. Check the GP record for the full prescribing history.
Doses are as prescribed, not as administered.
<!-- Type is inherited, so it reads at whatever size the surrounding
copy is set in. There is no size modifier and no severity. -->
<div class="sr-inset-text">
<p>Medication stopped before admission is not shown here.</p>
</div>
<!-- Use aside only where the content is genuinely tangential: that is
what the role tells a screen reader. -->
<aside class="sr-inset-text">
<p>Results from before 2019 are held in the legacy system.</p>
</aside>It is part of the page. A banner is an event.
That sentence is the entire boundary, and it is worth learning because these two get confused constantly — both are a box with a coloured edge.
Inset text was typed by whoever wrote the page. It is there every time the page loads, it says something about the content around it, and nothing has happened. A notification banner appears because something happened — a save succeeded, a record is locked, the system goes down at 2am.
Inset text has no icon, no heading, no buttons and no status colour. Every one of those is missing on purpose. Add an icon and it reads as a status change; add a heading and it becomes a section; add a button and it is a call to action, which is a banner variant. If you find yourself wanting one, what you want is a notification banner.
The Figma component was drawn in informational blue with the info status colour on its bar, and the frame beside it added a heading and two buttons — at which point it rendered the same thing as the banner's call-to-action variant. Two components that draw the same thing get used interchangeably and then drift apart. It has been narrowed to a neutral surface and a neutral bar.
The bar is neutral, and that is the point
A coloured bar reports that something has a status. Nothing has happened here, so there is
nothing to report — the block is set apart, not flagged. The bar is
Border/Strong at 3.44:1 on the page, which clears the 3:1 that WCAG 2.2 SC 1.4.11 wants
for a non-text boundary without shouting.
It also means the component survives greyscale: the indentation, the surface and the bar are three independent signals, and none of them is carrying the meaning. The words are.
The type is inherited
There is no size modifier. Inset text sits inside body copy and has to read at whatever size that copy is set in — 16px in a record view, 14px in a dense table area. Fixing a size here would render a note inside a table at the wrong one.
In a record view, at 16px body copy.
In a dense table area, at 14px — the same component.
<!-- Type is inherited, so it reads at whatever size the surrounding
copy is set in. There is no size modifier and no severity. -->
<div class="sr-inset-text">
<p>Medication stopped before admission is not shown here.</p>
</div>
<!-- Use aside only where the content is genuinely tangential: that is
what the role tells a screen reader. -->
<aside class="sr-inset-text">
<p>Results from before 2019 are held in the legacy system.</p>
</aside>Keep it short
Two or three sentences. Past a short paragraph the emphasis stops working, because a page where several blocks are emphasised has emphasised nothing. If it needs a heading to be followed, it is too long to be inset — make it a section.
Never put two inset blocks next to each other.
A short block of text set apart from the text around it, so it is harder to skim past.
When to use
- A caveat the reader has to carry into the rest of the page, "this list does not include medication stopped before admission".
- A short rule or condition that governs the section it sits in.
- A note the page author wrote and that is there every time the page loads.
When not to use
- Anything that happened. A save succeeded, a record is locked, the system goes down at 2am. That is a notification banner. The line to hold is:
> Inset text is part of the page. A banner is an event.
- Anything with a status. A warning, an error, a success. Those need a severity, and inset text has none, deliberately.
- Anything with an action. The moment it needs a button, it is a call to action, which is a banner variant.
- A message about one form field. That is the field's own error or hint, see form fields.
- Emphasis on a phrase. Use
<strong>. Inset text is for a block.
How it works
- No icon, no heading, no buttons, no colour. Each one would turn it into a banner, and two components that render the same thing get used interchangeably and then drift apart. This is the narrowing recorded in.
- The bar is neutral, not a status. A coloured bar reports that something has a status. Nothing has happened, so there is nothing to report.
- The type is inherited. Inset text sits inside body copy and reads at whatever size that copy is set in, 14px inside a table, 16px in a record view.
- Keep it to a short paragraph. Two or three sentences. Past that the emphasis stops working.
- One per section. Two inset blocks next to each other emphasise nothing.
Options
None. One block, one appearance, severity axis.
Do & don't
| Do | Don't |
|---|---|
| Use it for a caveat the author wrote | Use it to announce something that just happened |
| Keep it to two or three sentences | Let it grow until it needs a heading |
| Let it inherit the surrounding text size | Fix a font size on it |
| Put a link inside the prose if the prose needs one | Put a button row underneath it |
| Use a notification banner when there is a severity | Tint the bar red to mean "important" |
Accessibility
- The indentation, the surface and the bar are three signals and none of them carries the meaning, the words do. It survives greyscale (SC 1.4.1).
Border/Strongis 3.44:1 on the page background, clearing the 3:1 of SC 1.4.11. Asserted inscripts/check-contrast.mjs.- It is not a live region. It is present on load, so
role="status"oraria-livewould announce page furniture on every screen entry. <div>by default.<aside>only where the content is genuinely tangential, because that is what the role tells a screen reader. Never<blockquote>, this is not a quotation.- No fixed width, so it reflows with its container (SC 1.4.10).
Content
- Sentence case, full sentences, ending in a full stop.
- Say the thing, not that it is important. "Results from before 2019 are held in the legacy system", not "Please note: important information".
- Do not open with "Note:" or "Important:". The block already says that.
Known gaps
- No MAUI style. The intended construction is a 4px
BoxViewbeside the text in a two-columnGrid, because MAUI has no single-edge stroke. Add it when a mobile screen needs one. - The Figma component had no description until 2026-09-16, which is part of why it was being used as a banner.
Related
- Notification banner, for anything that happened
- Form fields, for a message about one field
- Link, for a link inside the prose