Jan 15, 2026
Design Systems, Trends
The Future of Design Systems in 2026
Exploring emerging trends in design systems, from AI-assisted theming to cross-platform consistency.
Read more
Blog Card
Blog post card with two layouts: a full desktop card and a compact mobile tile. Used by BlogGrid on both the /blog page and blog-related sections.
Card layout (desktop)
Tile layout (mobile)
Two-up grid
Jan 15, 2026
Design Systems, Trends
The Future of Design Systems in 2026
Exploring emerging trends in design systems, from AI-assisted theming to cross-platform consistency.
Read more
Jan 10, 2026
Accessibility, Development
Building Accessible Components from Scratch
A deep dive into creating WCAG-compliant UI components with proper keyboard navigation and screen reader support.
Read more
Props
| Prop | Type | Default | Description |
|---|---|---|---|
post* | BlogPost | - | Blog post data (matches the Sanity blogPost type). |
layout | "card" | "tile" | "card" | "card" renders the full desktop card with large image; "tile" is the compact mobile layout with a square thumbnail. |
index | number | 0 | Position in the list — drives the staggered fade-in delay (index * 0.1s for card, index * 0.08s for tile). |
className | string | - | Additional classes merged onto the outer article. Used to set column width in grids. |
Import
tsx
import { BlogCard } from '@/components/ui/BlogCard'Usage
tsx
{/* Desktop grid */}
<BlogCard post={post} index={index} />
{/* Mobile tiles */}
<BlogCard post={post} layout="tile" index={index} />