Card Heading

Enhance your card designs with a sleek and customizable CardHeading component. Perfect for React and Next.js applications, this component helps you create responsive and visually appealing titles inside cards using Tailwind CSS. Learn how to implement reusable card headings that seamlessly fit your design system.

Card Heading preview

1. Setup codes

Before setup please setup the cn function in my docs.

Create a new Card component components/ui/typography/CardHeading.tsx

jsx
import React from "react";

import { cn } from "@/utils/cn";

const CardHeading = ({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) => {
  return <h3 className={cn("text-xl font-semibold text-gray-900", className)}>{children}</h3>;
};

export default CardHeading;

2. Usages

Now we can use CardHeading component in Card component.

jsx
import CardHeading from "./typography/CardHeading";

const Card = ({
  title,
}: {
  title: string;
}) => {
  return (
    <div className="overflow-hidden rounded-lg bg-white shadow-sm">
      <div className="px-4 py-5 sm:p-6">
        <CardHeading className="mb-2">{title}</CardHeading>
      </div>
    </div>
  );
};

export default Card;