Post Card

A flexible, fluid component for linking to blog posts.

The PostCard component is built with container queries, it's font-size will naturally adjust to accommodate any layout, as demonstrated below.

A fabulous Bauhaus-esque image

Dec 29, 2023

page.tsx
import CategoryCard from "@/components/cards/CategoryCard";
 
export default function Page() {
  return (
    <div className="grid gap-4 grid-cols-[repeat(auto-fill,minmax(min(100%,150px),1fr))]">
      <PostCard title="An array of tools" date="2023-12-29" url="/" imageUrl="https://images.unsplash.com/photo-1522832712787-3fbd36c9fe2d" />
      <PostCard title="Interconnected strings" date="2023-12-29" url="/" imageUrl="https://images.unsplash.com/photo-1566443280617-35db331c54fb" />
    </div>
    <div className="grid gap-4 grid-cols-[repeat(auto-fill,minmax(min(100%,300px),1fr))]">
      <PostCard title="An array of tools" date="2023-12-29" url="/" imageUrl="https://images.unsplash.com/photo-1522832712787-3fbd36c9fe2d" />
      <PostCard title="Interconnected strings" date="2023-12-29" url="/" imageUrl="https://images.unsplash.com/photo-1566443280617-35db331c54fb" />
    </div>
    <PostCard title="A fabulous Bauhaus-esque image" date="2023-12-29" url="/" imageUrl="/blog/mdx/bauhaus.webp" />
  );
}