webdevpuneet.com

Related Snippets

147 in Cards category
39–44 of 60

Certificate of Completion Preview

Rental Car Comparison Cards

Restaurant Menu Item Customizer

Hotel Room Type Picker

Virtual Tour Badge

Property Listing Card

Certificate of Completion Preview — Free LMS Card Snippet

Certificate of Completion Preview · Cards · Plain HTML, CSS & JS · Live preview

CategoryCards
TagsClipboard APISVGAccessibility

Copy & paste

Source Code

<div class="cert-wrap">
  <div class="cert" id="cert">
    <div class="cert-border">
      <div class="cert-corner tl"></div><div class="cert-corner tr"></div>
      <div class="cert-corner bl"></div><div class="cert-corner br"></div>
      <p class="cert-kicker">Certificate of Completion</p>
      <div class="cert-seal" aria-hidden="true">
        <svg viewBox="0 0 60 60"><circle cx="30" cy="30" r="27" /><circle cx="30" cy="30" r="20" /><path d="M20 30l7 7 13-14" /></svg>
      </div>
      <p class="cert-presented">This certifies that</p>
      <h2 class="cert-name" id="certName">Priya Nandakumar</h2>
      <p class="cert-course">has successfully completed</p>
      <h3 class="cert-title" id="certCourse">Advanced Data Visualization</h3>
      <div class="cert-meta">
        <div class="cert-meta-item"><span class="cert-meta-label">Completion Date</span><span class="cert-meta-value" id="certDate">March 14, 2026</span></div>
        <div class="cert-meta-item"><span class="cert-meta-label">Certificate ID</span><span class="cert-meta-value" id="certId">CDV-88213</span></div>
      </div>
      <div class="cert-sign">
        <div class="cert-sign-line"><span class="cert-sig">A. Whitfield</span><span class="cert-sign-label">Program Director</span></div>
        <div class="cert-sign-line"><span class="cert-sig cert-sig-alt">R. Okoye</span><span class="cert-sign-label">Head of Instruction</span></div>
      </div>
    </div>
  </div>

  <div class="cert-actions">
    <button class="cert-btn cert-btn-primary" id="certDownload" type="button">Download PDF</button>
    <button class="cert-btn cert-btn-ghost" id="certShare" type="button">Share</button>
  </div>
  <p class="cert-status" id="certStatus" role="status" aria-live="polite"></p>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

CSS-only ornamentation
Border, corner brackets, and vignette built with no images.
Inline SVG seal
A scalable checkmark seal that recolors with the palette.
Styled signature lines
Cursive text on underline rules, one subtly rotated.
Simulated PDF export
Download button shows a realistic preparing-then-done sequence.
Native share integration
Uses navigator.share with a clipboard-copy fallback.
Accessible status updates
An aria-live region announces download and share results.
Responsive certificate
clamp()-sized name and fluid meta row wrap on narrow screens.
Metadata row
Completion date and certificate ID displayed as a labeled pair.

About this UI Snippet

Certificate of Completion Preview — Decorative Border, Seal & Share Actions

Screenshot of the Certificate of Completion Preview snippet rendered live

The certificate preview card is the shareable artifact an LMS or course platform generates the moment a learner finishes — a formal-looking document rendered inline rather than a plain "you're done" banner. This snippet builds one with a gold decorative border, corner brackets, a checkmark seal, a serif recipient name, two signature lines, and a working Download/Share button pair.

Decorative framing without images

The ornate look comes entirely from CSS: a double-layer border (an outer card background plus an inset bordered panel), four absolutely-positioned corner brackets built from partial borders, and two soft radial gradients placed at opposite corners to fake a subtle vignette. None of it is a background image, so the certificate stays crisp at any size and themeable by changing a handful of color variables.

The seal as inline SVG

The checkmark seal is a small inline <svg> — two concentric circles plus a checkmark path — rather than an icon font or image, so its stroke color matches the gold palette exactly and scales without blurring. Because it's real markup, it's trivial to swap for a different mark (a ribbon, a star, an organization logo) without touching layout.

Signatures as styled text, not images

Both signature lines use a cursive font stack ('Brush Script MT', cursive) with a fallback to the serif stack, sitting on a thin bottom border to read as a signature line. One signature is given a slight rotate to avoid the two looking mechanically identical — a small detail that keeps the certificate from feeling templated.

Working download and share actions

The Download button simulates the PDF-generation delay a real export would have — swapping its label to "Preparing PDF…", then to a confirmed "Downloaded ✓" state — so it's a realistic stand-in for wiring up an actual html2canvas/PDF export later. The Share button calls the native navigator.share API where available and falls back to copying share text to the clipboard, updating an aria-live status region either way so screen reader users hear the result.

Customizing it

Swap the palette for a brand color, change the serif stack, or replace the checkmark seal with an uploaded badge image. Pair it with a course progress tracker that links to this card on 100% completion, or a quiz result breakdown that gates certificate issuance on a passing score.

Step by step

How to Use

  1. 1
    Paste the HTML, CSS, and JSA gold-bordered certificate renders with sample recipient data.
  2. 2
    Click "Download PDF"The button shows a preparing state, then a confirmed downloaded state.
  3. 3
    Click "Share"Uses navigator.share if available, otherwise copies share text.
  4. 4
    Edit the recipient detailsChange #certName, #certCourse, #certDate, and #certId in the HTML.
  5. 5
    Swap the seal markReplace the inline SVG checkmark path with a badge or logo.
  6. 6
    Recolor the paletteChange the gold hex values in the CSS to match your brand.

Real-world uses

Common Use Cases

Online course completion
Issue a shareable certificate when a learner finishes, with corners, border and vignette drawn entirely in CSS and an inline SVG seal.
Corporate training completion
Confirm compliance course completion in a corporate LMS, using a Download button that simulates a realistic preparing-then-done sequence.
Certification programmes
Pair with a quiz result breakdown so a certificate follows a passing score, with cursive signature lines on underline rules.
Bootcamp and workshop achievements
Generate a card learners can screenshot and share, adapting wording for a workshop or event attendance proof.
Progress-linked rewards
Trigger from a course progress tracker when every module is complete, with a seal that recolours to match the palette.
Related: Empty State with Sample Data Toggle
See the Empty State with Sample Data Toggle for a related cards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

No. The gold border, four corner brackets, and soft vignette are built entirely with CSS — a bordered inset panel, absolutely-positioned partial-border corner elements, and two radial gradients. That keeps the certificate crisp at any zoom level and easy to recolor by changing a few hex values.

It simulates the sequence a real export would show: the label changes to "Preparing PDF…" for about a second, then to "Downloaded ✓" with a status message, then resets. In production you'd trigger an actual export — for example html2canvas plus jsPDF, or a server-rendered PDF — inside that same click handler, in place of the setTimeout calls.

It first tries the native navigator.share API, which on supporting browsers (mostly mobile) opens the OS share sheet with the certificate's course name. If navigator.share isn't available or the user cancels, it falls back to copying a share-text string to the clipboard via navigator.clipboard.writeText and confirms with a status message.

Capture the .cert element with html2canvas to get a canvas, then either convert that canvas to a PNG via toDataURL for an image download, or feed it into jsPDF's addImage to produce an actual PDF file. Replace the simulated setTimeout logic in the download handler with that capture-and-export call.

Pass recipient name, course title, date, and certificate ID as props or a data object and interpolate them into the template — the CSS and SVG seal port over unchanged. Keep the download/share handlers as component methods that call your real export library instead of the simulated timeouts.