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