VC Thumbnail

Thumbnail for displaying a verifiable credential

VC Thumbnail Full View

import { VCThumbnail } from '@learncard/react';

const handleOnClick = () => {};

<VCThumbnail
   title="Hello World!"
   createdAt="June, 3 2022"
   issuerImage="https://issuerimage.png"
   userImage="https://userimage.png"
   badgeImage="https://badgeimage.png"
   listView={false}
   className="customClass"
   onClick={handleOnClick}
/>

Storybook Docs

Update the fields below, to see live changes! 🚀

try: listView: true

Properties

title

Description	Thumbnail title
Type	string | undefined
Default	undefined

createdAt

Description	Credential issue date
Type	string | undefined
Default	undefined

issuerImage

Description	Credential issuer image
Type	string | undefined
Default	undefined

userImage

Description	Image of the user issued the credential
Type	string | undefined
Default	undefined

badgeImage

Description	Open badge image
Type	string | undefined
Default	undefined

listView

Description	Specifies what style of thumbnail should display, by default it displays the full thumbnail.
Type	boolean | undefined
Default	false

className

Description	Custom css class
Type	string | undefined
Default	""

onClick

Description	Custom onClick handler
Type	() => void | undefined
Default	() => {}