Blog Card

Blog post cards in three layout styles — classic (image top), minimal (text only), and horizontal (side-by-side image).

Classic

Vertical card with image, category badge, date, title, and excerpt. Best for image-heavy blog grids.

Design

Mar 15, 2026

Getting Started with Design Tokens

Learn how semantic color tokens make your design system scalable.

API Reference

Prop	Type
title	string
excerpt	string
category	string
date	string
image	string
href	string

Basic Usage

import { BlogCard } from "@/extensions/features/blog";

<BlogCard
  title="Post title"
  excerpt="Brief description"
  category="Design"
  date="Mar 15, 2026"
  image="/photo.jpg"
  href="/blog/post"
/>

Source

src/features/features/blog/BlogCard.tsx

import {
  Card,
  CardActionArea,
  CardImage,
  CardContent,
  Badge,
  Heading,
  Image,
  Text,
} from "@/ui";

interface BlogCardProps {
  title: string;
  excerpt: string;
  category: string;
  date: string;
  image: string;
  href: string;
}

export function BlogCard({
  title,
  excerpt,
  category,
  date,
  image,
  href,
}: BlogCardProps) {
  return (
    <Card variant="outlined">
      <CardActionArea href={href}>
        <CardImage>
          <Image
            src={image}
            alt={title}
            width={600}
            height={340}
            className="aspect-video w-full object-cover transition-transform duration-300 group-hover:scale-105"
          />
        </CardImage>
        <CardContent>
          <div className="mb-3 flex items-center gap-3">
            <Badge variant="ghost" color="primary" size="sm">
              {category}
            </Badge>
            <Text size="xs" color="root-contrast" subtle>
              {date}
            </Text>
          </div>
          <Heading size="xs" className="mb-1">
            {title}
          </Heading>
          <Text size="sm" color="root-contrast" subtle>
            {excerpt}
          </Text>
        </CardContent>
      </CardActionArea>
    </Card>
  );
}

Minimal

Text-only card with no image. Ghost background with solid badge. Best for text-focused feeds or sidebar lists.

Engineering

Why Semantic Tokens Matter

A deep dive into building color systems that scale across themes and brands.

Apr 2, 2026

API Reference

Prop	Type
title	string
excerpt	string
category	string
date	string
href	string

Basic Usage

import { BlogCardMinimal } from "@/extensions/features/blog";

<BlogCardMinimal
  title="Post title"
  excerpt="Brief description"
  category="Design"
  date="Mar 15, 2026"
  href="/blog/post"
/>

Source

src/features/features/blog/BlogCardMinimal.tsx

import { Card, CardActionArea, CardContent, Badge, Heading, Text } from "@/ui";

interface BlogCardMinimalProps {
  title: string;
  excerpt: string;
  category: string;
  date: string;
  href: string;
}

export function BlogCardMinimal({
  title,
  excerpt,
  category,
  date,
  href,
}: BlogCardMinimalProps) {
  return (
    <Card variant="ghost" color="root-100">
      <CardActionArea href={href}>
        <CardContent padding="lg">
          <Badge variant="solid" color="primary" size="sm" className="mb-4">
            {category}
          </Badge>
          <Heading size="sm" className="mb-2">
            {title}
          </Heading>
          <Text size="sm" color="root-contrast" subtle className="mb-4">
            {excerpt}
          </Text>
          <Text size="xs" color="root-contrast" subtle>
            {date}
          </Text>
        </CardContent>
      </CardActionArea>
    </Card>
  );
}

Horizontal

Side-by-side layout with image on the left and text on the right. Best for list views, search results, or featured post rows.

Guides

Mar 28, 2026

Tailwind v4 Migration Guide

Everything you need to know about moving from config files to CSS-first theming.

API Reference

Prop	Type
title	string
excerpt	string
category	string
date	string
image	string
href	string

Basic Usage

import { BlogCardHorizontal } from "@/extensions/features/blog";

<BlogCardHorizontal
  title="Post title"
  excerpt="Brief description"
  category="Design"
  date="Mar 15, 2026"
  image="/photo.jpg"
  href="/blog/post"
/>

Source

src/features/features/blog/BlogCardHorizontal.tsx

import {
  Card,
  CardActionArea,
  CardImage,
  CardContent,
  Badge,
  Heading,
  Image,
  Text,
} from "@/ui";

interface BlogCardHorizontalProps {
  title: string;
  excerpt: string;
  category: string;
  date: string;
  image: string;
  href: string;
}

export function BlogCardHorizontal({
  title,
  excerpt,
  category,
  date,
  image,
  href,
}: BlogCardHorizontalProps) {
  return (
    <Card variant="outlined">
      <CardActionArea href={href}>
        <div className="grid grid-cols-3">
          <CardImage className="col-span-1">
            <Image
              src={image}
              alt={title}
              width={400}
              height={400}
              className="h-full w-full object-cover"
              sizes="(min-width: 640px) 200px, 33vw"
            />
          </CardImage>
          <CardContent className="col-span-2 flex flex-col justify-center">
            <div className="mb-3 flex items-center gap-3">
              <Badge variant="minimal" color="primary" size="sm">
                {category}
              </Badge>
              <Text size="xs" color="root-contrast" subtle>
                {date}
              </Text>
            </div>
            <Heading size="xs" className="mb-1">
              {title}
            </Heading>
            <Text size="sm" color="root-contrast" subtle>
              {excerpt}
            </Text>
          </CardContent>
        </div>
      </CardActionArea>
    </Card>
  );
}