Package Detail (Organism)
Package Detail (Organism)
Package Detail (Organism) displays comprehensive package information in a modal with animated progress bars, expandable accordions, and buy actions.
Visual Specifications
Section titled “Visual Specifications”| Property | Desktop | Mobile |
|---|---|---|
| Modal Width | 600-700px | 90% |
| Max-height | 90vh | 100vh |
| Border Radius | 16-24px | 0 (mobile full) |
| Animation Duration | 300ms | 300ms |
Modal States
Section titled “Modal States”Fade in + scale up animation
Full content displayed, scrolling enabled
Fade out animation before close
Full-screen, bottom sheet style
Content Structure
Section titled “Content Structure”| Element | Description |
|---|---|
| Package Name | Display title |
| Price | Formatted price string |
| Sold Progress | Animated progress bar |
| Accordion Sections | Expandable detail sections |
| Package Details | HTML content area |
| Buy Button | Call-to-action |
Accordion Sections
Section titled “Accordion Sections”| Element | Description |
|---|---|
| Label | Section title |
| Content | HTML content |
| Expanded State | Open/closed toggle |
Progress Animation
Section titled “Progress Animation”| Property | Value |
|---|---|
| Duration | 1200ms |
| Easing | cubic-bezier (ease-out) |
| Counter | Animated 0 → percentage |
Modal Behaviors
Section titled “Modal Behaviors”| Behavior | Implementation |
|---|---|
| No scroll on body | no-scroll class on html |
| Click outside to close | Overlay backdrop click |
| Escape to close | Keyboard ESC key |
| Responsive breakpoint | < 768px = mobile |
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- Package purchase flows
- Product detail modals
- Plan comparison displays
- Upgrade prompts
Best practices
Section titled “Best practices”| ✅ Do | ❌ Don’t |
|---|---|
| Show clear pricing | Hidden costs |
| Animated progress | Jumpy counters |
| Expandable details | Wall of text |
| Clear exit option | Trapped modal |
| Mobile optimized | Cramped display |