LearnCard Front

Component for displaying the front face of a unique Card issued to a user

Learn Card - Card Front Face

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

const handleOnClick = () => {};

<LearnCardCreditCardFrontFace
   userImage="https://userimage.png"
   qrCodeValue="https://www.npmjs.com/package/@learncard/react"
   className="customClass"
   showActionButton
   actionButtonText="Open Card"
   onClick={handleOnClick}
/>

Storybook Docs

Update the fields below, to see live changes! 🚀

try: showActionButton: false

Properties

userImage

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

qrCodeValue

Description	value encoded as a QR code
Type	string | undefined
Default	undefined

showActionButton

Description	Show or hide the action button
Type	boolean | undefined
Default	false

actionButtonText

Description	Title for the action button
Type	string | undefined
Default	'Open Card'

className

Description	Custom css class
Type	string | undefined
Default	""

onClick

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