<!-- @dsCard group="Components / Data display" viewport="800x400" name="Card" subtitle="The default container for any self-contained block of content or settings." -->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Card</title>
<link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../_card/card.css">
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
<script src="https://unpkg.com/lucide@0.544.0/dist/umd/lucide.min.js"></script>
<script src="../../_ds_bundle.js"></script>
<script src="../_card/card.js"></script>
</head><body>
<header class="ch"><h1>Card</h1><p>The default container for any self-contained block of content or settings.</p></header>
<div id="root"></div>
<ul class="notes">
<li><code>CardAction</code> lives inside <code>CardHeader</code> and spans both title rows — never float a button yourself.</li>
<li>Use <code>CardFrame</code> when the title belongs to the plinth and the content is a distinct inner slab.</li>
<li>Cards side by side fill the row height, so put the footer in <code>CardFooter</code> and the stacks align.</li>
<li>No coloured left border, no gradient — Reckon cards are white on white, separated by the hairline alone.</li>
</ul>
<script type="text/babel">
const {Card, CardHeader, CardTitle, CardDescription, CardAction, CardPanel, CardFooter, CardFrame, CardFrameHeader, CardFrameTitle, CardFrameDescription, Button} = window.OriginDesignSystem_7c998b;
const {Ic, mount} = window.OriginCard;
function Demo(){return (<>
  <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16,alignItems:"start"}}>
    <Card>
      <CardHeader><CardTitle>30 min meeting</CardTitle><CardDescription>cal.com/rick/30min</CardDescription>
        <CardAction><Button variant="ghost" size="icon-sm" aria-label="More"><Ic n="ellipsis" /></Button></CardAction></CardHeader>
      <CardFooter style={{gap:8}}><Button variant="outline" size="sm">Preview</Button><Button size="sm">Copy link</Button></CardFooter>
    </Card>
    <CardFrame>
      <CardFrameHeader><CardFrameTitle>Buttons</CardFrameTitle><CardFrameDescription>Seven variants, ten sizes.</CardFrameDescription></CardFrameHeader>
      <Card style={{minHeight:96,alignItems:"center",justifyContent:"center"}}><Button>Get started</Button></Card>
    </CardFrame>
  </div>
</>)}
mount(<Demo />);
</script>
</body></html>