UnifiedInfo#

The UnifiedInfo component consolidates multiple information display components (InfoBox, InfoCard, InfoSection, InfoGrid, InfoItem) into a single, flexible component with variant support.

Basic Usage#

Props#

UnifiedInfoProps#

Types#

Info Type#

Standard informational message:

Warning Type#

Caution or warning message:

Success Type#

Success or confirmation message:

Error Type#

Error or critical message:

Tip Type#

Helpful tips and suggestions:

Note Type#

Additional notes and references:

Variants#

Alert Variant (Default)#

Inline alert-style display:

Card Variant#

Elevated card with more prominence:

Section Variant#

Full-width section with colored background. Note that the section branch renders only children — title has no effect here (use card or alert when you need a visible title):

Item Variant#

Compact item display for lists — this is the standalone InfoItem helper, not a UnifiedInfo variant:

Grid Variant#

Grid layout for multiple info items, built from InfoGrid + InfoItem:

Custom Colors#

Override the default type colors:

Custom Icons#

Use custom icons or icon strings:

SEO Enhancement#

Add hidden keywords and context for better discoverability. The hidden sr-only text and JSON-LD script are only emitted by the alert variant with enableSEO:

JSON-LD Schema#

The component automatically generates JSON-LD structured data for better SEO and AI understanding:

{
  "@context": "https://schema.org",
  "@type": "Message",
  "messageAttachment": {
    "@type": "DigitalDocument",
    "name": "API Authentication",
    "description": "Learn how to authenticate...",
    "about": "User authentication and authorization guide",
    "keywords": ["JWT", "OAuth", "authentication"],
    "inLanguage": "en-US"
  }
}

Migration from Old Components#

The deprecated components below are thin wrappers around UnifiedInfo and are still fully functional.

From InfoBox#

From InfoCard#

From InfoSection#

From InfoGrid + InfoItem#

Real-World Examples#

Documentation Callout#

Feature Announcement#

Quick Start Tips#

Feature Grid#

API Warning#

Accessibility#

• ✅ Proper semantic HTML
• ✅ ARIA roles and labels
• ✅ Keyboard navigation support
• ✅ Screen reader optimized
• ✅ High contrast mode compatible
• ✅ Color-blind friendly icons

Dark Mode#

All variants and types automatically adapt to dark mode:

• Info: Blue theme
• Warning: Yellow theme
• Success: Green theme
• Error: Red theme
• Tip: Purple theme
• Note: Gray theme

Performance#

• Bundle size: ~1.8KB gzipped
• No external dependencies
• Optimized for React 18+
• Lazy loading support
• Memoization for nested grids

Best Practices#

Do's ✅#

• Use appropriate types for content severity
• Keep titles concise (3-5 words)
• Use markdown in content for formatting
• Add keywords for important information
• Use InfoGrid + InfoItem for related items

Don'ts ❌#

• Don't nest too many components deeply
• Don't use error type for warnings
• Don't omit titles for complex info
• Don't expect a title on the section variant — it isn't rendered
• Don't override colors unnecessarily

Comparison: Old vs New#

Before (Multiple Components)#

<InfoBox type="info">Basic info</InfoBox>
<InfoCard title="Card">Card content</InfoCard>
<InfoSection color="blue">Section content</InfoSection>

<InfoGrid columns={2}>
  <InfoItem title="Item 1" description="Content 1" />
  <InfoItem title="Item 2" description="Content 2" />
</InfoGrid>

Bundle Impact: 4 components × ~2KB = ~8KB

After (Unified Component)#

<UnifiedInfo type="info" variant="alert">
  Basic info
</UnifiedInfo>
<UnifiedInfo variant="card" title="Card">
  Card content
</UnifiedInfo>
<UnifiedInfo variant="section" color="blue">
  Section content
</UnifiedInfo>

<InfoGrid columns={2}>
  <InfoItem title="Item 1" description="Content 1" />
  <InfoItem title="Item 2" description="Content 2" />
</InfoGrid>

Bundle Impact: 1 component (+ the small InfoGrid/InfoItem layout helpers) instead of 4 separate components

Related Components#

• Highlight - Similar callout component
• UnifiedMetrics - For displaying metrics
• Timeline - For temporal information

TypeScript Types#

interface UnifiedInfoProps {
  children: ReactNode;
  title?: string;
  type?: 'info' | 'warning' | 'success' | 'error' | 'tip' | 'note';
  variant?: 'alert' | 'card' | 'section';
  color?: 'blue' | 'green' | 'purple' | 'red' | 'yellow' | 'indigo' | 'gray';
  icon?: string;
  className?: string;
  keywords?: string[];
  context?: string;
  enableSEO?: boolean;
}

interface InfoGridProps {
  children: ReactNode;
  columns?: 1 | 2 | 3 | 4;
  gap?: 4 | 6 | 8;
  className?: string;
}

interface InfoItemProps {
  title: string;
  description: string;
  icon?: string;
  color?: 'blue' | 'green' | 'purple' | 'red' | 'yellow' | 'indigo' | 'gray';
  titleColor?: string;
  children?: ReactNode;
}

Browser Support#

• Chrome/Edge: ✅ Latest 2 versions
• Firefox: ✅ Latest 2 versions
• Safari: ✅ Latest 2 versions
• Mobile: ✅ iOS 14+, Android 10+

Testing#

The component includes comprehensive test coverage:

• Unit tests for all variants
• Accessibility tests (WCAG 2.1 AA)
• Visual regression tests
• Dark mode tests
• Performance benchmarks