Card

Simple interactive card component. Zero dependencies.

Example Card ->

This is an example of the Card component.

Installation

1. Copy the React component into your project:

tsx
import { type JSX } from "react";

import { isSafeHref } from "./is-safe-href";

export function Card({
  className,
  title,
  children,
  href,
}: {
  className?: string;
  title: string;
  children: React.ReactNode;
  href: string;
}): JSX.Element {
  const safeHref = isSafeHref(href) ? href : "#";

  return (
    <a
      className={className}
      href={`${safeHref}?utm_source=create-turbo&utm_medium=basic&utm_campaign=create-turbo`}
      rel="noopener noreferrer"
      target="_blank"
    >
      <h2>
        {title} <span>-&gt;</span>
      </h2>
      <p>{children}</p>
    </a>
  );
}

Usage

tsx
import { Card } from '@/components/ui/card';

export default function MyComponent() {
  return (
    <Card title="Click Me" href="/about">
      Learn more about us here.
    </Card>
  );
}