# Card and CardGroup

Three variants, chosen by which optional prop is set - `icon` (or no icon at all), `img`, or `method`:

<CardGroup cols={2}>
  <Card title="Single card" icon="star">
    A `Card` links to a page (via `href`) and shows an icon, title, and description.
  </Card>
  <Card title="No icon" href="/docs/content/components/card/">
    Just omit `icon` entirely - the title and description still lay out normally with no gap left behind.
  </Card>
</CardGroup>

```mdx
<CardGroup cols={2}>
  <Card title="Single card" icon="star" href="/some-page/">
    A short description under the title.
  </Card>
  <Card title="No icon" href="/some-page/">
    icon is entirely optional.
  </Card>
</CardGroup>
```

Set `img` instead of `icon` for a full-width image above the title - useful for a more visual card, like a screenshot or illustration:

<Card title="Image card" img="/images/card-demo.svg">
  Set `img` to any image path or URL - it renders full-width above the title instead of `icon`'s small glyph.
</Card>

```mdx
<Card title="Image card" img="/images/card-demo.svg">
  Renders full-width above the title.
</Card>
```

Set `method` for an API-reference style card - a solid, colored badge (`GET`/`POST`/`PUT`/`PATCH`/`DELETE`, any other value renders gray) next to the title instead of an icon:

<CardGroup cols={2}>
  <Card title="Get pets" method="GET" href="/api/pets/get-pets/">
    List every pet in the store.
  </Card>
  <Card title="Add a pet" method="POST" href="/api/pets/post-pets/">
    Register a new pet.
  </Card>
</CardGroup>

```mdx
<Card title="Get pets" method="GET" href="/api/pets/get-pets/">
  List every pet in the store.
</Card>
```

**`Card` props**

<Parameter name="title" type="string" required />

<Parameter name="icon" type="string">
  Icon name or literal emoji — see [Icons](/docs/content/components/icon/#icons).
</Parameter>

<Parameter name="img" type="string">
  Image path or URL — renders full-width above the title instead of `icon`.
</Parameter>

<Parameter name="method" type="string">
  `"GET"`/`"POST"`/`"PUT"`/`"PATCH"`/`"DELETE"` render as a colored badge next to the title; any other value renders gray.
</Parameter>

<Parameter name="href" type="string">
  Renders as a `<div>` instead of a link if omitted.
</Parameter>

<Parameter name="color" type="string">
  Any CSS color, applied to the icon.
</Parameter>

<Parameter name="horizontal" type="boolean">
  Puts the icon beside the title and description instead of above them.
</Parameter>

<Parameter name="cta" type="string">
  Call-to-action text shown at the bottom of the card, followed by an arrow.
</Parameter>

<Parameter name="arrow" type="boolean">
  Shows an arrow in the card's top-right corner. Only on a card with `href`.
</Parameter>

**`CardGroup` props**

<Parameter name="cols" type="number" default="2" />

`<Columns cols={n}>` is the same grid under Mintlify's name. Like `CardGroup`, it lays out any children, not only cards. To put other content side by side - text, a code block - wrap each cell in `<Column>`:

```mdx
<Columns cols={2}>
  <Column>
    **Install**
  </Column>
  <Column>
    **Use**
  </Column>
</Columns>
```