NS Design System
v3.0.0 · 257 tokens

94Certificate

Proof of completion in the Salesforce register: the navy console ground, a hairline frame, mono for every piece of data, and a credential ID that can actually be verified.

Use it for

  • Course and track completion
  • An account page, a share card, a print

Not for

  • A badge for finishing one lesson — a certificate that is cheap to earn is worth nothing to show
  • A rendered image. See below

Completion

Namaste Salesforce · Authorised Training
// This certifies that Swarnil Singhai has successfully completed Salesforce Administrator — eight modules and 62 units covering the data model, security and sharing, declarative automation, and reporting — and demonstrated competence in the assessed exercises.
Track · Administrator Level · Foundation Assessed
Verify at
nmst.dev/v/0F3A91
Issued14 Aug 2026 Valid to14 Aug 2028 Hours41.5 Score92% Swarnil SinghaiLead Instructor Credential IDNS-ADM-2026-0F3A91
markup
<div class="ns-certificate">
  <div class="ns-certificate__inner">
    <div class="ns-certificate__head">
      <img class="ns-certificate__mark" src="../assets/logo/favicon.svg" alt="">
      <span class="ns-certificate__issuer">Namaste Salesforce &middot; Authorised Training</span>
    </div>

    <div class="ns-certificate__body">
      <div class="ns-certificate__award">
        <span class="ns-certificate__kicker">// This certifies that</span>
        <span class="ns-certificate__name">Swarnil Singhai</span>
        <span class="ns-certificate__course">has successfully completed <strong>Salesforce Administrator</strong> &mdash; eight modules and 62 units covering the data model, security and sharing, declarative automation, and reporting &mdash; and demonstrated competence in the assessed exercises.</span>
        <div class="ns-certificate__tags">
          <span class="ns-certificate__tag">Track &middot; Administrator</span>
          <span class="ns-certificate__tag">Level &middot; Foundation</span>
          <span class="ns-certificate__tag">Assessed</span>
        </div>
      </div>
      <div class="ns-certificate__proof">
        <span class="ns-certificate__seal" aria-hidden="true"><i class="ph ph-seal-check"></i></span>
        <span class="ns-certificate__verify">Verify at<br>nmst.dev/v/0F3A91</span>
      </div>
    </div>

    <div class="ns-certificate__foot">
      <span class="ns-certificate__field">Issued<b>14 Aug 2026</b></span>
      <span class="ns-certificate__field">Valid to<b>14 Aug 2028</b></span>
      <span class="ns-certificate__field">Hours<b>41.5</b></span>
      <span class="ns-certificate__field">Score<b>92%</b></span>
      <span class="ns-certificate__sign">Swarnil Singhai<b>Lead Instructor</b></span>
      <span class="ns-certificate__field ns-certificate__id">Credential ID<b>NS-ADM-2026-0F3A91</b></span>
    </div>
  </div>
</div>

Accessibility contract

  • The seal is aria-hidden and the verify URL is real text beside it — a credential whose only proof is a graphic proves nothing to anyone not looking at it
  • It is a real document, not a picture of one: name, course, date and ID are TEXT, so they are selectable, translatable, searchable and readable by a screen reader. A PNG is none of those
  • The credential ID is mono and prominent — it is the only part that proves anything, and treating it as small print says the opposite
  • Container query units, so it scales inside an account card and when printed full width; a vw-based size would be wrong in one of them
  • @media print inverts to ink-on-paper — the navy ground would empty a cartridge, and a certificate is meant to be printed