Card
Display content in elegant cards with animated border beam effects, perfect for features, navigation, and content highlights.
Source code
Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Overview
The ProseCard component creates visually appealing cards with a subtle animated border beam effect on hover. Cards can be static content containers or interactive links, making them perfect for feature highlights, navigation menus, and content organization.
- Animated Border Beam - Subtle glowing border animation on hover
- Link Support - Works as NuxtLink with
toorhrefprops - Flexible Slots - Customize icon, title, description, and footer
- Icon Support - Built-in icon display
- Accessible - Semantic HTML structure with proper link handling
- Customizable - Add custom classes for additional styling
Basic Usage
Create a simple card with title and description:
Getting Started
Learn the basics of using this component library with step-by-step tutorials and examples.
With Icon
Add an icon to make cards more visually distinctive:
Quick Setup
Get up and running in minutes with our automated setup process and sensible defaults.
As Link
Make cards clickable by adding a to or href prop. The card will render as a NuxtLink:
External Link
Link to external URLs using the href prop:
With Markdown Content
Use the default slot for rich markdown content:
Developer Experience
Built with modern tools and best practices:- TypeScript for type safety
- Tailwind CSS for styling
- Nuxt 3 for performance
- Accessible by default
Custom Title Slot
Override the title with custom markdown formatting:
With Footer Slot
Add additional content at the bottom of the card using the footer slot:
Dashboard Example
View a fully functional dashboard with charts, tables, and interactive components.
Card Grid
Display multiple cards in a responsive grid layout:
Fast Performance
Optimized for speed with lazy loading and tree-shaking support.
Type Safe
Full TypeScript support with comprehensive type definitions.
Themeable
Customizable with Tailwind CSS and CSS variables.
Accessible
WCAG compliant with proper ARIA attributes and keyboard navigation.
Modular
Import only what you need with tree-shakeable components.
Well Documented
Comprehensive guides with live examples and best practices.
Feature Showcase
Highlight key features with rich content:
Dashboard Components
Pre-built dashboard components for quick prototyping:- Charts and graphs
- Data tables
- Statistics cards
- Activity feeds
Form Components
Everything you need for complex forms:- Input validation
- File uploads
- Date pickers
- Multi-select
Use Cases
- Feature Highlights - Showcase product features with icons and descriptions
- Navigation Menus - Create engaging navigation with linked cards
- Resource Links - Direct users to guides, examples, or external resources
- Documentation Sections - Organize docs into clickable category cards
- Service Listings - Display services or offerings in an attractive grid
- Call-to-Actions - Highlight important actions or pages
- Content Previews - Teasers for articles, examples, or pages
Best Practices
1. Use Meaningful Icons
Choose icons that clearly represent the card's content:
<!-- ✅ Good - Icon relates to content -->
::prose-card{icon="lucide:shield-check" title="Security"}
<!-- ❌ Less clear - Generic icon -->
::prose-card{icon="lucide:circle" title="Security"}
2. Keep Titles Concise
Short, punchy titles work best:
<!-- ✅ Good - Clear and brief -->
::prose-card{title="Quick Setup"}
<!-- ❌ Too long - Gets cramped -->
::prose-card{title="How to Quickly Set Up Your Development Environment"}
3. Balance Grid Layouts
Use appropriate grid columns for screen sizes:
<!-- ✅ Good - Responsive grid -->
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<!-- ❌ Too many - Cramped on mobile -->
<div class="grid grid-cols-4 gap-2">