# Blog cards
> Four ways to present a post — editorial cover, compact list, featured series and author-led quote — each with its own motion moment, from layered parallax to a gliding row highlight.
- Collection: Examples
- Tier: free
- Docs: https://geturui.com/docs/blog-cards
- Install: `npx shadcn@latest add @geturui/blog-cards`
- Dependencies: motion, lucide-react
## Variants
### Editorial
Cover card with a drawn type specimen whose layers drift under the pointer, plus category, excerpt and byline.
Install: `npx shadcn@latest add @geturui/blog-cards-editorial`
```tsx
import { EditorialBlogCard } from "@/components/examples/blog-cards/editorial";
export function Story() {
return ;
}
```
| Prop | Type | Default | Description |
|---|---|---|---|
| category / title / excerpt | `string` | — | Post content. |
| author / monogram | `string` | — | Byline and avatar initials (derived from author when omitted). |
| date | `string` | "2026-09-28" | ISO date, formatted as Sep 28, 2026. |
| readingMinutes | `number` | 8 | Reading time in minutes. |
| issue | `string` | "Issue 14" | Label printed on the cover. |
| href / onOpen | `string / () => void` | — | Destination and click handler for the card. |
| className | `string` | — | Extra classes on the root element. |
### Compact list
List of posts with reading-progress rings, a highlight that glides between rows and arrow-key navigation.
Install: `npx shadcn@latest add @geturui/blog-cards-compact-list`
```tsx
import { CompactBlogList } from "@/components/examples/blog-cards/compact-list";
export function Sidebar({ posts }) {
return ;
}
```
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | `string` | "Latest from the journal" | Title above the list. |
| posts | `CompactPost[]` | — | { id, title, category, date, readingMinutes, progress?, href? } per row. |
| allHref | `string` | "#" | Link for View all. |
| onSelect | `(post: CompactPost) => void` | — | Called when a row is opened. |
| className | `string` | — | Extra classes on the root element. |
### Featured series
Split card for a multi-part series: step through parts while the art and copy crossfade in the direction of travel.
Install: `npx shadcn@latest add @geturui/blog-cards-featured-split`
```tsx
import { FeaturedBlogCard } from "@/components/examples/blog-cards/featured-split";
export function Series() {
return router.push(part.href)} />;
}
```
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow / series | `string` | — | Labels above the part title. |
| parts | `SeriesPart[]` | — | { title, excerpt, readingMinutes, href? } per part. |
| defaultIndex | `number` | 1 | Part shown first. |
| onRead | `(part: SeriesPart, index: number) => void` | — | Called by the Read button. |
| className | `string` | — | Extra classes on the root element. |
### Author-led
Byline-first card with a pull quote, a bookmark that pops and ticks its count, and a copy-link action.
Install: `npx shadcn@latest add @geturui/blog-cards-author`
```tsx
import { AuthorBlogCard } from "@/components/examples/blog-cards/author";
export function Pick() {
return save(s)} />;
}
```
| Prop | Type | Default | Description |
|---|---|---|---|
| author / role / monogram | `string` | — | Byline shown first. |
| title / quote | `string` | — | Post title and the pulled line. |
| date / readingMinutes | `string / number` | — | ISO date and reading time. |
| href / shareUrl | `string` | — | Post link and the URL copied by Copy link. |
| saves | `number` | 214 | Bookmark count from other readers. |
| saved / defaultSaved / onSavedChange | `boolean / (saved: boolean) => void` | — | Controlled or initial bookmark state. |
| className | `string` | — | Extra classes on the root element. |
## Accessibility
- Cards are real links or contain one clear link, with a visible focus ring; drawn covers are hidden from assistive tech.
- Toggles such as bookmark use aria-pressed, counts update in place and a status message confirms copied links.
- Parallax, gliding highlights and directional slides fall back to fades with reduced motion.
## Source
### components/examples/blog-cards/editorial.tsx
```tsx
"use client";
import * as React from "react";
import { motion, useMotionValue, useReducedMotion, useSpring, useTransform, type MotionValue } from "motion/react";
import { ArrowUpRight, Clock } from "lucide-react";
import { cn } from "@/lib/utils";
export interface EditorialBlogCardProps {
category?: string;
title?: string;
excerpt?: string;
author?: string;
/** Initials for the author avatar; derived from `author` when omitted. */
monogram?: string;
/** ISO date (YYYY-MM-DD), shown as "Oct 2, 2026". */
date?: string;
readingMinutes?: number;
/** Short label printed on the cover, e.g. an issue number. */
issue?: string;
href?: string;
onOpen?: () => void;
className?: string;
}
const initialsOf = (name: string) =>
name
.split(/\s+/)
.map((p) => p[0])
.filter(Boolean)
.slice(0, 2)
.join("")
.toUpperCase();
const formatPostDate = (iso: string) =>
new Date(`${iso}T12:00:00Z`).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" });
function useDepth(source: MotionValue, depth: number) {
return useTransform(source, (v) => v * depth);
}
/** Editorial cover card: a drawn type-specimen cover that drifts in layers under the pointer, with category, title, excerpt and byline. */
export function EditorialBlogCard({
category = "Typography",
title = "The quiet return of serif type in product interfaces",
excerpt = "Teams are trading neutral grotesques for warmer serifs in headings. We looked at 40 launches this year to see where it works and where it gets in the way.",
author = "Iris Calder",
monogram,
date = "2026-09-28",
readingMinutes = 8,
issue = "Issue 14",
href = "#",
onOpen,
className,
}: EditorialBlogCardProps) {
const reduce = useReducedMotion() ?? false;
const px = useMotionValue(0);
const py = useMotionValue(0);
const sx = useSpring(px, { stiffness: 150, damping: 20 });
const sy = useSpring(py, { stiffness: 150, damping: 20 });
const backX = useDepth(sx, -8);
const backY = useDepth(sy, -6);
const midX = useDepth(sx, 10);
const midY = useDepth(sy, 8);
const frontX = useDepth(sx, 22);
const frontY = useDepth(sy, 16);
function onMove(e: React.PointerEvent) {
if (reduce || e.pointerType !== "mouse") return;
const r = e.currentTarget.getBoundingClientRect();
px.set((e.clientX - r.left) / r.width - 0.5);
py.set((e.clientY - r.top) / r.height - 0.5);
}
function onLeave() {
px.set(0);
py.set(0);
}
return (
{[100, 86, 92, 64].map((w, i) => (
))}
Aa
{issue}
{category}
{title}
{excerpt}
{monogram ?? initialsOf(author)}
{author}
{readingMinutes} min read
);
}
```
### components/examples/blog-cards/compact-list.tsx
```tsx
"use client";
import * as React from "react";
import { motion, useReducedMotion } from "motion/react";
import { ArrowRight, Check } from "lucide-react";
import { cn } from "@/lib/utils";
export interface CompactPost {
id: string;
title: string;
category: string;
/** ISO date (YYYY-MM-DD). */
date: string;
readingMinutes: number;
/** How much the reader has read, 0 to 1. */
progress?: number;
href?: string;
}
export interface CompactBlogListProps {
heading?: string;
posts?: CompactPost[];
/** Link for the "View all" action. */
allHref?: string;
onSelect?: (post: CompactPost) => void;
className?: string;
}
const DEFAULT_POSTS: CompactPost[] = [
{ id: "p1", title: "Designing empty states people actually read", category: "Product", date: "2026-09-30", readingMinutes: 6, progress: 1 },
{ id: "p2", title: "A practical guide to spring easing in CSS", category: "Motion", date: "2026-09-26", readingMinutes: 9, progress: 0.45 },
{ id: "p3", title: "What we learned shipping dark mode first", category: "Engineering", date: "2026-09-19", readingMinutes: 7, progress: 0 },
{ id: "p4", title: "Tokens, not themes: naming color for scale", category: "Design systems", date: "2026-09-12", readingMinutes: 11, progress: 0.2 },
];
const shortDate = (iso: string) => new Date(`${iso}T12:00:00Z`).toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: "UTC" });
function ProgressRing({ value, reduce }: { value: number; reduce: boolean }) {
const done = value >= 1;
return (
{done ? (
) : value === 0 ? null : (
{Math.round(value * 100)}
)}
{done ? "Finished" : value > 0 ? `${Math.round(value * 100)}% read` : "Not started"}
);
}
/** Compact list of posts with reading-progress rings, a highlight that glides between rows and arrow-key navigation. */
export function CompactBlogList({ heading = "Latest from the journal", posts = DEFAULT_POSTS, allHref = "#", onSelect, className }: CompactBlogListProps) {
const reduce = useReducedMotion() ?? false;
const id = React.useId();
const [active, setActive] = React.useState(null);
const links = React.useRef<(HTMLAnchorElement | null)[]>([]);
function onKeyDown(e: React.KeyboardEvent) {
const current = links.current.findIndex((el) => el === document.activeElement);
if (current < 0) return;
const next =
e.key === "ArrowDown" ? Math.min(posts.length - 1, current + 1) : e.key === "ArrowUp" ? Math.max(0, current - 1) : e.key === "Home" ? 0 : e.key === "End" ? posts.length - 1 : null;
if (next === null) return;
e.preventDefault();
links.current[next]?.focus();
}
return (