# Cards

Cards allow you to create a new visually pleasing page layout with text and images. They can be used to build landing pages or display any other content in a non-linear way.

You can select large or medium-sized cards and link them to the relevant resources.

### Example of a card

<table data-view="cards"><thead><tr><th></th><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</td><td></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%2FHvVwtFYWILP4sa8JXmgV%2FScreenshot%202022-11-02%20at%2019.47.54.png?alt=media&#x26;token=f2baaaac-937b-4d10-ac19-bb81624cb511">Card-example</a></td></tr><tr><td><strong>Powered by GitBook</strong></td><td>Learn about how others use GitBook</td><td></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%2FiLvZbyuEIvElzV7F1Cex%2FScreenshot%202022-11-02%20at%2019.50.41.png?alt=media&#x26;token=56ffbfd3-3f7f-4565-857a-f9850ecbe5d8">Card-example-2</a></td></tr><tr><td><strong>Sign up to GitBook</strong></td><td>Click here to create a GitBook account</td><td></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%2FlAF9Ru6pYZNpmvzOO9vg%2FScreenshot%202022-11-02%20at%2019.51.42.png?alt=media&#x26;token=aa4ee895-4986-45ff-83da-614beecc49ea">Card-example-3</a></td></tr></tbody></table>

{% hint style="info" %}
You can now convert card blocks to full width by clicking on the <img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F4hgSZBvUuOfKARaYoniC%2Fimage.png?alt=media&#x26;token=0aea0780-f1e5-43b1-b62d-d6e11741daba" alt="" data-size="line"> next to the block. [Read more about full-width blocks.](https://gitbook.com/docs/~/revisions/LY3FInGWRPLqJ2twwI3U/content-creation/blocks/..#new-full-width-blocks)
{% endhint %}

### How to create a card

Type / to open the block insert palette. Then select `Cards` block. By clicking on<img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FJi9ti0ryaZhyBUruj4iv%2Fimage.png?alt=media&#x26;token=314ce7c2-cc59-4d9b-8a0a-742a4156ec95" alt="" data-size="line">\
you can add and format text. You can also add additional columns such as numbers, user or rating.

#### Adding links and images to your cards

By clicking on the <img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FSMFZBZrjf1fkhRQGdElk%2Fimage.png?alt=media&#x26;token=46abcfde-11d0-43f3-8327-5e74bc1d15fd" alt="" data-size="line"> symbol you can add a target link (recommended), add [cover images](#user-content-fn-1)[^1] or delete the card completely.

{% hint style="success" %}
When creating cards, we recommend you use **target links instead of hyperlinks**. Target links will ensure that the reader is redirected to the intended destination, regardless of where they click within the card.
{% endhint %}

The key to great looking cards is editing your images so that they have the same ratio. For example:

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

By using the same ratio for all of your images you can ensure that they will align when displayed on the page. This means that titles and text under images is also aligned, which provides a better reading experience.

#### Card size

You can select the card size by clicking on<img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FXwidmpx7iHK4ZbfJGcFa%2Fimage.png?alt=media&#x26;token=c8d41a6c-d76a-4093-9bfc-23305c4929df" alt="" data-size="line">menu to the left of your card block. The 'Medium' option creates three cards in one horizontal line, while the 'Large' option allows for only two cards to be created.

[^1]: cover images can be icons or other small images that will help the reader grasp the content of your card