Cardpolymorphic

Card with context styles for Image and Divider components
Import

Usage

Card component is a wrapper around Paper component with context styles for Card.Section component:

Norway
Norway Fjord Adventures
On Sale
With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway
import { Card, Image, Text, Badge, Button, Group } from '@mantine/core';
function Demo() {
return (
<Card shadow="sm" p="lg" radius="md" withBorder>
<Card.Section>
<Image
src="https://images.unsplash.com/photo-1527004013197-933c4bb611b3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=720&q=80"
height={160}
alt="Norway"
/>
</Card.Section>
<Group position="apart" mt="md" mb="xs">
<Text weight={500}>Norway Fjord Adventures</Text>
<Badge color="pink" variant="light">
On Sale
</Badge>
</Group>
<Text size="sm" color="dimmed">
With Fjord Tours you can explore more of the magical fjord landscapes with tours and
activities on and around the fjords of Norway
</Text>
<Button variant="light" color="blue" fullWidth mt="md" radius="md">
Book classic tour now
</Button>
</Card>
);
}

Card.Section

Card.Section is a special component that is used to remove Card padding from its children while other elements still have horizontal spacing. Card.Section works the following way:

  • If component is a first child in Card then it has negative top, left and right margins
  • If it is a last child in Card then it has negative bottom, left and right margins
  • If it is in the middle then only left and right margins will be negative
<Card p="xl">
{/* top, right, left margins are negative – -1 * theme.spacing.xl */}
<Card.Section>First section</Card.Section>
{/* Content that is not inside Card.Section will have theme.spacing.xl spacing on all sides relative to Card */}
<Text>Some other content</Text>
{/* right, left margins are negative – -1 * theme.spacing.xl */}
<Card.Section>Middle section</Card.Section>
{/* bottom, right, left margins are negative – -1 * theme.spacing.xl */}
<Card.Section>Last section</Card.Section>
</Card>

Note that Card relies on mapping direct children and you cannot use fragments or others wrappers for Card.Section:

<Card p="xl">
<div>
<Card.Section>Won't work</Card.Section>
</div>
<>
<Card.Section>Won't work either</Card.Section>
</>
<Card.Section>Works fine</Card.Section>
</Card>

Polymorphic Card.Section

Card.Section is a polymorphic component component, you can change root element:

Norway
Norway Fjord Adventures
On Sale
With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway
import { Card, Image, Text, Badge, Button, Group } from '@mantine/core';
function Demo() {
return (
<Card shadow="sm" p="lg" radius="md" withBorder>
<Card.Section component="a" href="https://mantine.dev/">
<Image
src="https://images.unsplash.com/photo-1527004013197-933c4bb611b3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=720&q=80"
height={160}
alt="Norway"
/>
</Card.Section>
<Group position="apart" mt="md" mb="xs">
<Text weight={500}>Norway Fjord Adventures</Text>
<Badge color="pink" variant="light">
On Sale
</Badge>
</Group>
<Text size="sm" color="dimmed">
With Fjord Tours you can explore more of the magical fjord landscapes with tours and
activities on and around the fjords of Norway
</Text>
<Button variant="light" color="blue" fullWidth mt="md" radius="md">
Book classic tour now
</Button>
</Card>
);
}

withBorder and inheritPadding props

  • withBorder prop will add top and bottom border to Card.Section depending on its position relative to other content and sections
  • inheritPadding prop will add the same left and right padding to Card.Section as set in Card component
Review pictures
200+ images uploaded since last visit, review them to select which one should be added to your gallery
import { Card, Group, Text, Menu, ActionIcon, Image, SimpleGrid } from '@mantine/core';
import { IconDots, IconEye, IconFileZip, IconTrash } from '@tabler/icons';
const images = [
'https://images.unsplash.com/photo-1449824913935-59a10b8d2000?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=250&q=80',
'https://images.unsplash.com/photo-1444723121867-7a241cacace9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=250&q=80',
'https://images.unsplash.com/photo-1444084316824-dc26d6657664?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=250&q=80',
];
function Demo() {
return (
<Card withBorder shadow="sm" radius="md">
<Card.Section withBorder inheritPadding py="xs">
<Group position="apart">
<Text weight={500}>Review pictures</Text>
<Menu withinPortal position="bottom-end" shadow="sm">
<Menu.Target>
<ActionIcon>
<IconDots size={16} />
</ActionIcon>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item icon={<IconFileZip size={14} />}>Download zip</Menu.Item>
<Menu.Item icon={<IconEye size={14} />}>Preview all</Menu.Item>
<Menu.Item icon={<IconTrash size={14} />} color="red">
Delete all
</Menu.Item>
</Menu.Dropdown>
</Menu>
</Group>
</Card.Section>
<Text mt="sm" color="dimmed" size="sm">
<Text component="span" inherit color="blue">
200+ images uploaded
</Text>{' '}
since last visit, review them to select which one should be added to your gallery
</Text>
<Card.Section mt="sm">
<Image src="https://images.unsplash.com/photo-1579263477001-7a703f1974e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" />
</Card.Section>
<Card.Section inheritPadding mt="sm" pb="md">
<SimpleGrid cols={3}>
{images.map((image) => (
<Image src={image} key={image} radius="sm" />
))}
</SimpleGrid>
</Card.Section>
</Card>
);
}

Polymorphic component

Card is a polymorphic component component, you can change root element:

import { Card, Image, Text } from '@mantine/core';
function Demo() {
return (
<Card
shadow="sm"
p="xl"
component="a"
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
target="_blank"
>
<Card.Section>
<Image
src="https://images.unsplash.com/photo-1579227114347-15d08fc37cae?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80"
height={160}
alt="No way!"
/>
</Card.Section>
<Text weight={500} size="lg" mt="md">
You&apos;ve won a million dollars in cash!
</Text>
<Text mt="xs" color="dimmed" size="sm">
Please click anywhere on this card to claim your reward, this is not a fraud, trust us
</Text>
</Card>
);
}
Download more icon variants from https://tabler-icons.io/i/search

Card component props

NameTypeDescription
children *
ReactNode
Card content
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Predefined border-radius value from theme.radius or number for border-radius in px
shadow
MantineShadow
Predefined box-shadow from theme.shadows (xs, sm, md, lg, xl) or any valid css box-shadow property
withBorder
boolean
Adds 1px border with theme.colors.gray[3] color in light color scheme and theme.colors.dark[4] in dark color scheme