Article Metadata

OsirionArticleMetdata shows an article's author, publish date and read time on one line, each with a small icon. Use it under an article title or in a list of posts. It renders only the fields you set, and nothing at all when all three are empty.

Usage

@using Osirion.Blazor.Components

<OsirionArticleMetdata Author="Dejan Demonjić" PublishDate="@publishDate" ReadTime="5" />

@code {
    private readonly DateTime publishDate = new(2026, 10, 11);
}

This renders the author, the date in the current culture's short date format, and "5 min".

A realistic case is a post header fed from your own model, with a long date format:

<h1>@post.Title</h1>
<OsirionArticleMetdata Author="@post.Author"
                       PublishDate="@post.PublishedOn"
                       ReadTime="@post.ReadMinutes.ToString(CultureInfo.InvariantCulture)"
                       DateFormat="MMMM d, yyyy" />

post stands for your own type here; PublishedOn is a DateTime? and ReadMinutes an int. Add @using System.Globalization for CultureInfo.

Parameters

The component inherits Class, Style, Theme and unmatched attributes from OsirionComponentBase, but its markup does not apply them: the root element always renders as <div class="osirion-article-metadata">. To restyle it, wrap the component in an element of your own and target .your-wrapper .osirion-article-metadata from your stylesheet. The component's own styles are scoped (a class plus an attribute), so a single class selector loses to them; a parent class matches their specificity, and your rule wins when your stylesheet loads after the library's.

Behavior

• Renders plain HTML under static SSR and needs no script.
• The date is formatted on the server with the request's current culture, so set up request localization if your readers expect their own date format.
• Values are written as text, so Razor encodes them; HTML in Author shows as text.
• The date is plain text, not a <time> element.
• HeroSection uses this component when its ShowMetadata parameter is true, passing its own Author, PublishDate and ReadTime.

Styling

The markup is a flex row:

The styles are scoped to the component and use the theme tokens --osirion-spacing-2, --osirion-spacing-4, --osirion-spacing-6 and --osirion-font-size-sm, so a theme or framework adapter that sets them changes the spacing and size. Icons draw with currentColor and follow the text color.

Related

• Hero section
• Content components