ZippyStarter logo

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.

An array of tools

Dec 29, 2023

Interconnected strings

Dec 29, 2023

An array of tools

Dec 29, 2023

Interconnected strings

Dec 29, 2023

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" />
  );
}