Package Card
Package Card
Package Card is a comprehensive product package display component featuring pricing details, features list, and selection functionality for prepaid/postpaid offerings.
Visual Specifications
Section titled “Visual Specifications”| Property | Desktop | Mobile |
|---|---|---|
| Card Width | 280-320px | 100% |
| Padding | 20-24px | 16-20px |
| Border Radius | 8-12px | 8px |
| Shadow | Medium elevation | Light elevation |
| Font Size | 14-16px | 13-15px |
Style Variants
Section titled “Style Variants”Standard card with neutral styling
Bordered card with accent color
Emphasized with larger size, shadow, badge
Greyed out, not selectable
Content Elements
Section titled “Content Elements”| Element | Description | Example |
|---|---|---|
| Package Name | Descriptive title | ”Daily Unlimited” |
| Price | Numeric value | ”15.000” |
| Currency | Rupiah symbol | ”Rp” or prefix |
| Period | Time duration | ”/hari”, “/bulan” |
| Features | Benefit list | [“Unlimited”, “4G”, “Roaming”] |
| CTA Text | Action label | ”Pilih”, “Beli” |
| Badge | Promotion tag | ”Best Seller”, “Populer” |
MSISDN Types
Section titled “MSISDN Types”| Type | Description |
|---|---|
| Prepaid | Pay-as-you-go packages |
| Postpaid | Monthly billed packages |
| Orbit | Special loyalty plans |
| Style | Usage |
|---|---|
| Checkmarks | Included features with ✓ |
| Text List | Simple bullet points |
| Icons | Visual indicators per feature |
| Highlighted | Emphasized key benefits |
Interactive States
Section titled “Interactive States”| State | Appearance |
|---|---|
| Default | Standard appearance |
| Hover | Elevated shadow, slight scale |
| Selected | Border highlight, check indicator |
| Disabled | Reduced opacity, no interaction |
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- Product/package selection
- Pricing plan comparison
- Offering presentation
- Package upgrade/downgrade
Best practices
Section titled “Best practices”| ✅ Do | ❌ Don’t |
|---|---|
| Show clear pricing | Hide costs until click |
| List key features | Overload with details |
| Highlight recommended option | Make all equal |
| Use descriptive names | Cryptic package codes |
| Show clearly what’s included | Hidden limitations |
| Consistent card sizes | Varying heights |
Responsive Behavior
Section titled “Responsive Behavior”| Breakpoint | Layout |
|---|---|
| Desktop | 3-4 cards per row |
| Tablet | 2-3 cards per row |
| Mobile | 1 card, stacked vertically |