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

Card Item

Please install everything that's required

Before setup and using this component, please install all the required dependencies from this link (if you have never installed).

1. Setup codes

Create a new 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;

The UI like that

Card Item