ListCard Component

The ListCard component creates attractive cards that display content categories with icons, titles, article counts, and optional featured images. Perfect for organizing documentation sections or feature lists.

Props

Prop

Type

Required

Description

title

string

Yes

The main title displayed in the card header

imageIcon

string

Yes

Path to the icon image (40x40px recommended)

number

number

Yes

Number of articles or items in this category

image

string

No

Optional featured image for wide card layout

Features

• Icon Display - Shows category icons with proper alt text

• Article Counter - Displays the number of items in each category

• Two Layout Modes - Compact and wide layouts based on image presence

• Responsive Design - Adapts to different screen sizes

• Slot Content - Accepts custom content in the card body

• Image Integration - Uses ImageMod component for optimized images

Usage Examples

Basic ListCard

ListCard with Featured Image

Multiple ListCards in Grid

Featured Section with Image

Layout Modes

The ListCard automatically switches between two layout modes:

Compact Mode (No Image)

• Single column layout

• Icon and title in header

• Content directly below

• Best for simple category listings

Wide Mode (With Image)

• Two-column layout on larger screens

• Content on left, image on right

• More visual prominence

• Perfect for featured sections

Styling

The component includes comprehensive styling:

• Responsive grid layout when image is present

• Consistent spacing and typography

• Icon sizing (40x40px)

• Theme-aware styling

• Hover and focus states

Image Requirements

• Icons: 40x40px recommended, SVG preferred

• Featured Images: Any size, component will handle responsive sizing

• Alt Text: Automatically generated from title prop

• Optimization: Uses ImageMod component for performance

Best Practices

• Use consistent icon styles across related ListCards

• Keep titles concise and descriptive

• Update article numbers when content changes

• Use featured images sparingly for emphasis

• Group related ListCards together for better organization

• Ensure icons have good contrast and are clearly visible