OsirionContentNotFound

OsirionContentNotFound renders the body of a not found page: an icon, an error code, a heading, a message and buttons back into the site, with optional suggested links, a search slot and a contact address. With the error code removed, it also works as an empty state for a list or search. The CMS page components show it when their content is missing.

Package Osirion.Blazor.Core, namespace Osirion.Blazor.Components. Source on GitHub.

@using Osirion.Blazor.Components

@* The buttons are links to pages of this site, and the size keeps the empty state compact inside the page. The page
   has its own h1, so the title is an h2. *@
<OsirionContentNotFound Title="This page has moved"
                        HeadingLevel="2"
                        Message="We reorganized the docs, and one of these pages may have what you need."
                        ShowIcon="false"
                        ShowSuggestions="true"
                        Suggestions="suggestions"
                        PrimaryButtonText="All components"
                        PrimaryButtonUrl="/components"
                        Variant="centered"
                        Size="small" />

@code {
    private static readonly ContentNotFoundSuggestion[] suggestions =
    [
        new() { Text = "Contact form", Url = "/components/contact-form", Description = "A form that validates on the server." },
        new() { Text = "Forms and feedback", Url = "/components/forms-and-feedback" }
    ];
}

The demo only renders the markup. It does not set the status code of this page, which stays 200. The component's title is an <h1> by default; this page has its own, so the demo sets HeadingLevel="2".

Usage

With no parameters it renders "404", "Page Not Found", a short message and a "Go to Homepage" button:

<OsirionContentNotFound />

A not found page that points readers to likely destinations:

<OsirionContentNotFound Title="This page has moved"
                        Message="We reorganized the docs. One of these pages may have what you need."
                        ShowSuggestions="true"
                        Suggestions="@suggestions"
                        SecondaryButtonText="All docs"
                        SecondaryButtonUrl="/docs"
                        ShowContactInfo="true"
                        ContactEmail="[email protected]"
                        Variant="centered" />

@code {
    private readonly ContentNotFoundSuggestion[] suggestions =
    [
        new() { Text = "Components", Url = "/docs/components", Description = "Every component, by package." },
        new() { Text = "Blog", Url = "/blog" },
    ];
}

An empty state: clear the error code and the default button, and make it smaller. The title is still an <h1>, which suits an empty state that is the page's main content, such as a blog index with no posts yet. Inside a page that has its own <h1>, add HeadingLevel="2":

<OsirionContentNotFound ErrorCode="@null"
                        Title="No posts yet"
                        Message="The first article is on its way."
                        PrimaryButtonText="@null"
                        Variant="minimal"
                        Size="small" />

Parameters

Unmatched attributes are written to the root <div>. A ContentNotFoundSuggestion has Text, Url, an optional Description shown under the link, and Target (default _self).

Behavior

• The component renders plain HTML and needs no script.
• All text is HTML-encoded. A button or suggestion address must be a local path or an http, https or mailto URL. Any other address, such as javascript:, leaves the button out and renders the suggestion text without a link.
• Title is an <h1>, so use the component as the main content of the page, not inside a page that already has one.
• The buttons take the configured CSS framework's primary and outlined secondary button classes.

Status code

The component renders markup only; it does not set the HTTP status code. Without a 404, search engines can index the page as real content.

On .NET 10, give the router a not found page and use the component there:

<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
    </Found>
</Router>

@page "/not-found"

<PageTitle>Page not found</PageTitle>

<OsirionContentNotFound SecondaryButtonText="All docs" SecondaryButtonUrl="/docs" />

When a page finds that its own content is missing, it calls NavigationManager.NotFound() on .NET 10, or sets Response.StatusCode on the cascading HttpContext during static rendering on .NET 9. The CMS ArticlePage, DocumentPage and HomePage do this themselves.

Styling

The root has osirion-content-not-found, osirion-content-not-found-{Variant} and osirion-content-not-found-{Size}, plus osirion-content-not-found-with-code when there is an error code and osirion-content-not-found-with-background with a pattern.

The sizes set a minimum height: 300px for small, 400px for medium, 500px for large. The full size fills the window below the header, using --osirion-header-height (default 4rem). Inner elements use osirion-content-not-found-code, -title, -message, -suggestions, -search, -custom, -actions and -contact, each prefixed with osirion-content-not-found. Colors and sizes come from the theme tokens (--osirion-text-primary, --osirion-text-secondary, --osirion-action-primary, --osirion-font-size-*).

Related

• Forms and feedback
• Page loading
• Background pattern