Looking for creative ways to showcase content in your blog posts? Our custom card components make it easy to present information in visually appealing, organized ways. We offer nine distinct card styles: Notebook Cards for a classic paper aesthetic, Fancy Cards for vibrant displays, Simple Cards for clean, professional article layouts, Dogear Cards for bookmarked highlights, Hover Cards for image galleries, Book Cards for interactive flip animations, Circle Cards for circular profile pictures and icons, Diamond Cards for elegant diagonal-cornered image displays, and Sign Cards for bold 3D announcements and warnings. Let’s explore all nine!

📒 Notebook Cards

What are Notebook Cards?

Notebook Cards are React components that mimic the appearance of a physical notebook page, complete with:

• Lined paper effect - Horizontal blue lines for that classic notebook look
• Vertical margin line - Red left margin just like real notebooks
• Binding holes - Circular cutouts on the left side
• Tape effect - Decorative tape elements at top and bottom
• Text-only mode - Optional image prop for pure note-taking experience
• Automatic dark mode - Seamlessly adapts to your theme
• Responsive grid layout - Works perfectly on all screen sizes

📦 Importing Notebook Cards

1
import { NotebookCard, NotebookCardContainer } from '@/react/Cards';

or with relative path:

1
import { NotebookCard, NotebookCardContainer } from '../../react/Cards';

Important: Always use the .mdx file extension (not .md) when working with React components in your blog posts.

🎯 Notebook Card Usage

Multiple Cards in a Grid

Code Example:

1
<NotebookCardContainer>
2
  <NotebookCard
3
    image="your-image-url.jpg"
4
    title="Card Title"
5
    imageAlt="Description of the image"
6
  >
7
    <p>Your content here...</p>
8
  </NotebookCard>
9
</NotebookCardContainer>

Single Card Example

Standalone Notebook Card

You can also use cards individually without a container for a full-width display.

Text-Only Card (No Image)

You can skip the image prop to create a text-only notebook card - perfect when you don’t have an image or want a pure note-taking experience:

Text-Only Code Example:

1
<NotebookCard title="Your Notes">
2
  <p>Your text content here - no image needed!</p>
3
</NotebookCard>

Design Credit: Notebook design inspired by Codepen¹

✨ Fancy Cards

What are Fancy Cards?

Fancy Cards bring vibrant colors to your content displays:

• Scale effect - Card grows slightly on hover for emphasis
• Vibrant colors - Purple, aqua, and violet color scheme
• Special styling - Built-in support for upcharge and note elements
• Drop cap - First letter of first paragraph is enlarged
• Scrollable content - Custom scrollbar for longer content
• Dark mode support - Automatically adapts colors
• Keyboard accessible - Full tab navigation support

📦 Importing Fancy Cards

1
import { FancyCard, FancyCardContainer } from '@/react/Cards';

or with relative path:

1
import { FancyCard, FancyCardContainer } from '../../react/Cards';

🎯 Fancy Card Usage

Code Example:

1
<FancyCardContainer>
2
  <FancyCard
3
    image="image-url.jpg"
4
    title="Card Title • $9"
5
  >
6
    <p>Regular text with <strong>highlighted text in aqua</strong>.</p>
7
    <p className="upcharge">Additional cost information.</p>
8
    <span className="note">Special seasonal note.</span>
9
  </FancyCard>
10
</FancyCardContainer>

Special Classes for Fancy Cards

Upcharge Class - Highlight pricing information:

1
<p className="upcharge">Add extra toppings for $2 more.</p>

Note Class - Display important seasonal or special notes:

1
<span className="note">Limited Time Only!</span>

Strong Tags - Automatically styled in aqua color:

1
<strong>This text will be aqua colored</strong>

Single Card Example

Standalone Fancy Card • $12

You can use a single Fancy Card for featured content without a container.

Add premium features for $3 more.

Design Credit: Fancy card design inspired by Codepen²

📄 Simple Cards

What are Simple Cards?

Simple Cards provide a clean, professional article-style layout perfect for content displays:

• Clean design - Professional article-style layout
• Smooth animations - Image zoom and icon slide effects on hover
• Read more link - Optional call-to-action with animated arrow icon
• Responsive grid - Automatically adjusts to available space
• Dark mode support - Seamless theme switching
• Keyboard accessible - Full tab navigation support
• Customizable - Optional read more URL and alt text

📦 Importing Simple Cards

1
import { SimpleCard, SimpleCardContainer } from '@/react/Cards';

or with relative path:

1
import { SimpleCard, SimpleCardContainer } from '../../react/Cards';

🎯 Simple Card Usage

Multiple Cards in a Grid

Mountain Adventure

Explore the breathtaking views and challenging trails of the Rocky Mountains. Perfect for both beginners and experienced hikers.

Read more about Mountain Adventure

Ocean Retreat

Discover tranquil beaches and crystal-clear waters. An ideal destination for relaxation and water sports enthusiasts.

Read more about Ocean Retreat

City Exploration

Experience vibrant city life with museums, restaurants, and cultural attractions. No read more link needed for this card.

Code Example:

1
<SimpleCardContainer>
2
  <SimpleCard
3
    image="image-url.jpg"
4
    title="Card Title"
5
    readMoreUrl="/your-link"
6
    imageAlt="Description"
7
  >
8
    <p>Your content here...</p>
9
  </SimpleCard>
10
</SimpleCardContainer>

Single Card Example

Featured Article

A standalone Simple Card works great for highlighting individual articles or featured content on your page.

Read more about Featured Article

Without Read More Button

You can omit the readMoreUrl prop to display cards without the “Read more” link:

1
<SimpleCard
2
  image="image.jpg"
3
  title="No Link Card"
4
>
5
  <p>This card has no read more button.</p>
6
</SimpleCard>

Design Credit: Simple card design inspired by Codepen³

🐶 Dogear Cards

What are Dogear Cards?

Dogear Cards are text-focused React components that mimic the appearance of a bookmarked page with distinctive folded corners:

• Folded corner effects - Top-right and bottom-left dogears (like bookmarks)
• 8 predefined color schemes - Teal, blue, purple, orange, green, red, pink, and gray
• Custom colors - Use any hex color you want
• Text-only design - Perfect for notes, quotes, and highlights
• Background matching - Dogears adapt to your page background
• Automatic dark mode - Seamlessly adapts to your theme
• Responsive grid layout - Works perfectly on all screen sizes

📦 Importing Dogear Cards

1
import { DogearCard, DogearCardContainer } from '@/react/Cards';

or with relative path:

1
import { DogearCard, DogearCardContainer } from '../../react/Cards';

Important: Always set the bgColor prop to match your page/container background color for the dogear effect to work properly!

🎨 Predefined Color Schemes

🎯 Dogear Card Usage

All Color Schemes

Code Example:

1
<div style={{ backgroundColor: '#f5f5f5', padding: '2rem' }}>
2
  <DogearCardContainer>
3
    <DogearCard title="Card Title" color="teal" bgColor="#f5f5f5">
4
      <p>Your content here...</p>
5
    </DogearCard>
6
  </DogearCardContainer>
7
</div>

Custom Color Example

You can use any custom hex color instead of predefined schemes:

Code Example:

1
<div style={{ backgroundColor: '#fff8dc', padding: '2rem' }}>
2
  <DogearCardContainer>
3
    <DogearCard title="Custom Color" customColor="#ff6b6b" bgColor="#fff8dc">
4
      <p>Use any custom hex color to match your brand!</p>
5
    </DogearCard>
6
  </DogearCardContainer>
7
</div>

Single Card Example

Tip: Keep DogearCardContainer even for single cards to prevent them from stretching to the edge.

Design Credit: Dogear card design inspired by Codepen⁴

🎴 Hover Cards

What are Hover Cards?

Hover Cards are interactive React components that reveal detailed descriptions on hover, featuring:

• Image with overlay - Beautiful images that show descriptions on hover
• Smooth animations - Elegant slide-up effect with fade transitions
• Scrollable content - Long descriptions are scrollable with custom scrollbar
• Lift effect - Cards elevate with enhanced shadow on hover
• Automatic dark mode - Seamlessly adapts to your theme
• Responsive grid layout - Auto-fit grid that works on all screen sizes

📦 Importing Hover Cards

1
import { HoverCard, HoverCardContainer } from '@/react/Cards';

or with relative path:

1
import { HoverCard, HoverCardContainer } from '../../react/Cards';

Important: Always use the .mdx file extension (not .md) when working with React components in your blog posts.

Hydration Required: Add client:load directive to each HoverCard component for interactivity.

🎯 Hover Card Usage

Single Card (Centered)

Code Example:

1
<HoverCardContainer>
2
  <HoverCard
3
    client:load
4
    image="your-image-url.jpg"
5
    title="Card Title"
6
    imageAlt="Description of the image"
7
  >
8
    <p>Your content here...</p>
9
  </HoverCard>
10
</HoverCardContainer>

Multiple Cards in a Grid

Code Example:

1
<HoverCardContainer>
2
  <HoverCard
3
    client:load
4
    image="seal.jpg"
5
    title="Seal"
6
    imageAlt="Seal in the ocean"
7
  >
8
    <p>Description about seals...</p>
9
  </HoverCard>
10

11
  <HoverCard
12
    client:load
13
    image="lion.jpg"
14
    title="Lion"
15
    imageAlt="Lion portrait"
13 collapsed lines
16
  >
17
    <p>Description about lions...</p>
18
  </HoverCard>
19

20
  <HoverCard
21
    client:load
22
    image="hawk.jpg"
23
    title="Hawk"
24
    imageAlt="Hawk in flight"
25
  >
26
    <p>Description about hawks...</p>
27
  </HoverCard>
28
</HoverCardContainer>

🎨 Hover Card Features

• Hover to Reveal: Descriptions slide up smoothly when you hover over the card
• Dark Mode Support: Automatically adjusts colors for light and dark themes
• Custom Scrollbar: If content is long, you get a beautifully styled scrollbar
• Lift Animation: Cards elevate with enhanced shadow on hover
• Responsive Grid: Auto-fit layout adapts to screen size
• Centered Single Card: When using just one card, it’s automatically centered

⚙️ Props

• image - URL of the image to display (required)
• title - Title displayed on the card header (required)
• children - Content to display on hover (can include paragraphs, lists, etc.) (required)
• imageAlt - Alt text for the image (defaults to title if not provided)
• client:load - Astro directive to enable interactivity (required)

Hover Cards Perfect For:

• Wildlife & Nature - Animal descriptions and facts
• Product Showcases - Detailed product information
• Portfolio Items - Project descriptions and details
• Team Members - Bio and background information
• Image Galleries - Photo descriptions and context
• Educational Content - Learning materials with images

Design Credit: Hover card design inspired by Codepen⁵

📖 Book Cards

What are Book Cards?

Book Cards are interactive flip cards with expandable content, featuring:

• Flip animation - Card flips to reveal gradient background on hover
• Expandable width - Card doubles in width to show inside page
• Remix Icons - Beautiful icon library integration
• 4 color themes - City, Ski, Beach, Camping gradients
• Automatic dark mode - Seamlessly adapts to your theme

📦 Importing Book Cards

1
import { BookCard, BookCardContainer } from '@/react/Cards';

or with relative path:

1
import { BookCard, BookCardContainer  } from '../../react/Cards';

Important: Always use the .mdx file extension (not .md) when working with React components in your blog posts.

Hydration Required: Add client:load directive to each BookCard component for interactivity.

Remix Icons: Ensure Remix Icon CSS is loaded in your project.

🎯 Book Card Usage

Multiple Cards in a Grid

Single book Card

Code Example:

1
<BookCardContainer>
2
  <BookCard
3
    client:load
4
    icon="ri-map-pin-line"
5
    title="City break"
6
    subtitle="Urban adventure"
7
    heading="For urban lovers"
8
    color="city"
9
  >
10
    <p>Description here...</p>
11
  </BookCard>
12

13
  <BookCard
14
    client:load
15
    icon="ri-snowflake-line"
8 collapsed lines
16
    title="Ski trip"
17
    subtitle="Mountain escape"
18
    heading="For snow lovers"
19
    color="ski"
20
  >
21
    <p>Content here...</p>
22
  </BookCard>
23
</BookCardContainer>

🎨 Book Card Features

• Flip Animation: Card rotates 180° to show gradient background
• Expandable Design: Card width doubles (15rem → 30rem) to reveal content
• Remix Icons: Use any icon from remixicon.com
• 4 Color Themes: City (pink), Ski (cyan), Beach (coral), Camping (green)
• Dark Mode Support: Automatically adjusts colors

⚙️ Props

• icon - Remix Icon class name (e.g., ri-map-pin-line) - defaults to ri-book-open-line
• title - Title displayed on the card (required)
• subtitle - Subtitle text below title (optional)
• heading - Heading for inside page (required)
• children - Inside page content (required)
• color - Color scheme: city, ski, beach, camping (defaults to city)
• client:load - Astro directive to enable interactivity (required)

Book Cards Perfect For:

• Services & Offerings - Feature different service packages
• Travel Destinations - Showcase vacation options
• Product Categories - Display product lines
• Event Types - Highlight different event packages
• Course Offerings - Present educational programs
• Membership Tiers - Show subscription levels

Design Credit: Book card design inspired by Codepen - Maza designDev⁶

⭕ Circle Cards

What are Circle Cards?

Circle Cards are React components that display images or text in perfect circular shapes, ideal for:

• Circular cropping - Images automatically cut into circular/elliptical shapes
• Profile pictures - Display avatars and team member photos
• Icon galleries - Showcase technology stacks or tool icons
• Flexible sizing - Fixed dimensions (width/height) or free-size mode for natural dimensions
• Text circles - Display text in colored circular backgrounds
• Custom colors - Configurable background colors for text-only circles
• Flexbox layout - Responsive grid arrangement with automatic wrapping
• Two display modes - Controlled size for perfect circles or free size for natural image dimensions

📦 Importing Circle Cards

1
import { CircleCard, CircleCardContainer } from '@/react/Cards';

or with relative path:

1
import { CircleCard, CircleCardContainer  } from '../../react/Cards';

🎯 Circle Card Usage

Default Image Circles (200x200px)

Free Size Mode (Natural Image Dimensions)

When you want images to display at their full natural size without any dimension restrictions, use isFreeSize={true}:

Free Size Mode: Image displays at its natural dimensions with circular/elliptical crop. Perfect when you don’t want to manually set dimensions for each image.

Custom Fixed Size (Perfect Circles)

For perfect circles with specific dimensions, use the width and height props:

Fixed Size Mode: Creates perfect circles by specifying exact width and height. Best for uniform circular grids.

Text Circles

• React

• Vue

• Angular

• Svelte

• Next.js

• Astro

Code Examples:

1
// Default 200x200px circles
2
<CircleCardContainer>
3
  <CircleCard
4
    image="/team/member1.jpg"
5
    imageAlt="John Doe"
6
  />
7
  <CircleCard
8
    image="/team/member2.jpg"
9
    imageAlt="Jane Smith"
10
  />
11
</CircleCardContainer>
12

13
// Free size mode - images display at natural dimensions
14
<CircleCardContainer>
15
  <CircleCard
42 collapsed lines
16
    image="/photos/photo1.jpg"
17
    imageAlt="Photo 1"
18
    isFreeSize={true}
19
  />
20
  <CircleCard
21
    image="/photos/photo2.jpg"
22
    imageAlt="Photo 2"
23
    isFreeSize={true}
24
  />
25
</CircleCardContainer>
26

27
// Custom fixed size - perfect circles
28
<CircleCardContainer>
29
  <CircleCard
30
    image="/profiles/user1.jpg"
31
    imageAlt="User 1"
32
    width="300px"
33
    height="300px"
34
  />
35
  <CircleCard
36
    image="/profiles/user2.jpg"
37
    imageAlt="User 2"
38
    width="300px"
39
    height="300px"
40
  />
41
</CircleCardContainer>
42

43
// Percentage-based size (responsive)
44
<CircleCardContainer>
45
  <CircleCard
46
    image="/avatar.jpg"
47
    imageAlt="Avatar"
48
    size="20%"
49
  />
50
</CircleCardContainer>
51

52
// Text circles with custom colors
53
<CircleCardContainer>
54
  <CircleCard title="HTML" bgColor="#e34c26" />
55
  <CircleCard title="CSS" bgColor="#264de4" />
56
  <CircleCard title="JS" bgColor="#f0db4f" />
57
</CircleCardContainer>

🎨 Circle Card Features

• Perfect Circles: Images cropped to circular shape using border-radius: 50%
• Two Size Modes:
  • Fixed Mode (default): Use width/height or size props for controlled dimensions
  • Free Mode: Use isFreeSize={true} for natural image dimensions
• Text Mode: Display text in circular colored backgrounds when no image provided
• Custom Colors: Set any background color for text circles via bgColor prop
• Flexbox Grid: Container automatically wraps and spaces circles
• Dark Mode: Text circles adapt to theme automatically

⚙️ Props

Important Notes:

• Either image or title should be provided. If both are provided, image takes precedence.
• For perfect circles: Use width and height with equal values (e.g., width="300px" height="300px")
• For natural image size: Use isFreeSize={true} - image will display at full dimensions with circular/elliptical crop
• For responsive circles: Use size prop with percentage value (e.g., size="20%")
• Text circles: Only require title and optionally bgColor props

Circle Cards Perfect For:

• Team Members - Display profile pictures in circular format
• Social Profiles - Showcase avatars and social media pictures
• Tech Stacks - Icon gallery showing technologies used
• Product Categories - Circular product thumbnails
• Avatar Galleries - User profile collections
• Logo Showcases - Brand or partner logos in circles
• Icon Collections - Tool or feature icons
• Portfolio Previews - Circular project thumbnails

Design Credit: Circle card design inspired by Codepen responsive circular image galleries⁷

💎 Diamond Cards

What are Diamond Cards?

Diamond Cards are React components that display images with distinctive diagonal rounded corners, creating an elegant asymmetric look. Perfect for:

• Diagonal Rounded Corners - 48px radius on top-right and bottom-left corners
• Subtle Corner Curves - 8px radius on top-left and bottom-right for balance
• Image-Only Display - Focused entirely on showcasing images beautifully
• Flexible Sizing Modes - Fixed dimensions, natural size, or percentage-based
• Dark Mode Support - Shadows automatically adapt to current theme
• Hover Effects - Smooth lift animation with enhanced shadow on hover
• Responsive Grid - Container automatically wraps and spaces cards

📦 Importing Diamond Cards

1
import { DiamondCard, DiamondCardContainer } from '@/react/Cards';

or with relative path:

1
import { DiamondCard, DiamondCardContainer  } from '../../react/Cards';

🎯 Diamond Card Usage

Default Image Cards (300x300px)

Free Size Mode (Natural Image Dimensions)

Use isFreeSize={true} to display images at their natural dimensions with diagonal rounded corners:

When isFreeSize={true}, the image displays at its natural dimensions while maintaining the diagonal rounded corner effect. Perfect for hero images or featured content.

Custom Fixed Size

Code Examples:

1
// Default 300x300px diamonds
2
<DiamondCardContainer>
3
  <DiamondCard
4
    image="/gallery/photo1.jpg"
5
    imageAlt="Gallery image 1"
6
  />
7
  <DiamondCard
8
    image="/gallery/photo2.jpg"
9
    imageAlt="Gallery image 2"
10
  />
11
</DiamondCardContainer>
12

13
// Free size mode for large images
14
<DiamondCard
15
  image="/hero-image.jpg"
25 collapsed lines
16
  imageAlt="Featured image"
17
  isFreeSize={true}
18
/>
19

20
// Custom fixed dimensions
21
<DiamondCard
22
  image="/product.jpg"
23
  imageAlt="Product photo"
24
  width="450px"
25
  height="450px"
26
/>
27

28
// Responsive with percentage
29
<DiamondCardContainer>
30
  <DiamondCard
31
    image="/portfolio1.jpg"
32
    imageAlt="Portfolio item"
33
    size="30%"
34
  />
35
  <DiamondCard
36
    image="/portfolio2.jpg"
37
    imageAlt="Portfolio item"
38
    size="30%"
39
  />
40
</DiamondCardContainer>

🎨 Diamond Card Features

• Two Size Modes:
  • Fixed Mode (default): Use width/height or size props for controlled dimensions
  • Free Mode: Use isFreeSize={true} for natural image dimensions
• Diagonal Rounded Corners: Creates distinctive asymmetric look (48px on top-right & bottom-left)
• Image-Only Design: No text overlays, focused on visual impact
• Hover Animation: Cards lift 4px with enhanced shadow
• Dark Mode Adaptive: Shadows change color based on theme
• Flexbox Grid: Container automatically wraps and spaces cards with 20px gap

⚙️ Props

Important Notes:

• image prop is required - Diamond cards are designed exclusively for images
• For consistent grids: Use equal width and height values
• For hero/featured images: Use isFreeSize={true} to display at full dimensions
• For responsive layouts: Use size prop with percentage values (e.g., size="25%")

Diamond Cards Perfect For:

• Portfolio Galleries - Showcase creative work with modern style
• Product Photography - E-commerce and catalog displays
• Image Collections - Photo galleries and visual content
• Photography Portfolios - Professional photo presentations
• Art Displays - Digital art and illustration showcases
• Travel Photos - Destination and journey photography
• Event Galleries - Wedding, conference, or event photos
• Featured Images - Hero sections and highlighted content

🪧 Sign Cards

What are Sign Cards?

Sign Cards are React components that display text with a bold 3D cutout effect, perfect for warnings, announcements, and attention-grabbing messages. Features include:

• 3D Perspective Effect - Realistic 3D rotation creates depth and visual interest
• Split Text Design - First part of text enclosed in contrasting box for emphasis
• 8 Predefined Types - Warning, Continued, Note, Alert, Info, Important, Tip, Update
• Custom Mode - Create your own with custom split text and colors
• Hover Animation - Cards straighten on hover for enhanced readability
• Border Frame - Black border adds definition and depth
• Color Variety - Each type has its own distinctive color scheme
• Bold Typography - Uppercase 900-weight font commands attention

📦 Importing Sign Cards

1
import { SignCard, SignCardContainer } from '@/react/Cards';

or with relative path:

1
import { SignCard, SignCardContainer } from '../../react/Cards';

Important: Always use the .mdx file extension (not .md) when working with React components in your blog posts.

Hydration Required: Add client:load directive to each SignCard component for interactivity.

🎯 Sign Card Usage

Predefined Sign Types

Custom Sign with Split Text

Custom Colors

Code Examples:

1
// Predefined types - just specify the type
2
<SignCard type="warning" client:load />
3
<SignCard type="continued" client:load />
4
<SignCard type="note" client:load />
5
<SignCard type="alert" client:load />
6
<SignCard type="info" client:load />
7
<SignCard type="important" client:load />
8
<SignCard type="tip" client:load />
9
<SignCard type="update" client:load />
10

11
// Custom sign with default yellow
12
<SignCard
13
  type="custom"
14
  firstWord="Cut"
15
  secondWord="out"
21 collapsed lines
16
  client:load
17
/>
18

19
// Custom sign with your colors
20
<SignCard
21
  type="custom"
22
  firstWord="Brand"
23
  secondWord="New"
24
  bgColor="#e74c3c"
25
  textColor="#fff"
26
  enclosedBg="#fff"
27
  enclosedColor="#e74c3c"
28
  client:load
29
/>
30

31
// Multiple signs in container
32
<SignCardContainer>
33
  <SignCard type="warning" client:load />
34
  <SignCard type="important" client:load />
35
  <SignCard type="tip" client:load />
36
</SignCardContainer>

🎨 Sign Card Features

• 3D Transforms:
  • Default: Card rotated rotateY(25deg) rotateX(10deg)
  • Hover: Straightens to transform: none for readability
• Split Text Effect: First word scaled to 0.75 and enclosed in contrasting box
• Smooth Animations: 0.3s cubic-bezier transitions on hover
• Predefined Color Schemes: 8 ready-to-use color combinations
• Custom Colors: Full control over background, text, and enclosed box colors
• Border Frame: 9px black border adds depth and professional finish
• Bold Typography: 60px, 900-weight uppercase text

⚙️ Props

🎨 Predefined Sign Types & Colors

Important Notes:

• Custom mode requires firstWord and secondWord - Split your message meaningfully
• Word split matters: Choose split that creates visual balance (e.g., “War|ning”, “Up|date”, “Cut|out”)
• Keep text short: Works best with 1-3 words total (2-10 characters per word)
• Hover reveals: The straightening animation on hover improves readability
• Container spacing: Use SignCardContainer for vertical stacking with proper gaps

Sign Cards Perfect For:

• Content Breaks - “To be continued” between series posts
• Warnings & Alerts - Important cautions and time-sensitive info
• Announcements - Updates, new features, important news
• Section Dividers - Bold visual breaks between content sections
• Tips & Notes - Educational content and pro tips
• Custom Messages - Brand announcements, event promos
• Tutorial Markers - Step completions, checkpoints
• Blog Status - Draft, updated, deprecated markers

Design Credit: Sign card design inspired by Codepen 3D cutout card⁸

📋 Component Props Reference

Card Containers (All Types)

Card Components (All Types)

⚠️ Important Notes:

• Hover, Book & Sign Cards require client:load directive for interactive functionality
• Image prop is mandatory for Hover cards - component will not render properly without it
• Single Hover card is automatically centered; multiple cards display in responsive grid

✨ Feature Comparison

💡 Use Cases

Notebook Cards Perfect For:

• Documentation - Technical guides and tutorials
• Notes and tips - Educational content
• Code snippets - Programming examples
• Study materials - Learning resources
• Journal entries - Blog posts with personal touch

Fancy Cards Perfect For:

• Product showcases - E-commerce displays
• Restaurant menus - Food and drink items
• Service offerings - Business promotions
• Event highlights - Special occasions
• Premium content - Featured items

Simple Cards Perfect For:

• Blog posts - Article previews and summaries
• News items - Latest updates and announcements
• Portfolio pieces - Work samples and projects
• Resource links - External content references
• General content - Versatile for any use case

Dogear Cards Perfect For:

• Quick notes - Important reminders and tips
• Quotes - Highlighted quotations and testimonials
• Key points - Summary highlights and takeaways
• Bookmarks - Saved references and favorites
• Alerts - Warnings, tips, and special notices

Hover Cards Perfect For:

• Wildlife & Nature - Animal descriptions and detailed facts
• Product Showcases - Detailed product information and specifications
• Portfolio Items - Project descriptions and implementation details
• Team Members - Bio and background information
• Image Galleries - Photo descriptions and context
• Educational Content - Learning materials with images and descriptions

Book Cards Perfect For:

• Services & Offerings - Business services with detailed descriptions
• Travel Destinations - Location showcases with features and booking options
• Product Categories - Product lines with specifications
• Event Types - Event offerings with details and registration
• Course Offerings - Educational courses with enrollment options
• Membership Tiers - Subscription levels with benefit details

Circle Cards Perfect For:

• Team Members - Display profile pictures in circular format
• Social Profiles - Showcase avatars and social media pictures
• Tech Stacks - Icon gallery showing technologies used
• Product Categories - Circular product thumbnails
• Avatar Galleries - User profile collections
• Logo Showcases - Brand or partner logos in circles
• Icon Collections - Tool or feature icons
• Portfolio Previews - Circular project thumbnails

Diamond Cards Perfect For:

• Portfolio Galleries - Showcase creative work with modern asymmetric style
• Product Photography - E-commerce and catalog displays with distinctive look
• Image Collections - Photo galleries with elegant diagonal corners
• Photography Portfolios - Professional photo presentations
• Art Displays - Digital art and illustration showcases
• Travel Photos - Destination and journey photography
• Event Galleries - Wedding, conference, or event photos
• Featured Images - Hero sections and highlighted visual content

Sign Cards Perfect For:

• Content Breaks - “To be continued” between series posts or chapters
• Warnings & Alerts - Important cautions and critical information
• Announcements - Updates, new features, breaking news
• Section Dividers - Bold visual breaks between major content sections
• Tips & Notes - Educational pro tips and important side notes
• Custom Messages - Brand announcements, event promotions, special offers
• Tutorial Markers - Step completions, milestones, checkpoints
• Blog Status - Draft markers, updated tags, deprecated content notices
• Event Galleries - Wedding, conference, or event photos
• Featured Images - Hero sections and highlighted visual content

🎨 Tips for Best Results

1. Choose the right card - Notebook for documentation, Fancy for products, Simple for articles, Dogear for notes, Hover for image-heavy content, Book for services/offerings, Circle for profiles/avatars, Diamond for image galleries, Sign for warnings/announcements
2. Consistent styling - Stick to one card type per blog post
3. Quality images - Use high-resolution images (recommended: 800x600px minimum, 600x600px+ for Diamond cards)
4. Text-only notebooks - Skip the image prop on Notebook cards for pure text content
5. Descriptive alt text - Improve accessibility and SEO
6. Concise titles - Keep titles short and impactful
7. Balanced content - Avoid overly long text in cards
8. Test both themes - Preview in light and dark mode
9. Mobile-first - Cards are responsive but test on mobile devices
10. Read more links - Use meaningful URLs instead of ’#’ for Simple cards
11. Mix and match - Combine single cards with containers for variety
12. Remix Icons - Book cards require Remix Icons CSS to be loaded in your project
13. Circle card sizing - For fixed circles use equal width and height (e.g., width="300px" height="300px"). For natural image size, use isFreeSize={true}
14. Circle responsive sizing - Use the size prop with percentage values (e.g., size="20%") for container-relative circles
15. Text circles - Use contrasting colors via bgColor prop for text-only Circle cards for better visibility
16. Diamond card grids - Use consistent dimensions (e.g., width="400px" height="400px") for uniform gallery layouts
17. Diamond free size - Use isFreeSize={true} on Diamond cards for hero images or featured content at natural dimensions
18. Diamond corners - The diagonal rounded corners (48px on top-right & bottom-left) create distinctive asymmetry
19. Sign word split - For custom Sign cards, split words meaningfully (e.g., “Cut|out”, “War|ning”, “Up|date”) for visual balance
20. Sign text length - Keep Sign card text short (1-3 words total) for best visual impact and readability
21. Sign predefined types - Use predefined types (warning, note, tip, etc.) for quick, color-matched messages
22. Client hydration - Remember to add client:load to Hover and Book cards for interactivity
23. Color consistency - Book card gradient colors (city, ski, beach, camping) match their thematic content
24. Dogear backgrounds - Always set bgColor to match your page background for proper dogear effect
25. Color meaning - Use Dogear card colors meaningfully (red for alerts, green for success, etc.)
26. Hover card images - Use compelling images that work well with text overlays