Eidetic

Info List Card

Data Display
Block

Display key-value pairs in organized list formats with icons and status colors.

Preview

Basic info list card with icons

Contact Information

Email
john.doe@example.com
Phone
+1 (555) 123-4567
Address
123 Main Street, New York, NY 10001

Two Columns

Multi-column layout for more items

Order Details

Order ID
#ORD-2025-0123
Status
Delivered
Customer
Jane Smith
Date
Jan 15, 2025
Total
$249.99
Payment
Visa •••• 4242

Compact Variant

Tighter spacing for dense information

Account Settings

Username
@johndoe
Email
john@example.com
Timezone
UTC-5 (Eastern)
Language
English (US)

Striped Variant

Alternating row backgrounds

Server Info

Hostname
prod-server-01
IP Address
192.168.1.100
Status
Running
Uptime
45 days
CPU Usage
23%
Memory
4.2 GB / 8 GB

Value Colors

Semantic colors for different statuses

Default
Standard text
Muted
Less emphasis
Success
Positive status
Warning
Needs attention
Error
Critical issue

Horizontal Info List

Inline layout for compact display

Members:
12
Due Date:
Feb 28
Status:
On Track

Definition List

Simple term-definition pairs

API
Application Programming Interface - a set of protocols for building software applications.
REST
Representational State Transfer - an architectural style for networked applications.
JSON
JavaScript Object Notation - a lightweight data interchange format.

InfoListCard Props

InfoListCard API reference

PropTypeDefaultDescription
titlestring—Optional card title
items*InfoListItem[]—Array of label-value pairs
columns1 | 2 | 31Number of columns
variant'default' | 'compact' | 'striped''default'Visual style
classNamestring—Additional CSS classes

Types

Supporting type definitions

interface InfoListItem {
 label: string
 value: React.ReactNode
 icon?: React.ReactNode
 valueColor?: 'default' | 'muted' | 'success' | 'warning' | 'error'
}


interface HorizontalInfoListProps {
 items: InfoListItem[]
 separator?: boolean // Show dividers between items
 className?: string
}


interface DefinitionListProps {
 items: Array<{ term: string; definition: React.ReactNode }>
 layout?: 'stacked' | 'inline'
 className?: string
}

Usage

Import and implementation examples

import { InfoListCard, HorizontalInfoList, DefinitionList } from '@/blocks/data-display/info-list-card'


// Basic info list
<InfoListCard
 title="User Details"
 items={[
 { label: 'Name', value: 'John Doe' },
 { label: 'Email', value: 'john@example.com' },
 { label: 'Status', value: 'Active', valueColor: 'success' },
 ]}
/>


// With icons and columns
<InfoListCard
 items={[
 { label: 'Phone', value: '555-1234', icon: <Phone /> },
 { label: 'Location', value: 'New York', icon: <MapPin /> },
 ]}
 columns={2}
 variant="compact"
/>


// Horizontal layout
<HorizontalInfoList
 items={[
 { label: 'Views', value: '1.2k' },
 { label: 'Likes', value: '342' },
 { label: 'Comments', value: '56' },
 ]}
/>


// Definition list
<DefinitionList
 items={[
 { term: 'Term', definition: 'Definition text' },
 ]}
 layout="stacked"
/>
This block is self-contained (no UI component dependencies)

Features

Built-in functionality

  • Multiple layouts: Vertical, horizontal, and definition list formats
  • Column support: 1, 2, or 3 column grid layouts
  • Icons: Optional icons for each list item
  • Value colors: Semantic colors for status indication
  • Variants: Default, compact, and striped styles
  • Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses semantic dl, dt, dd elements for definition listsCard title uses proper heading hierarchyIcons are decorative and hidden from screen readers

Keyboard Navigation

KeyAction
TabNavigate to interactive elements if present

Notes

  • Color is not the only indicator of status
  • Text contrast meets WCAG requirements
  • Content is readable at various zoom levels

Related Components

CardStatisticTableDescription List