Card

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@mihcm/ui/Card';
 
<Card>
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>You have 3 unread messages.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Check your inbox for the latest updates.</p>
  </CardContent>
</Card>;

import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@mihcm/ui/Card';
import { Button } from '@mihcm/ui/Button';
 
<Card>
  <CardHeader>
    <CardTitle>Delete workspace</CardTitle>
  </CardHeader>
  <CardContent>
    <p className="text-sm text-muted-foreground">
      This action cannot be undone. All data in this workspace will be permanently removed.
    </p>
  </CardContent>
  <CardFooter>
    <Button variant="outline">Cancel</Button>
    <Button variant="destructive">Delete</Button>
  </CardFooter>
</Card>;

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <Card>
    <CardHeader>
      <CardTitle>Employees</CardTitle>
      <CardDescription>142 active</CardDescription>
    </CardHeader>
  </Card>
  <Card>
    <CardHeader>
      <CardTitle>Leave requests</CardTitle>
      <CardDescription>7 pending</CardDescription>
    </CardHeader>
  </Card>
  <Card>
    <CardHeader>
      <CardTitle>Payroll</CardTitle>
      <CardDescription>Processed for May</CardDescription>
    </CardHeader>
  </Card>
</div>

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '@mihcm/ui/Card';
import { Avatar, AvatarImage, AvatarFallback, AvatarStatus } from '@mihcm/ui/Avatar';
import { Badge } from '@mihcm/ui/Badge';
import { Button } from '@mihcm/ui/Button';
 
<Card className="w-full max-w-lg">
  <CardHeader className="flex-row items-start gap-4 space-y-0">
    <Avatar size="xl" className="ring-2 ring-background">
      <AvatarImage src="/people/alex-kim.svg" alt="Alex Kim" />
      <AvatarFallback>AK</AvatarFallback>
      <AvatarStatus status="online" />
    </Avatar>
    <div className="min-w-0 flex-1">
      <div className="flex flex-wrap items-center gap-2">
        <CardTitle>Alex Kim</CardTitle>
        <Badge variant="success">Active</Badge>
      </div>
      <CardDescription>Payroll Lead - People Operations</CardDescription>
    </div>
  </CardHeader>
  <CardContent>{/* token-backed metrics */}</CardContent>
  <CardFooter className="justify-between">
    <Button variant="outline">View profile</Button>
    <Button>Assign task</Button>
  </CardFooter>
</Card>;

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '@mihcm/ui/Card';
import { Avatar, AvatarImage, AvatarFallback } from '@mihcm/ui/Avatar';
import { Badge } from '@mihcm/ui/Badge';
import { Button } from '@mihcm/ui/Button';
import { StatusBadge } from '@mihcm/ui/StatusBadge';
 
<Card className="w-full max-w-2xl">
  <CardHeader>
    <div className="flex flex-wrap items-start justify-between gap-3">
      <div>
        <CardTitle>Manager approval queue</CardTitle>
        <CardDescription>High-priority employee requests that need a decision.</CardDescription>
      </div>
      <StatusBadge tone="warning">3 pending</StatusBadge>
    </div>
  </CardHeader>
  <CardContent className="space-y-3">
    {people.map((person) => (
      <div className="flex flex-col gap-3 rounded-lg border border-border bg-background p-3 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex min-w-0 items-center gap-3">
          <Avatar size="md">
            <AvatarImage src={person.src} alt={person.name} />
            <AvatarFallback>{person.fallback}</AvatarFallback>
          </Avatar>
          <div className="min-w-0">
            <p className="truncate text-sm font-semibold text-foreground">{person.name}</p>
            <p className="truncate text-xs text-muted-foreground">{person.request}</p>
          </div>
        </div>
        <Button variant="outline" size="sm">
          Open
        </Button>
      </div>
    ))}
  </CardContent>
  <CardFooter>
    <Button variant="outline" fullWidth>
      Review all approvals
    </Button>
  </CardFooter>
</Card>;

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '@mihcm/ui/Card';
import { Avatar, AvatarImage, AvatarFallback } from '@mihcm/ui/Avatar';
import { AvatarGroup } from '@mihcm/ui/AvatarGroup';
import { Button } from '@mihcm/ui/Button';
 
<Card className="w-full max-w-2xl overflow-hidden">
  <CardHeader className="border-b border-border bg-muted">
    <div className="flex flex-wrap items-start justify-between gap-4">
      <div>
        <CardTitle>Payroll readiness squad</CardTitle>
        <CardDescription>Cross-functional team preparing this month's payroll run.</CardDescription>
      </div>
      <AvatarGroup max={4} size="sm">
        {/* profile avatars */}
      </AvatarGroup>
    </div>
  </CardHeader>
  <CardContent className="grid gap-4 py-5 md:grid-cols-3">
    {/* metric tiles with semantic tokens */}
  </CardContent>
  <CardFooter className="flex-col items-stretch gap-3 sm:flex-row sm:items-center sm:justify-between">
    <p className="text-sm text-muted-foreground">Final audit checklist is 82% complete.</p>
    <Button>Open checklist</Button>
  </CardFooter>
</Card>;