Sections
Section components build the blocks of a landing page or the top of an article: a hero, a titled content band,
contact details, pricing, the steps of a process, metrics and detail cards. Each renders complete HTML under static SSR and needs no script,
except the responsive showcase, which is a demo tool for interactive pages, and the count-up of a metric card with Animate.
Most of them live in the Osirion.Blazor.Components namespace of the Osirion.Blazor.Core package, and their data
types in Osirion.Blazor.Core.Models:
@using Osirion.Blazor.Components
@using Osirion.Blazor.Core.Models
Components
| Component | What it renders | Script | Available |
|---|---|---|---|
| Hero section | A page header with title, subtitle, buttons and a side or background image | None | 4.0 |
| Base section | A <section> with heading, description, container and background options |
None | 4.0 |
| Contact info section | Address, phone numbers, email addresses and websites as links | None | 4.0 |
| Pricing table and feature comparison | Plans side by side, and a table comparing their features | None | 4.0 |
| Steps | Numbered "how it works" steps as an ordered list | None | 4.0 |
| Responsive showcase | A preview frame that switches between desktop, tablet and mobile widths | Interactive render mode | 4.0 |
| Metric grid | Metric cards in a responsive list | Only for animated cards | 3.0 |
| Context card grid | A heading and labeled detail cards, each with an accent color | None | 3.0 |
| Page heading | A page title as the h1 with an optional sentence, for pages without a hero |
None | 4.0 |
Carousels
Two carousels fill a band of a marketing page: a strip of client or partner logos, and a rail of testimonial cards. Both render every item as HTML under static server-side rendering and move with a CSS animation. A small script adds dragging, horizontal wheel scrolling and a pause button.
| Component | What it shows | Moves by default |
|---|---|---|
| InfiniteLogoCarousel | Logos, optionally linked, with light and dark variants | No, set EnableAutoScroll |
| OsirionTestimonialCarousel | Testimonial cards with name, role, quote and rating | Yes |
What they share
- Setup. The enhancement script loads through BlazorJSComponents, which
AddOsirionregisters. WithoutAddOsirion, addbuilder.Services.AddJSComponents();inProgram.cs. - Your own items. Pass your logos or testimonials. Without them, both components show built-in sample content meant for demos, with images that load from external addresses.
- Motion. The animation pauses while the pointer is over the carousel (unless
PauseOnHoveris off) and while keyboard focus is inside it. While the carousel animates, the script adds a pause button, and it runs its per-frame work only while the carousel is on screen and moving. Vertical wheel scrolling always reaches the page. - Reduced motion. Under
prefers-reduced-motion: reducethe animation stops; the testimonial carousel then shows its cards as a static wrapped grid. - Looping copies. The items repeated to close the loop are
aria-hiddenandinert, so screen readers read each item once and their links are not in the tab order. - Labels. Each carousel is a
<section>named bySectionTitle. The pause button's labels default to "Pause animation" and "Play animation"; setdata-pause-labelanddata-play-labelattributes on the component to translate them.
Related
- Background pattern
- Cards, including the testimonial card the carousel repeats
- Core components