---
description: 'Card component.'
labels: ['mui', 'react', 'card']
---

import Card from './Card'
import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography'

## Basic Card component

Basic example that renders an card

### Component usage

```js
<Card color='danger'>
  <Typography>
    {
      'Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information.'
    }
  </Typography>
</Card>
```

### Use this live example to interact with Card component

Live example:

```js live
<Card color='danger'>
  <Typography>
    {
      'Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information.'
    }
  </Typography>
</Card>
```
