66Card

The generic surface: hairline border, 6px radius, no shadow at rest. Hover brightens the border to brand blue and draws the 2px top accent — elevation by line, never by lift. Course/blog/resource cards are compositions of this.

Use it for

Any self-contained unit in a collection — courses, posts, resources
Clickable cards — one stretched link, whole card is the target

Not for

A wrapper around a whole page section — use Band
Nesting cards in cards — flatten to a List inside one card

Default

// Course Apex basics

Objects, triggers and your first deploy — the platform's own language from zero.

12 lessons · 3h 40m

markup

<div class="ns-card" style="max-inline-size:20rem">
  <div class="ns-card__body">
    <span class="ns-card__kicker">// Course</span>
    <span class="ns-card__title">Apex basics</span>
    <p class="ns-card__text">Objects, triggers and your first deploy — the platform's own language from zero.</p>
  </div>
  <div class="ns-card__foot">12 lessons · 3h 40m</div>
</div>

With media

16:9 media on top; the frame crops, the caption never overlays.

// Blog Why flows beat process builder

Every automation you should migrate, in order.

markup

<div class="ns-card" style="max-inline-size:20rem">
  <span class="ns-card__media ns-ph" aria-hidden="true"></span>
  <div class="ns-card__body">
    <span class="ns-card__kicker">// Blog</span>
    <span class="ns-card__title">Why flows beat process builder</span>
    <p class="ns-card__text">Every automation you should migrate, in order.</p>
  </div>
</div>

Clickable

One stretched link on the title; the whole card is its hit area.

// Roadmap Admin certification path

Six courses, one exam — the whole track in order.

Step 01 of 06

markup

<div class="ns-card" style="max-inline-size:20rem">
  <div class="ns-card__body">
    <span class="ns-card__kicker">// Roadmap</span>
    <a class="ns-card__link" href="#"><span class="ns-card__title">Admin certification path</span></a>
    <p class="ns-card__text">Six courses, one exam — the whole track in order.</p>
  </div>
  <div class="ns-card__foot">Step 01 of 06</div>
</div>

Horizontal

Media beside body — the list-like form for dense collections.

// Training Trailhead in a weekend

The 12 badges that matter, nothing else.

markup

<div class="ns-card ns-card--row" style="max-inline-size:28rem">
  <span class="ns-card__media ns-ph" aria-hidden="true"></span>
  <div class="ns-card__body">
    <span class="ns-card__kicker">// Training</span>
    <span class="ns-card__title">Trailhead in a weekend</span>
    <p class="ns-card__text">The 12 badges that matter, nothing else.</p>
  </div>
</div>

Accessibility contract

Clickable cards use ONE real link (the title) stretched over the card — never a click handler on the div
Media images are content: alt text or empty alt if decorative