Mantine Card (#34113)

frontend/src/metabase/ui/components/data-display/Card/Card.stories.mdx

+import { Fragment } from "react";
+import { Canvas, Story, Meta } from "@storybook/addon-docs";
+import { Box, Card, Stack, Text } from "metabase/ui";
+
+export const args = {
+  p: "md",
+  radius: "md",
+  withBorder: false,
+};
+
+export const sampleArgs = {
+  title: "Peace",
+  description:
+    "The elm tree planted by Eleanor Bold, the judge’s daughter, fell last night.",
+};
+
+export const argTypes = {
+  p: {
+    options: ["xs", "sm", "md", "lg", "xl"],
+    control: { type: "inline-radio" },
+  },
+  radius: {
+    options: ["xs", "sm", "md"],
+    control: { type: "inline-radio" },
+  },
+  withBorder: {
+    control: { type: "boolean" },
+  },
+};
+
+<Meta
+  title="Data display/Card"
+  component={Card}
+  args={args}
+  argTypes={argTypes}
+/>
+
+# Card
+
+Our themed wrapper around [Mantine Card](https://mantine.dev/core/card/).
+
+## Docs
+
+- [Mantine Card Docs](https://mantine.dev/core/card/)
+
+## Examples
+
+export const DefaultTemplate = args => (
+  <Box maw="20rem">
+    <Card {...args}>
+      <Stack spacing="sm">
+        <Text fw="bold">{sampleArgs.title}</Text>
+        <Text>{sampleArgs.description}</Text>
+      </Stack>
+    </Card>
+  </Box>
+);
+
+export const CardSectionTemplate = ({ withSectionBorder, ...args }) => (
+  <Box maw="20rem">
+    <Card {...args}>
+      <Card.Section withBorder={withSectionBorder}>
+        <Box bg="bg" h="10rem" />
+      </Card.Section>
+      <Stack mt="md" spacing="sm">
+        <Text fw="bold">{sampleArgs.title}</Text>
+        <Text>{sampleArgs.description}</Text>
+      </Stack>
+    </Card>
+  </Box>
+);
+
+export const CardSectionBorderTemplate = args => (
+  <CardSectionTemplate {...args} withSectionBorder />
+);
+
+export const Default = DefaultTemplate.bind({});
+
+<Canvas>
+  <Story name="Default">{Default}</Story>
+</Canvas>
+
+### Card border
+
+export const Border = DefaultTemplate.bind({});
+Border.args = {
+  withBorder: true,
+};
+
+<Canvas>
+  <Story name="Border">{Border}</Story>
+</Canvas>
+
+### Card.Section
+
+export const CardSection = CardSectionTemplate.bind({});
+
+<Canvas>
+  <Story name="Card section">{CardSection}</Story>
+</Canvas>
+
+### Card.Section border
+
+export const CardSectionBorder = CardSectionBorderTemplate.bind({});
+
+<Canvas>
+  <Story name="Card section, border">{CardSectionBorder}</Story>
+</Canvas>

frontend/src/metabase/ui/components/data-display/Card/Card.styled.tsx

+import type { MantineTheme, MantineThemeOverride } from "@mantine/core";
+
+export const getCardOverrides = (): MantineThemeOverride["components"] => ({
+  Card: {
+    styles: (theme: MantineTheme) => {
+      return {
+        cardSection: {
+          borderTopColor: theme.colors.border[0],
+          borderBottomColor: theme.colors.border[0],
+
+          "&[data-first]": {
+            borderBottomColor: theme.colors.border[0],
+          },
+        },
+      };
+    },
+  },
+});

frontend/src/metabase/ui/components/data-display/Card/index.ts

+export { Card } from "@mantine/core";
+export type { CardProps } from "@mantine/core";
+export { getCardOverrides } from "./Card.styled";

frontend/src/metabase/ui/components/data-display/index.ts

 export * from "./Accordion";
+export * from "./Card";

frontend/src/metabase/ui/theme.ts

@@ -5,6 +5,7 @@ import {
   getAccordionOverrides,
   getAnchorOverrides,
   getButtonOverrides,
+  getCardOverrides,
   getCheckboxOverrides,
   getInputOverrides,
   getMenuOverrides,
@@ -102,6 +103,7 @@ export const getThemeOverrides = (): MantineThemeOverride => ({
     ...getAccordionOverrides(),
     ...getAnchorOverrides(),
     ...getButtonOverrides(),
+    ...getCardOverrides(),
     ...getCheckboxOverrides(),
     ...getInputOverrides(),
     ...getMenuOverrides(),