Fidus logoFidus Design System

Opportunity Card

Proactive information surfacing cards for the Fidus dashboard. OpportunityCards display AI-detected opportunities with urgency indicators, privacy badges, and contextual actions.

Basic Example

Budget Alert

🔒 Local

Food: 475 EUR / 500 EUR

3 days remaining in month

💡Month-end approaching, spending high

Urgency Levels

Critical Issue

Urgent attention required immediately.

Important Notice

Important information that needs attention soon.

Normal Update

Regular information update.

Low Priority

Low priority information for your reference.

Calendar Conflict Example

Calendar Conflict

🔒 Local

Double booking detected:

  • • Team Meeting: 2:00 PM - 3:00 PM
  • • Client Call: 2:30 PM - 3:30 PM
💡Both on Nov 4, overlap 30 minutes

Travel Reminder Example

Travel Reminder

🔒 Local

Flight to Paris tomorrow

Departure: Nov 10, 2:00 PM

Berlin (BER) → Paris (CDG)

✓ Check-in complete⚠️ No hotel booking
💡Less than 24 hours until departure

With Visual Element

Budget Progress

🔒 Local
Food Budget95%

475 EUR of 500 EUR spent

💡Month-end approaching

Props

NameTypeDefaultDescription
titlestring-Card title displayed in the header
iconReactNodeundefinedIcon displayed before the title
urgency'urgent' | 'important' | 'normal' | 'low''normal'Urgency level affecting border and header styling
privacyBadgesArray<{ label: string; tooltip?: string }>undefinedPrivacy indicator badges with optional tooltips
onClose() => voidundefinedCallback when close button is clicked
onDismiss() => voidundefinedCallback when card is dismissed via swipe gesture
visualReactNodeundefinedOptional visual element (chart, progress bar, etc.)
contextstringundefinedContext explanation with "Why now?" reasoning
primaryAction{ label: string; onClick: () => void }undefinedPrimary action button configuration
secondaryAction{ label: string; onClick: () => void }undefinedSecondary action button configuration
childrenReactNode-Main content of the card body

Privacy Badges (v1.2.0)

OpportunityCard supports multiple privacy badges with optional tooltips to communicate data handling and privacy levels to users. This feature was enhanced in v1.2.0 to support arrays of badges with hover tooltips.

Single Privacy Badge

Local Budget Alert

🔒 Local

Your food budget is 95% spent

Multiple Privacy Badges

Travel Recommendation

🔒 Local🌐 Cloud

Upcoming trip to Paris

Based on your calendar (local) and weather forecast (cloud)

Privacy Badges with Tooltips

Smart Home Suggestion

🔒 Local🤖 AI⚡ Real-time

Heating optimization available

Current: 18°C → Recommended: 21°C

Save 15% energy by scheduling heating 30 min earlier

💡Temperature dropping below your comfort threshold

Privacy Badge Types

Common privacy badge patterns to help users understand data handling:

🔒 LocalLocal Processing

Data stays on device, no cloud upload

🌐 CloudCloud Data

Uses external API or cloud service

🤖 AIAI Processing

Uses AI/ML model (specify on-device or cloud)

⚡ Real-timeLive Data

Uses real-time sensor or API data

🔐 EncryptedEnd-to-End Encryption

Data encrypted in transit and at rest

👤 PersonalPersonal Data

Contains sensitive personal information

Usage Guidelines

When to use

  • •Proactive Opportunities: Surface AI-detected opportunities that require user attention
  • •Dashboard Widgets: Display actionable insights on the main dashboard
  • •Urgent Notifications: Alert users to time-sensitive issues like conflicts or deadlines
  • •Contextual Actions: Provide quick actions related to the opportunity

Best practices

  • •Set Appropriate Urgency: Use "urgent" sparingly for truly critical issues
  • •Provide Context: Always explain "why now" to help users understand timing
  • •Include Privacy Badge: Show data source transparency (Local, Cloud, etc.)
  • •Actionable Content: Provide clear primary and secondary actions
  • •Dismissible: Always provide a close button for user control
  • •Mobile Support: Cards support swipe gestures for dismissal on mobile

Accessibility

  • •Close button has proper aria-label for screen readers
  • •Urgency levels use both color and visual hierarchy
  • •Touch targets meet minimum 44x44px size requirements
  • •Swipe gestures have minimum threshold for intentional dismissal

Do's and Don'ts

✓ Do

  • •Use appropriate urgency levels based on actual time sensitivity
  • •Provide clear context explaining why the opportunity is surfaced now
  • •Include both primary and secondary actions when multiple paths exist
  • •Show privacy badges to indicate data source transparency

Budget Alert

🔒 Local
Food: 475 EUR / 500 EUR
💡Month-end approaching, spending high

✗ Don't

  • •Mark everything as urgent - reserve for truly critical issues
  • •Omit the close button - users must be able to dismiss cards
  • •Use vague or generic context - be specific about timing
  • •Create cards without actionable next steps

Budget Alert

Your budget needs attention

Related Components

Card

Basic container for grouping related content

Badge

Small status indicators used in opportunity cards

Button

Action buttons for primary and secondary actions

Resources