> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-han-update-changelogs.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="link" href="/content/components/card-groups">
  This is how you use a card with an icon and a link. Clicking on this card
  brings you to the Card Group page.
</Card>

<RequestExample>
  ```jsx Card Example
  <Card title="Click on me" icon="link" href="/content/components/card-group">
    This is how you use a card with an icon and a link. Clicking on this card
    brings you to the Card Group page.
  </Card>
  ```

  ```jsx 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 a card to make it horizontally displayed.

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

### Image Card

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

<Card title="Image Card" img="https://mintlify.s3-us-west-1.amazonaws.com/mintlify-han-update-changelogs/images/card-with-image.png">
  Here is an example of a card with an image
</Card>

## 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) or SVG code in `icon={}`
</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>