99Certification badge

The heptagon-and-ribbon badge a certification ships as, rebuilt as one element so a course page, a profile or a certificate can render any credential at any size. Drawn with clip-path — no image files, so it scales, prints and flips with the theme.

Use it for

A certification track's hero and its course cards
A learner profile — earned badges, and the next one greyed
The certificate document

Not for

Reproducing Salesforce's own badges. Those are their trademark and belong to the credential THEY issue — this is the shape family in this brand's colours, for this product's own tracks
Anything that is not a credential. A badge means an exam was passed

The three levels

Only the ribbon changes between levels, because the ribbon is what a wall of badges is scanned by. Colours are ours — brand navy plate, brand-400 mark, brand→accent ribbon — not the official palette.

Certified Associate Certified Platform Developer Certified Architect

markup

<div class="ns-certbadges">
  <span class="ns-certbadge ns-certbadge--associate">
    <span class="ns-certbadge__plate" aria-hidden="true"></span>
    <span class="ns-certbadge__ribbon" aria-hidden="true"></span>
    <span class="ns-certbadge__inner">
      <i class="ph ph-cloud ns-certbadge__mark" aria-hidden="true"></i>
      <span class="ns-certbadge__rule" aria-hidden="true"></span>
      <span class="ns-certbadge__word">Certified</span>
      <span class="ns-certbadge__name">Associate</span>
    </span>
  </span>
  <span class="ns-certbadge ns-certbadge--specialist">
    <span class="ns-certbadge__plate" aria-hidden="true"></span>
    <span class="ns-certbadge__ribbon" aria-hidden="true"></span>
    <span class="ns-certbadge__inner">
      <i class="ph ph-cloud ns-certbadge__mark" aria-hidden="true"></i>
      <span class="ns-certbadge__rule" aria-hidden="true"></span>
      <span class="ns-certbadge__word">Certified</span>
      <span class="ns-certbadge__name">Platform Developer</span>
    </span>
  </span>
  <span class="ns-certbadge ns-certbadge--architect">
    <span class="ns-certbadge__plate" aria-hidden="true"></span>
    <span class="ns-certbadge__ribbon" aria-hidden="true"></span>
    <span class="ns-certbadge__inner">
      <i class="ph ph-cube ns-certbadge__mark" aria-hidden="true"></i>
      <span class="ns-certbadge__word">Certified</span>
      <span class="ns-certbadge__name">Architect</span>
    </span>
  </span>
</div>

Sizes and locked

Set inline-size and everything inside scales from it. A badge you have not earned is drained rather than hidden — a track should show what is ahead of you.

Certified Admin Certified Admin Certified Architect

markup

<div class="ns-certbadges" style="align-items:center">
  <span class="ns-certbadge ns-certbadge--specialist" style="inline-size:5rem">
    <span class="ns-certbadge__plate" aria-hidden="true"></span>
    <span class="ns-certbadge__ribbon" aria-hidden="true"></span>
    <span class="ns-certbadge__inner">
      <i class="ph ph-cloud ns-certbadge__mark" aria-hidden="true"></i>
      <span class="ns-certbadge__rule" aria-hidden="true"></span>
      <span class="ns-certbadge__word">Certified</span>
      <span class="ns-certbadge__name">Admin</span>
    </span>
  </span>
  <span class="ns-certbadge ns-certbadge--specialist" style="inline-size:7rem">
    <span class="ns-certbadge__plate" aria-hidden="true"></span>
    <span class="ns-certbadge__ribbon" aria-hidden="true"></span>
    <span class="ns-certbadge__inner">
      <i class="ph ph-cloud ns-certbadge__mark" aria-hidden="true"></i>
      <span class="ns-certbadge__rule" aria-hidden="true"></span>
      <span class="ns-certbadge__word">Certified</span>
      <span class="ns-certbadge__name">Admin</span>
    </span>
  </span>
  <span class="ns-certbadge ns-certbadge--architect ns-certbadge--locked" style="inline-size:7rem">
    <span class="ns-certbadge__plate" aria-hidden="true"></span>
    <span class="ns-certbadge__ribbon" aria-hidden="true"></span>
    <span class="ns-certbadge__inner">
      <i class="ph ph-cube ns-certbadge__mark" aria-hidden="true"></i>
      <span class="ns-certbadge__word">Certified</span>
      <span class="ns-certbadge__name">Architect<span class="ns-visually-hidden"> — not yet earned</span></span>
    </span>
  </span>
</div>

Accessibility contract

The badge is one element with a text name inside it, so it is read rather than described
Locked badges keep their name in the DOM and add "not yet earned" — greyscale is not an announcement