Category card

A flexible and fluid component for displaying blog categories.

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

This is a title

200 posts

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%,300px),1fr))]">
     <CategoryCard count={200} url="/" title="This is a title" />
     <CategoryCard count={20} url="/" title="This is a longer title" />
    </div>
  );
}