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

() => {}

Last updated