# Install

```shell
npm i @mate-react/card
```

# Import

```tsx
import { MateCard } from '@mate-react/card';
```

# Variants

## No media

```tsx
<MateCard>
  <div slot="title">Title</div>
  <div slot="subtitle">Subtitle</div>
  <span slot="header-suffix" theme="badge">Information</span>
  <div>Text content</div>
</MateCard>
```

## Horizontal

```tsx
<MateCard theme="horizontal">
  <div slot="title">Title</div>
  <div slot="subtitle">Subtitle</div>
  <div>Text content</div>
</MateCard>
```

## Cover media

```tsx
<MateCard theme="cover-media">
  <div slot="media" style={{ height: '150px', background: '#ddd' }} />
  <div slot="title">Title</div>
  <div slot="subtitle">Subtitle</div>
  <div>Text content</div>
</MateCard>
```

## With Footer Buttons

```tsx
<MateCard>
  <div slot="header"><h2>Card Title</h2></div>
  Card body content.
  <MateButton slot="footer">Button 1</MateButton>
  <MateButton slot="footer">Button 2</MateButton>
</MateCard>