Navigation Cards
Interactive cards for navigation and feature showcasing. Perfect for dashboards, component libraries, and feature discovery pages.
Basic Usage
Custom Icon Background Color
Without Subtitle
Disabled State
External Links
Use href instead of to for external links:
Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon | string | - | Required. Bootstrap icon class (e.g., "bi-tag") |
title | string | - | Required. Card title |
subtitle | string | undefined | Optional subtitle/description |
to | string | undefined | Internal route path (for Vue Router) |
href | string | undefined | External URL |
disabled | boolean | false | Disable interaction and apply disabled styling |
iconBgColor | string | "var(--q-primary-lighter)" | Background color for icon container |
iconClasses | string | "" | Additional CSS classes for the icon |
Events
| Event | Payload | Description |
|---|---|---|
click | Event | Emitted when the card is clicked (only when not disabled) |
Design Notes
Icon Contrast (UX Improvement)
The icon is always dark (var(--bs-dark)) regardless of the theme:
- ✅ Light mode: Dark icon on light background → high contrast
- ✅ Dark mode: Dark icon on light background → high contrast
This ensures the icon is always readable on the colored background container, even in dark mode where body text is typically white.
Why this matters:
- The icon background is typically a light color (like light blue
#E3F2FD) - In dark mode, if the icon inherited the body color (white), it would have poor contrast
- By keeping the icon dark, we maintain consistent high contrast across all themes
Accessibility
- Uses semantic HTML (
<a>for links,<div>for static cards) - Keyboard navigable when used as a link
- Disabled state properly communicated
- Hover and focus states for better interactivity feedback
Use Cases
- Component Libraries: Showcase available components with icons
- Dashboards: Quick navigation to different sections
- Feature Discovery: Highlight product features or capabilities
- Documentation Sites: Navigate between guides and references
- Settings Pages: Navigate to different configuration areas