Profile Card

Cards

About

Founder Profile Card A responsive card component to display founder information, including details, tags, and a collapsible summary section. It's built using shadcn/ui primitives for a consistent and accessible experience.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Profile Card to your project and fits it to your theme.

Code

How Profile Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { FounderProfileCard } from "@/components/ui/profile-card";

const FounderProfileCardDemo = () => {
  const founderTags = [
    "United Kingdom",
    "Energytech",
    "Climate",
    "B2B",
    "SaaS",
  ];

  return (
    <div className="flex min-h-[450px] w-full items-center justify-center bg-background p-4">
      <FounderProfileCard
        avatarSrc="https://cdn.21st.dev/assets/mirror/f0/f02fed36023656a5b5df6f247c83c96c53bfa9db5b98085cdee93ffc938a5f37.jpg"
        avatarFallback="MJ"
        iconSrc="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/512px-2021_Facebook_icon.svg.png"
        description={
          <>
            <b>Matt James</b> who did a PHD in Naming Layers at{" "}
            <b>Facebook</b> just became a <b>Founder</b> at <b>Layers</b>
          </>
        }
        tags={founderTags}
        maxTags={3} // Prop to control how many tags are shown initially
        summaryTitle="Founder summary"
        summaryContent="Layers is a new venture in the energytech sector, focusing on creating sustainable and efficient energy solutions for businesses. Matt's background at Facebook gives him a unique perspective on scaling technology."
      />
    </div>
  );
};

export default FounderProfileCardDemo;