> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-nick-eng-3707-update-chat-endpoints-to-single-assi.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Cards

> Highlight main points or links with customizable icons

<Card title="Card Title" icon="text" href="/components/columns">
  This is how you use a card with an icon and a link. Clicking on this card
  brings you to the Columns page.
</Card>

<RequestExample>
  ```mdx Card Example
  <Card title="Click on me" icon="text" href="/components/columns">
    This is how you use a card with an icon and a link. Clicking on this card
    brings you to the Columns page.
  </Card>
  ```

  ```mdx Image Card Example
  <Card title="Image Card" img="/images/card-with-image.png">
    Here is an example of a card with an image
  </Card>
  ```
</RequestExample>

## Horizontal card

Add a `horizontal` property to display cards horizontally.

<Card title="Horizontal Card" icon="text" horizontal>
  Here is an example of a horizontal card
</Card>

## Image card

Add an `img` property to display an image on the top of the card.

<Card title="Image Card" img="https://mintlify-assets.b-cdn.net/yosemite.jpg">
  Here is an example of a card with an image
</Card>

## Link card

You can customize the CTA and whether or not to display the arrow on the card. By default, the arrow will only show for external links.

<Card title="Link card" icon="link" href="/components/columns" arrow="true" cta="Click here">
  This is how you use a card with an icon and a link. Clicking on this card
  brings you to the Columns page.
</Card>

<RequestExample>
  ```mdx Card Example
  <Card
    title="Link card"
    icon="link"
    href="/components/columns"
    arrow="true"
    cta="Click here"
  >
    This is how you use a card with an icon and a link. Clicking on this card
    brings you to the Columns page.
  </Card>
  ```
</RequestExample>

## Grouping cards

You can group cards in [columns](/components/columns).

<Columns cols={2}>
  <Card title="First Card" icon="panel-left-close">
    This is the first card.
  </Card>

  <Card title="Second Card" icon="panel-right-close">
    This is the second card.
  </Card>
</Columns>

## Props

<ResponseField name="title" type="string" required>
  The title of the card
</ResponseField>

<ResponseField name="icon" type="string or svg">
  A [Font Awesome icon](https://fontawesome.com/icons), [Lucide
  icon](https://lucide.dev/icons), or JSX compatible SVG code in `icon={}`.

  To generate JSX compatible SVG code:

  1. Use the [SVGR converter](https://react-svgr.com/playground/).
  2. Copy the code inside the `<svg/>` tag.
  3. Paste the code into your card. Make sure to only copy and paste the code inside the `<svg/>` tag.
  4. You may need to decrease the height and width to make the image fit.
</ResponseField>

<ResponseField name="iconType" type="string">
  One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`
</ResponseField>

<ResponseField name="color" type="string">
  The color of the icon as a hex code
</ResponseField>

<ResponseField name="href" type="string">
  The url that clicking on the card would navigate the user to
</ResponseField>

<ResponseField name="horizontal" type="boolean">
  Makes the card more compact and horizontal
</ResponseField>

<ResponseField name="img" type="string">
  The url or local path to an image to display on the top of the card
</ResponseField>

<ResponseField name="cta" type="string">
  Label for the action button
</ResponseField>

<ResponseField name="arrow" type="boolean">
  Enable or disable the link arrow icon
</ResponseField>