> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/card.md).

# Card

The `Card` component displays a card with a header, content, and footer. It provides an organized way to present information with optional loading states and alignment features.

## Preview

<div align="left"><figure><img src="/files/CmFBxhXuvKpfBR5dqkHQ" alt="Gravity card component" width="375"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { Card } from 'components/lib';

function MyComponent({ ...props }){

  return (
    <Card title='Card Title' description='Card Description'>
      Card content goes here.
    </Card>
  );
}
```

### Props

| Prop        | Description                                 | Required | Value            |
| ----------- | ------------------------------------------- | -------- | ---------------- |
| center      | align the card in the center of it's parent | optional | boolean          |
| children    | children to render                          | required | component(s)     |
| className   | custom style                                | optional | SCSS or Tailwind |
| description | header description                          | optional | string           |
| loading     | toggle the loading spinner                  | optional | boolean          |
| title       | header title                                | optional | string           |

### Example

```javascript
import { Card, Table, useAPI } from 'components/lib';

function Example({ ...props }){

 const { data, loading } from useAPI('/api/user');

  return (
    <div>
      <Card title='Card Title' description='Card Description' loading={ loading }>
        <Table data={ data }/>
      </Card>
    </div>
  );
}

```

### Notes

* The `Card` component uses `cn` and `Loader` from `'components/lib'`.
* The `center` prop aligns the card in the center of its parent.
* The `loading` prop toggles a loading animation.
* The `children` prop can include a React component(s) or `CardHeader`, `CardContent`, and `CardFooter` components.
* For more details, refer to the [Shadcn Card documentation](https://ui.shadcn.com/docs/components/card).