100External resource card

A card that LEAVES the site: a Trailhead module, a vendor doc page, someone else's tutorial. Names its destination first, carries what the trip will cost, and says it is leaving before it is clicked rather than after.

Use it for

"Go deeper" at the end of a lesson, where the deeper material is somebody else's and there is no point paraphrasing it
A prerequisite that lives on another site
A row of them as a departures board — the destination is what is being chosen between

Not for

A file you take with you — that is Resource card, and it promises something different
An internal link. Inside the site a card that announces it is leaving is a lie
More than three or four. A lesson that ends in a wall of other people's material is a lesson that did not finish its own argument

A departures board

The SOURCE leads. A row of these is a row of departures, and where it goes is the thing being chosen between; the title is what it is called once you get there. The meta says what it costs — kind, time, and whatever the destination counts in.

Trailhead · Salesforce Salesforce Platform Basics Module45 min700 pts Developer docs · Salesforce Execution governors and limits Reference10 min

markup

<div class="ns-extcards" style="inline-size:100%">
  <a class="ns-extcard" href="#0">
    <span class="ns-extcard__icon"><i class="ph ph-graduation-cap" aria-hidden="true"></i></span>
    <span class="ns-extcard__body">
      <span class="ns-extcard__source">Trailhead · Salesforce</span>
      <span class="ns-extcard__title">Salesforce Platform Basics</span>
      <span class="ns-extcard__meta"><span>Module</span><span><i class="ph ph-clock" aria-hidden="true"></i>45 min</span><span>700 pts</span></span>
    </span>
    <i class="ph ph-arrow-up-right ns-extcard__cue" aria-hidden="true"></i>
  </a>
  <a class="ns-extcard" href="#0">
    <span class="ns-extcard__icon"><i class="ph ph-book-open-text" aria-hidden="true"></i></span>
    <span class="ns-extcard__body">
      <span class="ns-extcard__source">Developer docs · Salesforce</span>
      <span class="ns-extcard__title">Execution governors and limits</span>
      <span class="ns-extcard__meta"><span>Reference</span><span><i class="ph ph-clock" aria-hidden="true"></i>10 min</span></span>
    </span>
    <i class="ph ph-arrow-up-right ns-extcard__cue" aria-hidden="true"></i>
  </a>
</div>

In a lesson

One column, at the foot of the written lesson — where "and now go and do the official module" belongs.

See it in place

markup

<p><a class="ns-btn ns-btn--outline ns-btn--sm" href="./demo-player-article.html" target="_blank" rel="noopener">See it in place <i class="ph ph-arrow-up-right" aria-hidden="true"></i></a></p>

Accessibility contract

Pair the out-arrow with target="_blank" rel="noopener" — the arrow is the visible half of the same promise
The whole card is the <a>, so the accessible name is source + title + meta read as one thing
The arrow is aria-hidden: "opens in a new tab" belongs in the link text or its label, not in a glyph