An awesome react health card component

May 03, 2019
An awesome react health card component


An awesome health card component.



yarn add react-health-card


npm install react-health-card --save


import HealthCard from 'react-health-card'; <HealthCard cardNumber="12345678" name="Jake Moxey" issueDate="12122020" issueNumber="12" rank="01" memberNumber="87654321A" memberNumberLength={9} focused="memberNumber" />

Available Props

bgColorFrontstring#2053B1The background color of the front of the card.
bgColorBackstring#2053B1The background color of the back of the card.
focusedstringnullThe focused card attribute. Available: null, rank, name, memberNumber, issueDate, issueNumber, cardNumber
isFlippedbooleanfalseIs the card flipped?
logoUristringnullThe logo of the card.
logoPositionstringfrontPosition of the logo. Available: front, back
logoStylestringright: 10%; top: 10%Style of the logo.
cardNumberstringnullThe card number.
cardNumberPositionstringfrontPosition of the card number. Available: front, back
cardNumberTitlestringCard numberCard number title
cardNumberLengthnumber8Card number length
cardNumberStylestringleft: 10%; top: 20%Style of the card number element (CSS)
issueDatestringnullThe card issue date.
issueDatePositionstringfrontPosition of the issue date. Available: front, back
issueDateTitlestringIssue dateThe issue date title.
issueDateFormatstringDD/MM/YYYYThe issue date format.
issueDateStylestringbottom: 15%; left: 65%;Style of the issue date element (CSS)
issueNumberstringnullThe issue number.
issueNumberPositionstringbackPosition of the issue number. Available: front, back
issueNumberTitlestringIssue numberIssue number title
issueNumberLengthnumber2Issue number length
issueNumberStylestringleft: 10%; bottom: 15%Style of the issue number element (CSS)
memberNumberstringnullThe member number.
memberNumberPositionstringfrontPosition of the member number. Available: front, back
memberNumberTitlestringMember numberMember number title
memberNumberLengthnumber8Member number length
memberNumberStylestringleft: 10%; bottom: 15%Style of the member number element (CSS)
rankstringnullThe card rank.
rankPositionstringfrontPosition of the card rank. Available: front, back
rankLengthnumber2Card rank length
rankStylestringleft: 10%; bottom: 40%Style of the card rank element (CSS)
rankTitlestringnullCard rank title.
namestringnullThe card holder's name.
namePlaceholderstringFULL NAMEPlaceholder for card holder's name.
namePositionstringfrontPosition of the card holder's name. Available: front, back
nameLengthnumber2Name length
nameStylestringleft: 20%; bottom: 40%Style of the card holder's name element (CSS)
showLogobooleantrueShows the health card logo.
showCardNumberbooleantrueShows the card number.
showIssueDatebooleantrueShows the issue date.
showIssueNumberbooleantrueShows the issue number.
showMemberNumberbooleantrueShows the member number.
showRankbooleantrueShows the health card logo.
showNamebooleantrueShows the health card logo.
showSwipeBarbooleantrueShows the swipe bar.