# Cards

You can use cards to create a visually pleasing page layout, combining text and images in a grid. They’re ideal for building landing pages or displaying any other content in a non-linear way.

You can adjust [switch between medium or large cards](#card-size) and link them to the relevant resources — read on to find out more.

### Example of a card

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>GitBook homepage</strong></td><td>Visit our website and find out more about GitBook.</td><td><a href="https://www.gitbook.com/">https://www.gitbook.com/</a></td><td><a href="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FItC1AGSjOcEHBi1r8JND%2Fcard-example1.png?alt=media&#x26;token=69058495-03c0-45b4-8124-10cbbf13fb1b">card-example1.png</a></td></tr><tr><td><strong>Developer docs</strong></td><td>Build you own GitBook integration!</td><td><a href="https://developer.gitbook.com/">https://developer.gitbook.com/</a></td><td><a href="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FVTzaBhVMzngGE4ChQErF%2Fcard-example2.png?alt=media&#x26;token=a866209d-5a79-480f-a633-32df31625334">card-example2.png</a></td></tr><tr><td><strong>Sign up to GitBook</strong></td><td>Click here to get started for free.</td><td><a href="https://app.gitbook.com/join">https://app.gitbook.com/join</a></td><td><a href="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F1SRLG4mBGtdTJCaw7XYG%2Fcard-example3.png?alt=media&#x26;token=eb8e39e4-f921-4772-86e8-4b1f547e1fbe">card-example3.png</a></td></tr></tbody></table>

### Adding links <a href="#adding-links-and-images-to-your-cards" id="adding-links-and-images-to-your-cards"></a>

Hover over a card and open its **Options menu** <img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2Fh6PrhC4elyfq3fU1ntC2%2FFrame%202.png?alt=media&#x26;token=b4e03276-98a2-46b4-8992-42946babfc45" alt="" data-size="line">. Here you can add a target link, so users can jump directly to a location when they click the card.

{% hint style="success" %}
When creating cards, we recommend you use **target links instead of hyperlinks**. With a target link, your readers can click anywhere on the card to access the linked URL.
{% endhint %}

### Adding images

Hover over a card and open its **Options menu** <img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2Fh6PrhC4elyfq3fU1ntC2%2FFrame%202.png?alt=media&#x26;token=b4e03276-98a2-46b4-8992-42946babfc45" alt="" data-size="line">. Here you can add a cover image to your card.&#x20;

Clicking **Add cover** will open the [Select image side panel](https://gitbook.com/docs/~/changes/pfQHJq75QY5xMYvctdXP/content-editor/insert-images#how-to-add-images) — you can drag and drop a new image into this, or use an image file you’ve previously uploaded to your space.

The key to great looking cards is making sure all the images in a card block have the same ratio. For example:

* 16:9 (eg. 1920px x 1080px)
* 4:3 (eg. 1024px x 768px)
* 1:1 (eg. 500px x 500px)

By using images with the same ratio, all your cards will perfectly align on the page. This means that titles and text below your images will also stay aligned, for a great reading experience.

#### Card size

You can select the card size by opening the **Options menu** <img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2Fh6PrhC4elyfq3fU1ntC2%2FFrame%202.png?alt=media&#x26;token=b4e03276-98a2-46b4-8992-42946babfc45" alt="" data-size="line"> to the left of your card block. The **Medium** option creates three cards in one horizontal line, while the **Large** option shows two larger cards on each line.

{% hint style="info" %}
You can make card blocks [span the full width of your window](https://gitbook.com/docs/~/changes/pfQHJq75QY5xMYvctdXP/content-editor/blocks/..#full-width-blocks) by clicking on the **Options menu** <img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2Fh6PrhC4elyfq3fU1ntC2%2FFrame%202.png?alt=media&#x26;token=b4e03276-98a2-46b4-8992-42946babfc45" alt="" data-size="line">  next to the block and choosing **Full width**.
{% endhint %}