Card

import { useState } from "react";
import { Button, Card, Text, Toggle, VStack, ViewFrame } from "@/ohmygui";

export default function Example() {
  const [fill, setFill] = useState(true);

  return (
    <VStack gap="sm" align="stretch">
      <Toggle label="Fill available height" checked={fill} onChange={(event) => setFill(event.currentTarget.checked)} />
      <ViewFrame height={240}>
        <Card as="article" fill={fill} appearance="outlined" tone="paper" padding="md"
          header={<Text as="h3" variant="title">Design review</Text>}
          footer={<Button variant="outline">Open notes</Button>}
        >
          <Text color="muted">Header, body, and footer share one surface contract.</Text>
        </Card>
      </ViewFrame>
    </VStack>
  );
}