# Card and CardGroup

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

Cards that link to a page - with an icon, an image or an HTTP method - and a grid that lays out cards or anything else in columns.

A card is a box with a title and a short description, usually linking to a page. `CardGroup` lays cards out in a grid.

**[Quickstart](https://preview.writedocs.io/docs/quickstart/)**

Install Writedocs and preview your first site.

**[Components](https://preview.writedocs.io/docs/content/components/)**

Everything you can use in a page.

```mdx
<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/docs/quickstart/">
    Install Writedocs and preview your first site.
  </Card>
  <Card title="Components" icon="blocks" href="/docs/content/components/">
    Everything you can use in a page.
  </Card>
</CardGroup>
```

## Image

`img` puts an image across the top of the card, in place of an icon:

**[Image card](https://preview.writedocs.io/docs/content/components/image/)**

A screenshot or illustration above the title.

```mdx
<Card title="Image card" img="/images/card-demo.svg" href="/docs/content/components/image/">
  A screenshot or illustration above the title.
</Card>
```

## HTTP method

`method` shows a colored method label next to the title, for a card that links to an API endpoint:

**[List pets](https://preview.writedocs.io/api/pets/get-pets/)**

Every pet in the store.

**[Add a pet](https://preview.writedocs.io/api/pets/post-pets/)**

Register a new pet.

```mdx
<Card title="Add a pet" method="POST" href="/api/pets/post-pets/">
  Register a new pet.
</Card>
```

`GET`, `POST`, `PUT`, `PATCH` and `DELETE` each have a color; any other method is gray.

## Horizontal

`horizontal` puts the icon beside the title, for a compact card:

**[Webhooks](https://preview.writedocs.io/docs/content/components/card/)**

Get notified of changes.

**[Errors](https://preview.writedocs.io/docs/content/components/card/)**

Every error code.

```mdx
<Card title="Webhooks" icon="webhook" horizontal href="/docs/guides/webhooks/">
  Get notified of changes.
</Card>
```

## Call to action and arrow

`cta` adds a line of link text at the bottom, and `arrow` an arrow in the corner:

**[Migrate from Mintlify](https://preview.writedocs.io/docs/migrating-from-mintlify/)**

Most pages work unchanged.

**[Changelog](https://preview.writedocs.io/docs/content/components/update/)**

What changed in each release.

```mdx
<Card title="Migrate from Mintlify" icon="arrow-right-left" href="/docs/migrating-from-mintlify/" cta="Read the guide">
  Most pages work unchanged.
</Card>
```

## Card props

**`title`** `string` required

The card's title.

**`href`** `string`

Where the card links to. Without it, the card isn't a link. A link to another site opens in a new tab.

**`icon`** `string`

An icon above the title - any [icon](https://preview.writedocs.io/docs/content/components/icon/#icons), including an emoji or an image.

**`color`** `string`

The icon's color - any CSS color.

**`img`** `string`

An image across the top of the card, in place of the icon: a path or a URL.

**`method`** `string`

An HTTP method label next to the title, in place of the icon.

**`horizontal`** `boolean` default: `false`

Puts the icon beside the title and description.

**`cta`** `string`

Link text at the bottom of the card, with an arrow.

**`arrow`** `boolean` default: `false`

An arrow in the top-right corner. Only on a card with `href`.

The card's content - its description - can be Markdown.

## CardGroup

`CardGroup` lays out its content in a grid of `cols` columns. On a narrow screen, the columns stack.

**`cols`** `number` default: `2`

The number of columns.

The grid takes any content, not only cards. Wrap each cell in a `<div>`:

<div>
  **Install**

  ```bash
  npm install acme-sdk
  ```
</div>
<div>
  **Use**

  ```js
  import { Acme } from "acme-sdk";
  ```
</div>

````mdx
<CardGroup cols={2}>
  <div>
    **Install**

    ```bash
    npm install acme-sdk
    ```
  </div>
  <div>
    **Use**

    ```js
    import { Acme } from "acme-sdk";
    ```
  </div>
</CardGroup>
````