DefaultCard

Card component for displaying content with image, title, description, date, and taxonomy tags.

Props

Prop	Type	Required	Default	Description
`card`	`CardData`	Yes	-	Card data object
`columns`	`2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8`	No	`2`	Number of columns in grid (affects image sizes)
`priority`	`boolean`	No	`false`	Loads the image eagerly with `fetchPriority="high"` (for above-the-fold cards)
`cslp`	`CSLPFieldMapping`	No	-	CSLP mapping for editable fields

CardData Interface

1interface CardData {
2  image?: {
3    url: string;
4    alt?: string;
5  };
6  title?: string;
7  description?: string;
8  url: string;
9  contentType?: 'blogpost' | 'guide' | 'person' | 'live_stream' | 'page' | 'kickstart';
10  date?: string;
11  youtubeVideoId?: string;
12  taxonomies?: string[];
13}

interface CardData {
  image?: {
    url: string;
    alt?: string;
  };
  title?: string;
  description?: string;
  url: string;
  contentType?: 'blogpost' | 'guide' | 'person' | 'live_stream' | 'page' | 'kickstart';
  date?: string;
  youtubeVideoId?: string;
  taxonomies?: string[];
}

Usage

1import { DefaultCard } from '@/components/organisms/DefaultCard';
2
3<DefaultCard 
4  card={{
5    image: { url: "/image.jpg", alt: "Card image" },
6    title: "Card Title",
7    description: "Card description",
8    url: "/card-url",
9    contentType: "blogpost",
10    date: "2024-01-15",
11    taxonomies: ["react", "nextjs"]
12  }}
13  columns={3}
14/>

import { DefaultCard } from '@/components/organisms/DefaultCard';

<DefaultCard 
  card={{
    image: { url: "/image.jpg", alt: "Card image" },
    title: "Card Title",
    description: "Card description",
    url: "/card-url",
    contentType: "blogpost",
    date: "2024-01-15",
    taxonomies: ["react", "nextjs"]
  }}
  columns={3}
/>

Features

Responsive image: Aspect ratio 16/8.4 with hover scale effect
YouTube thumbnails: Automatically uses YouTube thumbnail for live stream cards when youtubeVideoId is provided
Content type badges: Shows "GUIDE", "BLOG", or "LIVE STREAM" with date
Taxonomy tags: Displays taxonomy for blog, guide, live stream, and kickstart. Kickstart uses TechnologyTags with icons; others use styled spans
Kickstart: Technology icons, no description
Play button overlay: Shows play icon for live stream videos
Person icon: Shows person icon overlay for author cards
Hover effects: Image scales on hover, title changes color
Priority loading: Supports priority prop for above-the-fold images (passed through to MediaItem/Next.js Image)

YouTube Thumbnails

For live stream cards (contentType: 'live_stream'), if youtubeVideoId is provided, the component automatically uses the YouTube thumbnail image instead of the regular image field:

Thumbnail URL: https://img.youtube.com/vi/{youtubeVideoId}/hqdefault.jpg
Fallback: Uses regular card.image if youtubeVideoId is not provided

Image Sizes

Image sizes are calculated based on columns:

2 columns: "100vw, lg:50vw"
3 columns: "100vw, lg:33vw"
4 columns: "100vw, lg:25vw"
And so on...

Notes

Uses MediaItem component for images (placeholder icon when no image)
Links to card URL using Next.js Link
Supports CSLP for live preview editing
Taxonomy display via CardTaxonomies molecule