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 | 4.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 |
"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.
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.
Related
Related Articles
