OsirionFeatureCard

OsirionFeatureCard renders an image next to (or above or below) a title, a description and optional links. Use it for feature lists, service overviews and article teasers. It is plain markup and CSS, so it renders the same under static SSR and in interactive modes.

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

Preview

Static SSR first

Every component renders complete HTML before any script runs.

Read more

Code

@using Osirion.Blazor.Components

<OsirionFeatureCard Title="Static SSR first"
                    Description="Every component renders complete HTML before any script runs."
                    ImageUrl="/assets/images/blazor-cover.png"
                    ImageAlt="A browser window showing the Blazor logo, on a purple background"
                    ImagePosition="ImagePosition.Top"
                    ContentAlignment="ContentAlignment.TopLeft"
                    ShowReadMoreLink="true"
                    ReadMoreHref="/docs/getting-started" />

Usage

The smallest card is a title and a description:

<OsirionFeatureCard Title="Static SSR first"
                    Description="Every component renders meaningful HTML before any script runs." />

A teaser that links to an article, with the image on top and category links under the text:

@using Osirion.Blazor.Components

<OsirionFeatureCard Title="Content from GitHub"
                    Description="Publish Markdown from a repository and refresh it with a webhook."
                    ImageUrl="/images/github-cms.png"
                    ImageAlt="Markdown files in a GitHub repository"
                    ImagePosition="ImagePosition.Top"
                    Url="/docs/components/cms-web"
                    ShowReadMoreLink="true"
                    ReadMoreText="Read the guide"
                    ShowPillowButtons="true"
                    PillowButtons="categories" />

@code {
    private readonly List<PillowButton> categories =
    [
        new("CMS", "/blog/category/cms"),
        new("Static SSR", "/blog/category/ssr", ThemeColor.Secondary)
    ];
}

Parameters

PillowButton has Text, Href (default #), Color (ThemeColor, default Primary), Target and AriaLabel, and a constructor PillowButton(text, href, color). Unmatched attributes are passed to the card's root element.

Behavior

• No script is needed. Hover effects are CSS, and prefers-reduced-motion: reduce turns off the lift and zoom.
• The read more link is rendered with OsirionReadMoreLink as a stretched link: it covers the card's text area, so that whole area is one click target. The image is a separate link only when Url is set.
• When Url is set, the image link has no text of its own; its accessible name is the image's alternative text, so set ImageAlt to something that describes the destination.
• If the image fails to load, an inline onerror attribute swaps in a placeholder from placehold.co. A Content Security Policy that blocks inline event handlers, or that host in img-src, leaves the broken image instead.
• On viewports 768px wide or narrower, Left and Right layouts stack into one column: the image above the content for Left, below it for Right.
• Text is HTML-encoded. URLs (Url, ReadMoreHref, PillowButton.Href) are written as given, so pass values your application controls.

Styling

The root element carries osirion-feature-card plus one class per setting, for example osirion-feature-card-image-top, osirion-feature-card-md, osirion-feature-card-content-center-left, osirion-feature-card-border-always, osirion-feature-card-shadow-hover and osirion-feature-card-transform-hover. The card reads the theme tokens --osirion-card-background, --osirion-border-color, --osirion-action-primary, --osirion-action-secondary and --osirion-heading-color, and --osirion-card-border-width (default 2px) for the border, so a framework adapter or your own :root values restyle it.

Related

• Cards overview
• OsirionReadMoreLink
• OsirionTestimonialCard