Data & display

AppResourceCard

A link card to a resource — a help article, a guide, a template, an external doc.

<app-resource-card icon="file-text" title="…" text="…" href="…" />

<app-resource-card> is a link with room to explain itself — a help-centre article, a downloadable template, a guide, an external standard. Icon tile, title, one line of context; the whole card is the target.

It looks much like <app-choice-card> and the difference is behavioural: this one navigates, that one is a form control you select. Pick by what happens on click.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the card above it.

How risk is scoredThe IEC 62305-2 method, in plain terms 
<app-resource-card icon="file-text" title="How risk is scored" text="The IEC 62305-2 method, in plain terms" href="/help/risk-scoring" />
Razor has no linkComponentReact's linkComponent is a router render-prop with no Razor equivalent — a plain href is already client-navigable on this surface. See Routing and external links.

Basic

An icon, a title, one line of supporting text, and where it goes. The text should say what the reader gets, not repeat the title.

One resource
Hover it — the whole card lifts to the brand tint, and the icon inverts to stay distinct from it.
Show code 
<app-resource-card icon="file-text" title="How risk is scored"
    text="The IEC 62305-2 method, in plain terms" href="/help/risk-scoring" />

A grid of resources

Wrap them in .res-grid for the standard responsive layout: one column on a phone, two from sm, three from lg.

A help-centre block
The usual home — a “related help” section at the foot of a page or a sidebar panel.
How risk is scoredThe IEC 62305-2 method, in plain terms Zone survey templateXLSX — fill on site, import here Getting startedFrom first site to first report in 10 minutes
Show code 
<div class="res-grid">
    <app-resource-card icon="file-text" title="How risk is scored" … />
    <app-resource-card icon="download" title="Zone survey template" … />
</div>

Routing and external links

For an in-app destination a plain href is already client-navigable — Razor has no separate router abstraction to reach for. For a destination outside the product set external — it opens in a new tab with the right rel.

Internal vs external
external adds target="_blank" plus rel="noopener noreferrer".
How risk is scoredIn-app help article IEC 62305-2The standard itself, on iec.ch
Show code 
<app-resource-card icon="external-link" title="IEC 62305-2"
    href="https://webstore.iec.ch/" external="true" />
Why noreferrer, not just noopenerWithout it the destination can read the referring URL — which on an authenticated portal can carry record ids in the path. external sets both.

When to use

Use it when

  • You are linking somewhere and the link needs a line of explanation.
  • Several such links sit together as a “related help” or “templates” block.
  • The destination is a document, article, guide or download.

Reach for something else when

  • It is a selectable option in a form. → app-choice-card
  • It is a plain navigation link in a menu. → a link / app-shell nav
  • It performs an action rather than navigating. → app-button
  • It is a pricing tier. → app-pricing-card

Best practices

Do
Zone survey templateXLSX — fill on site, import here
The title names the resource, the text says the format and what to do with it, and the icon matches the action (a download).
Don't
Click hereClick here to learn more
“Click here” twice tells the reader nothing about the destination — and it is what a screen reader announces as the link name.

Every option

The whole surface of the component, one cell per value or behaviour.

icon — the tile glyph

icon="file-text"
icon="download"
icon="lightbulb"
icon="external-link"
icon="box-arrow-up-right"

text — present vs omitted

text set
text omitted — title only
long title and text — wraps, does not overflow

external — link target and rel

(default) — same tab, no rel
external="true" — new tab, rel="noopener noreferrer"

linkComponent — router link vs plain anchor

(only shape) — plain <a href>
React-onlyReact's linkComponent swaps the rendered element for a router Link so navigation stays client-side. Razor has no router abstraction to swap in — a plain href anchor is already the whole story here.

class passthrough

class="analytics-card" — appended, base class kept

Attributes

AttributeTypeDefaultDescription
icon *string—Icon name for the tile.
title *string—Names the resource. This is the link's accessible name.
textstring—One line of supporting detail.
href *string—Where it goes.
externalboolfalseOpen in a new tab with rel="noopener noreferrer".
linkComponent——React-only; not a tag-helper attribute. A plain href is already client-navigable in Razor — there is no router abstraction to swap in.
classstring—Extra classes on the card.