Price Table

Description

The Price Table component is designed to showcase multiple pricing plans in a responsive grid layout. It's ideal for presenting different service tiers, subscription options, or product packages. The component automatically adapts to display plans in a 1, 2, or 3 column layout depending on the screen size, ensuring optimal readability and user experience across devices.

Installation

sabaccui add priceTable

Usage

Here's an example of how to use the Price Table component in a Storyblok block:

Schema

Related Components

• Plan

Notes

1. The component uses a computed property numOfPlans to determine the number of plans, which can be used for conditional styling or logic if needed.
2. The grid layout is responsive, adjusting to 1 column on mobile, 2 columns on large screens, and 3 columns on extra-large screens.
3. Each plan is rendered using the Plan component, which should be implemented separately.

Best Practices:

• Ensure that all plans within a Price Table have a consistent structure to maintain visual harmony.
• Use an odd number of plans (e.g., 3) for better visual balance, especially on larger screens.
• Consider highlighting a recommended or popular plan to guide user choices.
• Keep the number of benefits in each plan reasonable to avoid overwhelming the user with information.
• Test the component across various screen sizes to ensure the layout remains effective and readable.