Card and CardGroup

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

Install Writedocs and preview your first site.

Components

Everything you can use in a page.

<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

A screenshot or illustration above the title.

<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

GET

Every pet in the store.

Add a pet

POST

<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

Get notified of changes.

Errors

Every error code.

<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

Most pages work unchanged.

Read the guide

Changelog

What changed in each release.

<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, 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>:

Install

npm install acme-sdk

Use

import { Acme } from "acme-sdk";

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

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

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