OsirionArticleMetdata

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.

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

@using Osirion.Blazor.Components

@* Sample values for the demo, not facts about an article *@
<OsirionArticleMetdata Author="Sample Author"
                       PublishDate="@(new DateTime(2026, 10, 11))"
                       DateFormat="MMMM d, yyyy"
                       ReadTime="5" />

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

Class, Style, Theme and unmatched attributes (for example id or data-*) are written on the root <div>. 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.
• The icons are inline SVG without a text alternative. The text next to each icon carries the meaning.
• 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 author's icon also keeps the earlier class osirion-article-meta-icon, which no stylesheet defines, so rules a site wrote for it still match. All three icons are 16 pixels square.

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