Content
These components go inside the body of an article or a documentation page. Each one renders complete HTML under static server-side rendering; where a script is involved, it only adds to what is already on the page.
They live in the Osirion.Blazor.Components namespace of the Osirion.Blazor.Core package:
@using Osirion.Blazor.Components
Components
| Component | What it renders | Script | Available |
|---|---|---|---|
| Article metadata | Author, publish date and read time in one line | None | 3.0 |
| Callouts | A highlighted note, tip, important point, warning or caution, from Razor or Markdown | None | 4.0 |
| Tabs | Alternative content, such as one install command per package manager, behind tabs | None | 4.0 |
| Accordion and FAQ | Collapsible sections on <details>, and questions with FAQPage structured data |
None | 4.0 |
| Responsive image | An <img> with intrinsic size, srcset, sizes and lazy loading |
None | 4.0 |
| Video embed | A YouTube or Vimeo thumbnail that loads the player when pressed | Optional | 4.0 |
| Reading progress | A bar at the top of the window that fills as the reader scrolls | None | 4.0 |
| HTML renderer | Sanitized HTML in an <article>, with Prism highlighting, line numbers and copy buttons for code blocks |
Only for code blocks | 3.0 |
| Reveal | Content that fades or slides into view the first time it scrolls into the viewport | Required for the reveal | 3.0 |
| Content demo | A registered Razor component as a live example, with Preview and Code tabs | None | 4.0 |
"Optional" means the component works without script and the script adds behavior: the video embed is a link to the video until its script swaps in the player. "Required for the reveal" means the content stays hidden until the script reveals it, so do not wrap content a reader must see at once.
Razor or Markdown
Markdown pages rendered by the CMS cannot contain Razor components. Callouts are the exception: write them with
GitHub's alert syntax (> [!NOTE]) and they get the same styling as OsirionCallout. The other components are for
Razor pages and layouts.
HTML you did not write in Razor
OsirionHtmlRenderer puts HTML you did not write in Razor onto a page: the output of a Markdown processor, a CMS
field or an API response. Its fenced demo blocks render OsirionContentDemo, the live
examples on this site. The same folder holds OsirionReveal, which animates content as it scrolls
into view with a small script.
Since 4.0, OsirionHtmlRenderer sanitizes its input with the registered IHtmlContentSanitizer, an allow-list
built on HtmlSanitizer. Script, event handler attributes, javascript: and data: URLs, forms, iframes, inline
styles and SVG are removed before the markup reaches the page. The CMS content components (ContentView,
DocumentPage and the others) sanitize the same way, so you only reach for the renderer directly when you hold
HTML outside the CMS.