OsirionReadMoreLink

OsirionReadMoreLink renders an <a> with text and an optional icon, for "read more" links in cards and lists and for small calls to action. The feature and testimonial cards use it for their own links.

Usage

The smallest form needs only Href. The text defaults to "Read more" with a chevron on the right:

<OsirionReadMoreLink Href="/blog/static-ssr" />

In a list of posts every link would read "Read more", so give each one an accessible name that starts with the visible text. With Stretched, the whole card becomes clickable; the card needs position: relative because the link covers its nearest positioned ancestor:

<article class="post-card" style="position: relative;">
    <h3>Static SSR with Blazor</h3>
    <p>What renders on the server, and what needs interactivity.</p>
    <OsirionReadMoreLink Href="/blog/static-ssr"
                         AriaLabel="Read more: Static SSR with Blazor"
                         Stretched="true" />
</article>

Other variants change the icon or the look:

<OsirionReadMoreLink Href="https://github.com/obrana-boranija/Osirion.Blazor"
                     Text="Source on GitHub"
                     Variant="ReadMoreVariant.External"
                     Target="_blank"
                     rel="noopener" />

<OsirionReadMoreLink Href="/docs"
                     Text="Read the docs"
                     Variant="ReadMoreVariant.Button"
                     Size="LinkSize.Large" />

Parameters

Unmatched attributes, such as rel or data-*, are written to the <a> element.

Variants

Behavior

• The component renders a plain link and needs no script; it works the same under static SSR, Interactive Server and WebAssembly.
• The built-in icons are inline SVG inside a <span aria-hidden="true">, so screen readers read only the accessible name.
• aria-label replaces the link's content as its accessible name. Keep the visible text at the start of it ("Read more: Static SSR with Blazor") so speech input users can say what they see.
• Target is written as given and no rel is added; pass rel as an attribute when you need one.
• With prefers-reduced-motion: reduce, the hover animation and transitions are off. In print, the icon is hidden.

Styling

The link always has osirion-read-more plus a class for its variant (osirion-read-more-default, osirion-read-more-arrow and so on) and its size (osirion-read-more-small, -normal, -large). Depending on the parameters it also gets osirion-read-more-stretched, osirion-read-more-block, osirion-read-more-animated and osirion-read-more-icon-left or osirion-read-more-icon-right. Inside, the text is osirion-read-more-text and the icon osirion-read-more-icon.

The color is --osirion-action-primary and the hover color --osirion-read-more-hover-color, which falls back to --osirion-color-primary-700; when the browser prefers a dark color scheme, the hover color is --osirion-action-primary-hover instead. Set them on the link (through Style) or a container to recolor it:

<OsirionReadMoreLink Href="/pricing"
                     Text="See pricing"
                     Style="--osirion-action-primary: #7c3aed; --osirion-read-more-hover-color: #5b21b6;" />

The link also takes the configured CSS framework's link class:

Related

• Breadcrumbs
• Feature card
• Testimonial card
• Core navigation components