v1.3.1
⌘K
Source codeDiscussReport issue

Card

Display card with context styles for Image and Divider components
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

Usage

Card component is a wrapper around Paper component with context styles for Image and Divider components. Combine Card component with other Mantine components to create product cards:

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 React from 'react';
import { Card, Image, Text, Badge, Button, Group, useMantineTheme } from '@mantine/core';


function Demo() {
  const theme = useMantineTheme();


  const secondaryColor = theme.colorScheme === 'dark'
    ? theme.colors.dark[1]
    : theme.colors.gray[7];


  return (
    <div style={{ width: 340, margin: 'auto' }}>
      <Card shadow="sm">
        <Image
          src="https://images.unsplash.com/long-image-url.jpg"
          height={160}
          alt="Norway"
        />


        <Group position="apart" style={{ marginBottom: 5 }}>
          <Text weight={500}>Norway Fjord Adventures</Text>
          <Badge color="pink" variant="light">
            On Sale
          </Badge>
        </Group>


        <Text size="sm" style={{ color: secondaryColor }}>
          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 style={{ marginTop: 10 }}>
          Book classic tour now
        </Button>
      </Card>
    </div>
  );
}

Link overlay

Use Overlay component with 0 opacity to create link overlay. Note that, card context styles (negative margins and border-radius) rely on :fist-child and :last-child, if you need preserve them, do not put overlay as first or last element.

Norway
You've won million dollars in cash
Please click anywhere on this card to claim your reward, this is not fraud, trust us
import React from 'react';
import { Card, Image, Text, Overlay } from '@mantine/core';


function Demo() {
  return (
    <div style={{ width: 340, margin: 'auto' }}>
      <Card shadow="sm">
        <Image
          src="https://images.unsplash.com/long-image-url.jpg"
          height={160}
          alt="Noway"
        />


        <Text weight={500} size="lg">
          You&apos;ve won million dollars in cash
        </Text>


        <Text style={{ marginTop: 10 }} size="sm">
          Please click anywhere on this card to claim your reward, this is not a fraud, trust us
        </Text>


        <Overlay
          opacity={0}
          component="a"
          href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
          target="_blank"
        />
      </Card>
    </div>
  );
}

Get element ref

You can get root element ref by setting elementRef prop:

import React, { useRef } from 'react';
import { Card } from '@mantine/core';


function Demo() {
  const ref = useRef();
  return <Card elementRef={ref} />;
}