cardTypereq- Type
"PHH" | "NPHH" | "AAY"- Default
- -
- Description
- Ration smart classification code.
Components / Display
Smart Card
ஸ்மார்ட் கார்டு
Renders a credit-card-styled visual representation of a smart identity card. Shows account holders, barcode scans, account status, and type tags.
நபர்களின் விவரங்கள் மற்றும் நிலைகளைக் காட்டும் ஸ்மார்ட் கார்டு வடிவம்.
Part of Ration Shop POS Block
This component is featured in the comprehensive Ration Shop Point of Sale block pattern.
Interactive Preview
Component preview
Smart Cardஸ்மார்ட் கார்டுAnatomy
Structure
Anatomy
4 parts documented for implementation and review.
1
Smart Card Surface
கார்டு மேற்பரப்புrequired<div>A credit-card sized wrapper with rounded-xl edges, subtle borders, and background gradients.
2
Gold Chip
தங்க சிப்<div>A decorative CSS grid element mimicking real contact smart-card chips.
3
Bilingual Holder Detail
அட்டைதாரர் விவரம்required<span>Displays the account holder's name in both English and Tamil.
4
Barcode Footer
பார்கோடு அடிக்குறிப்பு<div>A simulated barcode array that acts as the physical card identification representation.
API
Props
holderNamereq- Type
string- Default
- -
- Description
- Bilingual beneficiary name.
| Prop | Type | Default | Description |
|---|---|---|---|
cardTypereq | "PHH" | "NPHH" | "AAY" | - | Ration smart classification code. |
holderNamereq | string | - | Bilingual beneficiary name. |
Best practices
Print bilingual labels clearly
இருமொழி லேபிள்களை தெளிவாக அச்சிடவும்
Always display user identifiers in both English and Tamil to guarantee clarity for all user categories.
அனைத்து பயனர்களுக்கும் புரியும் வகையில் தமிழ் மற்றும் ஆங்கிலத்தில் தகவல்களை வழங்கவும்.
Avoid low text contrast on dark cards
குறைந்த நிற மாறுபாட்டைத் தவிர்க்கவும்
Do not print thin or dark fonts on dark backgrounds, as this decreases card readability for low-vision users.
இருண்ட பின்னணியில் இருண்ட நிற எழுத்துக்களை அச்சிட வேண்டாம். இது வாசிப்புத் திறனைக் குறைக்கும்.
Accessibility
- Uses high-contrast text ratios for all user-identifiable metadata printed on the dark background.
- The simulated barcode is flagged with decorative styles, preventing accessibility screen-readers from reading raw line structures.
- Combines monospace typeface for card identifiers and numbers to boost digit legibility.