Certificate Card
Certificate display card
Overview
CertificateCard displays a learning credential in card format. Supports multiple credential types (certificate, badge, achievement) and statuses (pending, issued, suspended, revoked, expired, renewed). Shows certificate number, issue date, expiration date, and provides action buttons for viewing, downloading, and sharing certificates.
Usage
import { CertificateCard } from "@leanicon/web-builder-library/saas";
<CertificateCard
certificate={certificate}
onView={() => viewCertificate(certificate.id)}
onDownload={() => downloadCertificate(certificate.id)}
onShare={() => shareCertificate(certificate.id)}
/>;Variants
Default (Issued Certificate)
React Fundamentals Certification
John Doe
Certificate #CERT-2024-001234
Issued: Jan 15, 2024
Expires: Jan 15, 2026
Badge Type
JavaScript Expert Badge
John Doe
Certificate #BADGE-2024-005678
Issued: Jan 15, 2024
Expires: Jan 15, 2026
Pending Status
React Fundamentals Certification
John Doe
Certificate #CERT-2024-001234
Expired Status
React Fundamentals Certification
John Doe
Certificate #CERT-2024-001234
Issued: Jan 15, 2024
Expires: Jan 15, 2023
No Expiry
React Fundamentals Certification
John Doe
Certificate #CERT-2024-001234
Issued: Jan 15, 2024
View Only
React Fundamentals Certification
John Doe
Certificate #CERT-2024-001234
Issued: Jan 15, 2024
Expires: Jan 15, 2026
Dark
React Fundamentals Certification
John Doe
Certificate #CERT-2024-001234
Issued: Jan 15, 2024
Expires: Jan 15, 2026
Achievement Type (code only)
<CertificateCard
certificate={{
id: "cert-ach",
courseName: "Top Contributor Achievement",
learnerName: "John Doe",
credentialType: "ACHIEVEMENT",
status: "ISSUED",
certificateNumber: "ACH-2024-009012",
issuedAt: "2024-01-15T10:00:00Z",
}}
onView={() => viewCertificate("cert-ach")}
onShare={() => shareCertificate("cert-ach")}
/>Revoked / Suspended (code only)
<CertificateCard
certificate={{
...certificate,
status: "REVOKED", // or "SUSPENDED"
}}
onView={() => viewCertificate(certificate.id)}
/>