Illustrated journal

Editorial article grid with line illustrations.

Usage

import { Cards02 } from '@/components/blocks/cards-02'


<Cards02 />


// Swap in your own content
<Cards02
  title="Latest stories"
  description="Ideas and lessons from the team."
  actionLabel="Read the blog"
  actionHref="/blog"
  items={[
    { title: 'Writing docs people actually read', day: '12', month: "Oct '26", author: 'Noemi Barros', href: '/blog/docs' },
    { title: 'Shipping calmly across time zones', day: '28', month: "Sep '26", author: 'Ilya Sorensen', href: '/blog/time-zones' },
    { title: 'A week-one plan for new hires.', day: '3', month: "Sep '26", author: 'Noemi Barros', href: '/blog/week-one', tone: 'paper' },
  ]}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/cards-02

npx shadcn@latest add @pastaui-pro/cards-02

yarn dlx shadcn@latest add @pastaui-pro/cards-02

bunx --bun shadcn@latest add @pastaui-pro/cards-02

Source

Props

Illustrated journal props
Prop	Type	Default	Description
title	ReactNode	= 'From the journal'	Section heading.
description	string	= 'Field notes on building calmer, better-run teams.'	Supporting line under the heading; pass an empty string to hide it.
actionLabel / actionHref	string	= 'All articles' / '#'	Outlined pill beside the heading; pass an empty label to hide it.
items	Card02Item[]	= Three sample articles	Each card: title, day, month, and optional author, href, and tone. Illustrations follow card position (laptop chart, launching supplies, paged building) and repeat after three.
items[].tone	'tint' \| 'stone' \| 'paper'	= By position	Card color: soft blue tint, neutral stone, or paper; defaults cycle in that order.
className	string	= —	Additional classes for the section.