---
route: /components/card
menu: Utility Components
---

import { Playground, Props } from 'docz';
import { Card } from './Card.tsx';
import { CardBody } from './CardBody.tsx';
import { Image } from './Image.tsx';
import { Text } from './Text.tsx';
import { MD } from './MD.tsx';
import { Button } from './Button.tsx';

# Card

> This component is not exposed as `mml` string, it is used internally in other mml components and it can be imported to create your custom ones.

Helps display content in a card. Typically used with [`CardHeader`](/components/card-header) and [`CardBody`](/components/card-body).

## Properties

<Props of={Card} />

## Basic usage

<Playground>
  <Card>
    <CardBody>
      <Image src="https://getstream.github.io/mml-react/public/door.jpg" />
      <MD text="**Door**" />
      <Text text="Locks, hinges, screens, stuck..." />
    </CardBody>
    <Button text="Select" />
  </Card>
</Playground>