Card

import { StepNumber } from "@/components/shared/step-number";
import { Heading, Text } from "@/components/typography";
import { Card } from "@/components/ui/card";

export default function CardExample() {
  return (
    <Card className="flex max-w-sm flex-col gap-3 p-6 md:p-8">
      <StepNumber number={1} active />
      <Heading as="h3" size="title-5" className="mt-3">
        Add a request
      </Heading>
      <Text tone="secondary">
        Create a card on your Trello board for anything from one ad to a full batch.
      </Text>
    </Card>
  );
}

import { Image } from "@/components/media/image";

import { Heading, Text } from "@/components/typography";
import { Card, CardMedia } from "@/components/ui/card";

export default function CardWithMedia() {
  return (
    <Card inset="media" className="w-full max-w-xs">
      <CardMedia className="relative aspect-4/3 bg-surface-secondary">
        <Image src="/images/pricing/plus.webp" alt="" fill sizes="320px" className="object-cover" />
      </CardMedia>
      <div className="flex flex-col gap-2 p-4">
        <Heading as="h3" size="title-5">
          Book a call
        </Heading>
        <Text tone="secondary">20 minutes to see if we fit.</Text>
      </div>
    </Card>
  );
}

import { Image } from "@/components/media/image";

import { MediaFrame, MediaFrameContent } from "@/components/ui/card";

export default function MediaFrameExample() {
  return (
    <MediaFrame className="w-full max-w-md">
      <MediaFrameContent className="relative aspect-16/10">
        <Image src="/images/pricing/pro.webp" alt="" fill sizes="448px" className="object-cover" />
      </MediaFrameContent>
    </MediaFrame>
  );
}