116Answer attachments

What makes this an LMS assistant rather than a chat box: an answer can carry the product's own objects. The course it recommends is the same .ns-card.ns-ccard the catalog renders — one component with two placements, not two cards that drift apart.

Use it for

Course and lesson cards, when the answer's real conclusion is “go and do this course”
A rich snippet for a blog post, doc page or external reference
An image the assistant produced — always labelled as generated

Not for

Decorating every answer with a card — an attachment is a recommendation, and four of them is none
A bespoke mini course card: use the catalog's --compact shape

Course cards

The catalog's own compact card, dropped into a message. Same anatomy, same meta row, same hover.

Covers this, in order

// Course Bulk-safe Apex patterns

Triggers that survive the 200-record data load.

9 lessons2h 10m

// Lesson Collections, maps and sets

The data structure that makes one query enough.

14:40Beginner

markup

<div style="max-inline-size:40rem">
  <p class="ns-aiattach__label">Covers this, in order</p>
  <div class="ns-aiattach">
    <div class="ns-card ns-ccard ns-ccard--compact"><div class="ns-card__body">
      <span class="ns-card__kicker">// Course</span>
      <a class="ns-card__link" href="#0"><span class="ns-card__title">Bulk-safe Apex patterns</span></a>
      <p class="ns-card__text">Triggers that survive the 200-record data load.</p>
      <span class="ns-ccard__meta"><span>9 lessons</span><span>2h 10m</span></span>
    </div></div>
    <div class="ns-card ns-ccard ns-ccard--compact"><div class="ns-card__body">
      <span class="ns-card__kicker">// Lesson</span>
      <a class="ns-card__link" href="#0"><span class="ns-card__title">Collections, maps and sets</span></a>
      <p class="ns-card__text">The data structure that makes one query enough.</p>
      <span class="ns-ccard__meta"><span>14:40</span><span>Beginner</span></span>
    </div></div>
  </div>
</div>

Rich snippet

A link, unfurled: thumbnail, title, one line, host. For a blog post or an external doc — anything that is not a catalog object.

// Blog The trigger that survived a 200-record load A walk through one real bulkification bug, from the debug log to the pattern that fixes it for good. namastesalesforce.com · 8 min read // Reference Execution governors and limits The per-transaction table: 100 SOQL queries, 150 DML statements, 50,000 rows retrieved. developer.salesforce.com

markup

<div style="max-inline-size:36rem;display:grid;gap:var(--space-3)">
  <a class="ns-aisnippet" href="#0">
    <span class="ns-aisnippet__thumb ns-ph ns-ph--sm" aria-hidden="true"></span>
    <span>
      <span class="ns-aisnippet__kicker">// Blog</span>
      <span class="ns-aisnippet__title">The trigger that survived a 200-record load</span>
      <span class="ns-aisnippet__desc">A walk through one real bulkification bug, from the debug log to the pattern that fixes it for good.</span>
      <span class="ns-aisnippet__meta"><i class="ph ph-globe" aria-hidden="true"></i> namastesalesforce.com · 8 min read</span>
    </span>
  </a>
  <a class="ns-aisnippet" href="#0">
    <span class="ns-aisnippet__thumb ns-ph ns-ph--sm" aria-hidden="true"></span>
    <span>
      <span class="ns-aisnippet__kicker">// Reference</span>
      <span class="ns-aisnippet__title">Execution governors and limits</span>
      <span class="ns-aisnippet__desc">The per-transaction table: 100 SOQL queries, 150 DML statements, 50,000 rows retrieved.</span>
      <span class="ns-aisnippet__meta"><i class="ph ph-arrow-up-right" aria-hidden="true"></i> developer.salesforce.com</span>
    </span>
  </a>
</div>

Image

Framed, captioned, and labelled when it was generated. The badge is not decoration — it is the difference between a diagram and a source.

Trigger execution order, simplified Generated

markup

<figure class="ns-aiimage" style="max-inline-size:28rem">
  <span class="ns-ph" aria-hidden="true"></span>
  <figcaption class="ns-aiimage__cap">Trigger execution order, simplified <span class="ns-badge ns-badge--warning"><span class="ns-badge__dot" aria-hidden="true"></span>Generated</span></figcaption>
</figure>

Downloadable

For a cheat sheet or a starter repo the assistant hands over, the catalog's resource row is already the right object.

Take this with you

Governor limits cheat sheet PDF · 1 page

markup

<div style="max-inline-size:36rem">
  <p class="ns-aiattach__label">Take this with you</p>
  <div class="ns-aiattach ns-aiattach--single">
  <a class="ns-resource" href="#0">
    <span class="ns-resource__icon"><i class="ph ph-file-text" aria-hidden="true"></i></span>
    <span class="ns-resource__body">
      <span class="ns-resource__title">Governor limits cheat sheet</span>
      <span class="ns-resource__type">PDF · 1 page</span>
    </span>
    <i class="ph ph-arrow-down ns-resource__cue" aria-hidden="true"></i>
  </a>
  </div>
</div>

Accessibility contract

The mono caption above the grid says why these are here, not just that they are
Generated images carry a badge in the caption — an unlabelled generated diagram is one a student will cite in an exam