Ivory Education Comparison
A feature comparison block designed for education platforms, e-learning marketplaces, and EdTech SaaS products.
Features
- 3-tier comparison — Starter (free), Professional, Institution plans
- Feature checklists — 10 features per tier with check/dash indicators
- Feature notes — Optional labels (e.g. "4/month", "Unlimited") for nuanced tier differences
- Popular plan highlight — Amber gradient top border, elevated shadow
- Serif headline — Lora font for warm, academic typography
- Amber accent — Amber-700/600 palette on ivory/stone backgrounds
- FERPA/COPPA compliance — Trust strip at bottom
- Dark mode — Warm dark variant with stone palette
- Responsive — Stacks on mobile, 3-column grid on desktop
Dependencies
@/components/vue-ui/badge — Shadcn-Vue Badge@/components/vue-ui/button — Shadcn-Vue Button@/components/vue-ui/card — Shadcn-Vue Card@/components/vue-ui/separator — Shadcn-Vue Separator
Customization
- Plans: Edit the
plans array to change tier names, prices, features
- Colors: Swap amber for another warm accent (terracotta, copper)
- Features: Add or remove feature rows as needed
