> 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-native/components/card.md).

# Card

The `<Card/>` is a universal container for grouping UI elements together. Wrap it around any child elements that you'd like to group visually.&#x20;

## Preview

<div align="left"><figure><img src="/files/EsbjLmJngmb886tRbDLm" alt="" width="375"><figcaption></figcaption></figure></div>

## Code

```javascript
<Card title='Gravity' color='purple'>
 <Children/>
</Card>
```

### Props

| Prop    | Description            | Required | Value                                                     |
| ------- | ---------------------- | -------- | --------------------------------------------------------- |
| title   | title text             | optional | string                                                    |
| loading | toggle loading spinner | optional | boolean                                                   |
| color   | background color       | optional | blue *(default)*, red, green, orange, purple or hex value |