NewCard Component

The NewCard component is a versatile, modern card element perfect for showcasing features, services, or content blocks. It includes beautiful styling, icon support, and interactive hover effects.

Props

Prop

Type

Required

Default

Description

icon

string

No

Starlight icon name to display

title

string

Yes

The card title (supports HTML)

iconColor

string

No

Custom color for the icon

size

string

No

“large”

Card size variant (“large” or “sm”)

Features

• Icon Integration - Uses Starlight’s icon system

• Two Size Variants - Large (default) and small options

• Hover Animation - Arrow icon with rotation effect

• Gradient Styling - Modern gradient borders and backgrounds

• HTML Support - Title prop supports HTML content

• Responsive Design - Adapts to different screen sizes

• Slot Content - Accepts custom content in the card body

Usage Examples

Basic NewCard

Small Card Variant

Card with Custom Icon Color

Grid of NewCards

Size Variants

Large Cards (Default)

• Full padding (py-12 px-10)

• 2rem icon size

• Includes hover arrow animation

• Best for feature showcases

Small Cards

• Compact padding (p-6)

• 1.4rem icon size

• No arrow animation

• Perfect for compact layouts

Icon Support

The component supports all Starlight icons:

• rocket - For getting started guides

• setting - For configuration topics

• document - For documentation pages

• add-document - For creation workflows

• And many more from the Starlight icon library

Styling Features

• Gradient Borders - Modern visual appeal

• Hover Effects - Interactive arrow rotation

• Theme Integration - Works with light/dark themes

• Group Hover - Enhanced interactivity

• Responsive Spacing - Adapts to screen size

Best Practices

• Use consistent icon styles across related cards

• Choose appropriate size variants based on content length

• Group related NewCards together for better organization

• Use descriptive titles that clearly indicate the content purpose

• Consider icon color coordination with your theme

• Test hover effects to ensure they enhance user experience