A card with header, content and footer, and a small one

// apps/docs/examples/ui/card.tsx'use client';
import {useState} from 'react';
import {Button} from '@workspace/active-ui/components/primitives/button';import {  Card,  CardAction,  CardContent,  CardDescription,  CardFooter,  CardHeader,  CardTitle,} from '@workspace/active-ui/components/primitives/card';
/** * A surface that groups one subject: a header with a title, a description * and an action in its corner, content, and a footer with the actions on * the whole card. The small size suits a grid of many cards. */export default function CardExample() {  const [following, setFollowing] = useState(false);  return (    <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-[3fr_2fr]">      <Card>        <CardHeader>          <CardTitle>Pension scheme 2026</CardTitle>          <CardDescription>Defined contribution, since 2019</CardDescription>          <CardAction>            <Button              variant="outline"              size="sm"              aria-pressed={following}              onClick={() => setFollowing(!following)}            >              {following ? 'Following' : 'Follow'}            </Button>          </CardAction>        </CardHeader>        <CardContent>          <p className="text-sm">            214 participants, of whom 198 active. The next statement goes out on            1 November.          </p>        </CardContent>        <CardFooter className="gap-2">          <Button>Open the scheme</Button>          <Button variant="ghost">Download the rules</Button>        </CardFooter>      </Card>      <Card size="sm">        <CardHeader>          <CardTitle>Contributions</CardTitle>          <CardDescription>October 2026</CardDescription>        </CardHeader>        <CardContent>          <p className="text-2xl font-semibold tabular-nums">98.4%</p>          <p className="text-muted-foreground text-sm">collected on time</p>        </CardContent>      </Card>    </div>  );}