ZippyStarter logo

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

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" />