Ivory Feature Showcase
A scholarly, warm-toned feature grid designed for education and learning platforms.
Features
- Ivory palette — Warm ivory (#FFFFF0) with espresso brown (#3C2415) accents
- Bento grid layout — 2x3 grid with varied card spans for visual interest
- Paper texture — Subtle cross-pattern SVG background for scholarly feel
- Typography — Libre Baskerville for headings, Nunito Sans for body
- Feature badges — Categorized labels (Core, AI Powered, Analytics, etc.)
- Hover effects — Expanding progress bars on card hover
- Dark mode — Deep walnut (#1a1209) with golden-tan (#d4a574) accents
- Trust line — Institution count with graduation cap icon
Dependencies
@/components/vue-ui/card — Feature card composition@/components/vue-ui/badge — Category badges@/components/vue-ui/separator — Visual dividerslucide-vue-next — BookOpen, GraduationCap, Users, BarChart3, Lightbulb, Globe icons
Customization
- Features: Edit the
features array for your product features
- Grid layout: Modify
span property on features to change card sizes
- Colors: Replace #3C2415 (espresso) and #FFFFF0 (ivory) for different palettes
- Highlight: Toggle
highlight: true on features for emphasis
