Card

import { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@bindshq/stance-react';

export function Basic() {
  return (
    <Card style={{ maxWidth: 380 }}>
      <CardHeader
        actions={
          <Badge tone="success" dot>
            Live
          </Badge>
        }
      >
        <CardTitle>Exchange relay</CardTitle>
        <CardDescription>Deploys signatures to Microsoft 365 mailboxes.</CardDescription>
      </CardHeader>
      <CardContent>Last sync 4 minutes ago · 312 mailboxes</CardContent>
      <CardFooter>
        <Button variant="ghost" size="sm">
          View logs
        </Button>
        <Button size="sm">Sync now</Button>
      </CardFooter>
    </Card>
  );
}

import { Card, CardDescription, CardTitle } from '@bindshq/stance-react';

export function Variants() {
  return (
    <div
      style={{
        display: 'grid',
        gap: 16,
        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
        width: '100%',
      }}
    >
      {(['outline', 'elevated', 'filled'] as const).map((v) => (
        <Card key={v} variant={v}>
          <CardTitle>{v[0]!.toUpperCase() + v.slice(1)}</CardTitle>
          <CardDescription>3 contracts awaiting review</CardDescription>
        </Card>
      ))}
    </div>
  );
}

import { Button, Card, CardDescription, CardHeader, CardLink, CardTitle, Icon } from '@bindshq/stance-react';

export function Interactive() {
  return (
    <Card interactive style={{ maxWidth: 380 }}>
      <CardHeader
        actions={
          <Button size="xs" variant="ghost" aria-label="Duplicate Executive template">
            <Icon name="copy" />
          </Button>
        }
      >
        <CardTitle>
          <CardLink href="#executive">Executive</CardLink>
        </CardTitle>
        <CardDescription>Used by 6 people · edited last week</CardDescription>
      </CardHeader>
    </Card>
  );
}

import { Badge, Button, Card, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle } from '@bindshq/stance-react';

export function WithMedia() {
  return (
    <Card style={{ maxWidth: 340 }}>
      <CardMedia ratio="16 / 7" aria-hidden="true">
        <svg viewBox="0 0 320 140" preserveAspectRatio="xMidYMid slice">
          <rect width="320" height="140" fill="currentColor" opacity="0.06" />
          <rect x="24" y="36" width="120" height="10" rx="5" fill="currentColor" opacity="0.5" />
          <rect x="24" y="56" width="180" height="8" rx="4" fill="currentColor" opacity="0.25" />
          <rect x="24" y="72" width="150" height="8" rx="4" fill="currentColor" opacity="0.25" />
        </svg>
      </CardMedia>
      <CardHeader>
        <CardTitle>Minimal</CardTitle>
        <CardDescription>A clean, single-column signature layout.</CardDescription>
      </CardHeader>
      <CardFooter align="between">
        <Badge>Gallery</Badge>
        <Button size="sm" variant="outline">
          Use template
        </Button>
      </CardFooter>
    </Card>
  );
}