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.

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

@using Osirion.Blazor.Components

<p>
    <OsirionReadMoreLink Href="/docs/getting-started" />
</p>

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

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

@* With Stretched, the whole card is the link; the card needs position: relative *@
<article style="position: relative; max-width: 24rem; padding: 1rem; border: 1px solid var(--osirion-border-color, #d1d5db); border-radius: 0.5rem;">
    <h3 style="margin-top: 0; font-size: 1.125rem;">A card with a stretched link</h3>
    <p>The link is the last element, and its click area covers the card.</p>
    <OsirionReadMoreLink Href="/docs/getting-started"
                         AriaLabel="Read more: a card with a stretched link"
                         Stretched="true" />
</article>

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/demonjic/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. Theme is accepted by every Osirion component; the link does not use it.

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.
• When AriaLabel is empty, the accessible name is the current Text, read on every render, so a Text that changes later changes the name too. AriaLabel is never overwritten.
• Target is written as given and no rel is added; pass rel as an attribute when you need one.
• Href is written as given. Pass only addresses you trust, such as a path in your own site or a URL from your own content.
• 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-link-color, which falls back to --osirion-action-primary, and the hover color is --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-link-hover-color instead, which falls back to --osirion-action-primary-hover. The Button variant takes its fill from --osirion-action-primary and its text color from --osirion-action-primary-text. Set the variables on the link (through Style) or a container to recolor it:

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

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

Related

• Breadcrumbs
• Feature card
• Testimonial card
• Navigation components