---
title: Card
description: 'Card groups similar concepts and tasks together.'
type: layout
slug: /components/card/
keywords: ['card', 'content', 'container']
---

# Card

`Card` groups similar concepts and tasks together. `Card`'s background is rendered with a `Surface`.

## Table of contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

-   [Usage](#usage)
-   [Props](#props)
-   [See Also](#see-also)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

<!-- Automatically Generated. DO NOT EDIT THIS FILE. -->
<!-- Instead, edit packages/website/src/docs/components/layout/card.mdx -->

<!-- props -->

<!-- Automatically Generated -->

## Usage

`Card` provides convenient sub-components such as `CardBody`, `CardHeader`, and `CardFooter`.

```jsx live
import {
	Card,
	CardHeader,
	CardBody,
	CardFooter,
	Text,
} from '@wp-g2/components';

function Example() {
	return (
		<Card>
			<CardHeader>
				<Heading size={4}>Card Title</Heading>
			</CardHeader>
			<CardBody>
				<Text>Card Content</Text>
			</CardBody>
			<CardFooter>
				<Text>Card Footer</Text>
			</CardFooter>
		</Card>
	);
}
```

## Props

##### backgroundSize

**Type**: `number`

Determines the grid size for "dotted" and "grid" variants.

##### border

**Type**: `boolean`

Renders a border around the entire `Surface`.

##### borderBottom

**Type**: `boolean`

Renders a bottom border.

##### borderLeft

**Type**: `boolean`

Renders a left border.

##### borderRight

**Type**: `boolean`

Renders a right border.

##### borderTop

**Type**: `boolean`

Renders a top border.

##### elevation

**Type**: `number`

Size of the elevation shadow, based on the Style system's elevation system.
Elevating a `Card` can be done by adjusting the `elevation` prop. This may be helpful in highlighting certain content. For more information, check out `Elevation`.

##### isBorderless

**Type**: `boolean`

Renders without a border.

##### isRounded

**Type**: `boolean`

Renders with rounded corners.

##### variant

**Type**: `"grid"`,`"primary"`,`"secondary"`,`"tertiary"`,`"dotted"`

Modifies the background color of `Surface`.

-   `primary`: Used for almost all cases.
-   `secondary`: Used as a secondary background for inner `Surface` components.
-   `tertiary`: Used as the app/site wide background. Visible in **dark mode** only. Use case is rare.
    <!-- /Automatically Generated -->
    <!-- /props -->

## See Also

-   [`HStack`](../hstack/)
-   [`VStack`](../vstack/)