Adaptive Content Card

Layout

Adaptive

Card that dynamically adjusts information density based on context and user attention patterns. Switch between compact, detailed, and expanded views with smooth transitions.

Preview

Interactive card with view mode switching

Adaptive Card

Q4 Productivity Report

Team Analytics

Comprehensive analysis of Q4 performance including task completion rates, focus time metrics, and year-over-year comparisons across all projects.

Tasks Done

2,847

+12.5%

Focus Hours

1,234

+8.2%

Team Members

ProductivityQ4 2025Team

2 hours ago

View Modes

Each view mode shows progressively more information

Compact View

Adaptive Card

Q4 Productivity Report

Team Analytics

2,847+12.5%

Detailed View (Default)

Adaptive Card

Q4 Productivity Report

Team Analytics

Comprehensive analysis of Q4 performance including task completion rates, focus time metrics, and year-over-year comparisons across all projects.

Tasks Done

2,847

+12.5%

Focus Hours

1,234

+8.2%

Team Members

ProductivityQ4 2025Team

2 hours ago

Expanded View

Adaptive Card

Q4 Productivity Report

Updated

Team Analytics

Comprehensive analysis of Q4 performance including task completion rates, focus time metrics, and year-over-year comparisons across all projects.

Tasks Done

2,847

+12.5%

Focus Hours

1,234

+8.2%

Team Members

Custom Content

Cards with custom content and icons

Adaptive Card

Team Performance

Weekly Analytics

This week shows strong engagement with 15% more collaborative sessions and improved response times across the board.

Active Users

1,234

+8%

Sessions

5,678

+15%

Avg Time

12m

-2m

AnalyticsTeamWeekly

5 minutes ago

Props

AdaptiveContentCard component API reference

Prop	Type	Default	Description
`content`	`CardContent`	`Default content`	Card content object with title, subtitle, description, metrics, tags, etc.
`defaultViewMode`	`'compact' \| 'detailed' \| 'expanded'`	`'detailed'`	Initial view mode when uncontrolled
`viewMode`	`'compact' \| 'detailed' \| 'expanded'`	—	Controlled view mode
`onViewModeChange`	`(mode: ViewMode) => void`	—	Callback when view mode changes
`showAIInsight`	`boolean`	`true`	Show AI insight message on hover
`aiInsightMessage`	`string`	`'Content density adapts based on your attention patterns'`	Custom AI insight message
`onActionClick`	`() => void`	—	Callback when the action (more) button is clicked
`className`	`string`	—	Additional CSS classes

CardContent Type

interface CardContent {
  title: string
  subtitle: string
  description: string
  metrics: Metric[]
  tags: string[]
  lastUpdated: string
  icon?: LucideIcon
}

interface Metric {
  label: string
  value: string
  change: string
  positive?: boolean
}

Usage

Import and implementation example

import { AdaptiveContentCard, type CardContent } from '@/blocks/adaptive-ui/adaptive-content-card'
import { Users } from 'lucide-react'

const customContent: CardContent = {
  title: 'Team Performance',
  subtitle: 'Weekly Analytics',
  description: 'Strong engagement with 15% more collaborative sessions.',
  metrics: [
    { label: 'Active Users', value: '1,234', change: '+8%', positive: true },
    { label: 'Sessions', value: '5,678', change: '+15%', positive: true },
  ],
  tags: ['Analytics', 'Team'],
  lastUpdated: '5 minutes ago',
  icon: Users,
}

export default function Example() {
  const [viewMode, setViewMode] = useState<ViewMode>('detailed')

  return (
    <>
      {/* Basic usage */}
      <AdaptiveContentCard />

      {/* Custom content */}
      <AdaptiveContentCard content={customContent} />

      {/* Controlled mode */}
      <AdaptiveContentCard
        viewMode={viewMode}
        onViewModeChange={setViewMode}
      />

      {/* Custom AI insight */}
      <AdaptiveContentCard
        showAIInsight={true}
        aiInsightMessage="This card adapts to your reading patterns"
      />
    </>
  )
}

This block is self-contained (no UI component dependencies)

Features

Built-in functionality

Three view modes: Compact, detailed, and expanded layouts for different contexts
Dynamic information density: Content adjusts based on selected view mode
AI insight on hover: Optional contextual message about content adaptation
Metrics display: Grid of metrics with trend indicators showing positive/negative changes
Tag system: Categorize content with customizable tags
Timestamp display: Shows last updated time for content freshness
Smooth transitions: Animated transitions between view modes
Custom icons: Support for Lucide icons to represent content type
Dark mode: Full dark mode support across all view modes

Accessibility

ARIA support and keyboard navigation

ARIA Attributes

role="article" on card containeraria-label on view mode buttonsaria-pressed for active view mode

Keyboard Navigation

Key	Action
`Tab`	Navigate between view mode buttons and action button
`Enter / Space`	Activate the focused button

Notes

View mode tabs are keyboard accessible
Metrics use semantic color coding for positive/negative trends
AI insight footer has clear visual contrast when visible

Related Components

AdaptiveDensity PersonalizedDashboard Alert Card