# Card

A Card component.

## Usage <a href="#usage" id="usage"></a>

```jsx
import { Main, Card } from '@aragon/ui'

function App() {
  return (
    <Main>
      <Card>Card content</Card>
    </Main>
  )
}
```

## Demonstration

![](https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-497a91b8ab9270fa8f184a1d76912c15e37d3b9f%2FSchermata%202022-06-25%20alle%2022.29.53.png?alt=media)

## Props <a href="#props" id="props"></a>

#### `width` <a href="#width" id="width"></a>

* Type: `String`
* Default: `282px`

Set the width of your card in pixels.

#### **Example:**

```jsx
const MyCard = () => (
  <Card width="500px">{/* Your card's content goes here */}</Card>
)
```

#### `height` <a href="#height" id="height"></a>

* Type: `String`
* Default: `322px`

Set the height of your card in pixels.

#### **Example:**

```jsx
const MyCard = () => (
  <Card height="800px">{/* Your card's content goes here */}</Card>
)
```