> For the complete documentation index, see [llms.txt](https://docs.lightningrails.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lightningrails.com/ui-components/cards.md).

# cards

### Card Product

<figure><img src="/files/kv7e7qjBKu8l2Z9J4bAT" alt=""><figcaption><p>Product card design</p></figcaption></figure>

To use this card in your project, copy and paste the following card into your html.erb file:

```
<%= render "components/card_product_image"
```

***

### Card without image

<figure><img src="/files/ROLzLF5HV2eM4Q2KNRqB" alt=""><figcaption></figcaption></figure>

To use this card in your project, copy and paste the following card into your html.erb file:

```
<%= render "components/card_no_image"
```

***

### See more card designs:

* [HyperUi cards](https://www.hyperui.dev/components/marketing/cards)
* [DaisyUI cards](https://daisyui.com/components/card/)