graphql-engine/docs/wiki/docusaurus-mdx-guide/thumbnail.mdx

---
sidebar_position: 9
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import Thumbnail from '@site/src/components/Thumbnail';

# Thumbnail

```jsx
import Thumbnail from '@site/src/components/Thumbnail';

<Thumbnail src='/img/account-management/billing/add_new_card.png' alt='add a new card' width='437px' />;
```

Just pass in all the valid attributes for image as props.

## Result UI

<Thumbnail src='/img/account-management/billing/add_new_card.png' alt='add a new card' width='437px' />

<hr />

A few examples,

<Thumbnail src='/img/account-management/billing/coupon_redemption.png' alt='Coupons and Credits' />

<hr />

<Thumbnail src='/img/account-management/billing/invoice_settings.png' alt='invoice settings' />