---
name: Card
menu: Components
---

import PropsTable from 'website-src/components/PropsTable'
import { livePreviewStyle } from '../helpers/constants'
import Card from './Card'
import cactusTheme from '@repay/cactus-theme'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

# Card

## Basic Usage

Cards are box containers used to organize content. Content and actions used for cards regard one topic. Cards can have any height or width.

### Try it out

export const code = `<Card margin="40px" width="fit-content" padding={5}>
  <h2 style={{ margin: 0 }}>Title</h2>
  <h4 style={{ margin: 0, fontWeight: 400, fontSize: '12px' }}>Subtitle</h4>
  <table style={{ fontSize: '15px', borderCollapse: 'collapse' }}>
    <tbody>
      <tr>
        <th style={{ textAlign: 'left', padding: '0 60px 0 0', fontSize: '12px' }}>
          Total Amount Due
        </th>
        <td>
          <span style={{ textAlign: 'right', fontWeight: 600, fontSize: '25.92px' }}>
            $350.20
          </span>
        </td>
      </tr>
      <tr>
        <th style={{ textAlign: 'left', fontWeight: 'normal', fontSize: '12px' }}> Due Date </th>
        <td style={{ textAlign: 'right', fontWeight: 600, fontSize: '12px' }}>
          {new Date().toLocaleDateString('en-US')}
        </td>
      </tr>
      <tr>
        <th style={{ textAlign: 'left', fontWeight: 'normal', fontSize: '12px' }}>
          Minimum Amount Due
        </th>
        <td style={{ textAlign: 'right', fontWeight: 600, fontSize: '12px' }}>$127.00</td>
      </tr>
    </tbody>
    </table>
  </Card>`

<LiveProvider code={code} scope={{ Card }}>
  <LiveEditor style={livePreviewStyle} />
  <LiveError />
  <LivePreview />
</LiveProvider>

## Properties

<PropsTable of={Card} />