package detail
Package Detail
Section titled “Package Detail”Package Detail is a modal dialog component for displaying package information with responsive animations, pricing details, bonus items, and accordion-style content sections.
Responsive Views
Section titled “Responsive Views”Mobile layout displays as a bottom sheet that slides up from the bottom of the screen.
Desktop layout displays as a centered modal dialog with max-width of 700px.
Variants
Section titled “Variants”Shows promotional ribbon badge at top-left
Clean layout without promotional badge
Shows sales progress bar with percentage
No progress indicator displayed
Shows discount pricing with strikethrough original price
Standard layout with essential package information
When to use
Section titled “When to use”Use Package Detail when:
- Displaying purchasable packages with multiple attributes
- Showing promotional pricing with discounts
- Presenting additional bonus items or features
- Providing expandable terms and conditions
- Creating a focused purchase experience