OsirionCallout
A callout highlights a note, tip, important point, warning or caution inside content. Write it in Markdown with
GitHub's alert syntax, or render it from a Razor page with OsirionCallout. Both look the same, follow the theme and
the CSS framework adapter, and need no script.
Package Osirion.Blazor.Core, namespace Osirion.Blazor.Components. Source on GitHub. Available from 4.0.
Note
Callouts need no script and follow the site's theme.
Set a title
Without Title, the callout shows the name of its type.
Back up first
Back up the database before you run the migration.
@using Osirion.Blazor.Components
<OsirionCallout Type="CalloutType.Note">
<p>Callouts need no script and follow the site's theme.</p>
</OsirionCallout>
<OsirionCallout Type="CalloutType.Tip" Title="Set a title">
<p>Without <code>Title</code>, the callout shows the name of its type.</p>
</OsirionCallout>
<OsirionCallout Type="CalloutType.Warning" Title="Back up first">
<p>Back up the database before you run the migration.</p>
</OsirionCallout>Usage
In Markdown
Start a blockquote with the kind in brackets:
> [!NOTE]
> Content is read from the `content` folder in Development.
The five kinds render like this:
Note
Useful information the reader should notice even when skimming.
Tip
Optional advice that helps the reader do something better or more easily.
Important
Key information the reader needs to succeed.
Warning
Urgent information that needs the reader's attention to avoid problems.
Caution
Advice about the risks or negative outcomes of an action.
In Razor
@using Osirion.Blazor.Components
<OsirionCallout Type="CalloutType.Warning" Title="Back up first">
<p>Back up the database before you run the migration.</p>
</OsirionCallout>
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
Type |
CalloutType |
CalloutType.Note |
The kind of callout: Note, Tip, Important, Warning or Caution. It sets the color, the icon and the default Title. |
Title |
string? |
null |
The heading shown above the content. When empty or white space, the name of the Type is shown ("Note", "Warning" and so on), as Markdown alerts show it; set it for other languages or a more specific heading. |
ChildContent |
RenderFragment? |
null |
The callout's content, rendered in the body under the title. |
Theme |
ThemeMode |
ThemeMode.System |
The component's color mode. Light or Dark writes it to data-theme (data-bs-theme under Bootstrap) on the root element; System writes nothing. |
Class |
string? |
null |
Extra CSS classes for the component's root element. |
Style |
string? |
null |
An inline style for the component's root element. |
Unmatched attributes go on the root <div>. Style is accepted but the component does not write it; use Class.
Behavior
- The component renders
role="note", so assistive technology announces it as a note without interrupting the reader the way an alert role would. - The title is text, not color: the color and icon only reinforce it.
- The title keeps the normal text color; the kind's color is used for the icon and border, so light colors such as amber never carry text.
- The icon is drawn in CSS, so the HTML sanitizer can keep removing inline SVG from content.
- The root element is
<div class="osirion-callout osirion-callout-{type}">with the title in a<p class="osirion-callout-title">and the content in<div class="osirion-callout-body">.
Styling
Both forms share the --osirion-callout-color and --osirion-callout-icon custom properties. Each kind takes its
color from the theme's status tokens (--osirion-status-info, --osirion-status-success, --osirion-action-primary,
--osirion-status-warning, --osirion-status-danger), so a framework adapter recolors callouts with the rest of the
site. Override a kind with its class, for example .osirion-callout-tip, .markdown-alert-tip { --osirion-callout-color: #0e7490; }.
The rules live in the Core stylesheet (css/utilities/callouts.scss), not in scoped component CSS, so that the
Markdown alerts, which the CMS renders without a component, get the same look.