# 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. ### Example of a card

			Cover image	Cover image (dark)	Cover image (dark)	Cover image (dark)
GitBook homepage	Visit our website and find out more about GitBook.	https://www.gitbook.com/	25_12_10_cards_3.png	25_12_10_cards_2.png		25_12_10_cards_2.png
Developer docs	Build you own GitBook integration!	https://developer.gitbook.com/	25_12_10_cards_1.png		25_12_10_cards.png	25_12_10_cards.png
Sign up to GitBook	Click here to get started for free.	https://app.gitbook.com/join	25_12_10_cards_5.png			25_12_10_cards_4.png

### Adding links Hover over a card and open its **Options menu**

. 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**

. Here you can add a cover image to your card. Alternatively, just click the **Add cover image** option on the card itself. This will open the **Select file** modal. Here you can drag and drop a new image into this, or use an image file you’ve previously uploaded to your space. #### Adding images for dark mode You can also add cover images that will only show in dark mode. To do this, open the card’s **Options menu**

and choose **Cover** > **Edit cover** > **Add cover for dark mode**. This will open the **Select file** modal, where you can drag and drop a new image or select a previously-uploaded image. #### Choosing the right image size GitBook will automatically crop landscape images to a 16:9 ratio on desktop and mobile. If the images you upload are portrait or have a 1:1 ratio, they will be cropped to 16:9 on desktop and display as square or portrait on mobile.

A GitBook screenshot showing card images on desktop — On desktop, all card images will display in a landscape 16:9 ratio, regardless of their dimensions. We recommend using the same dimensions for consistency.

A GitBook screenshot showing card images on mobile — On mobile, square or portrait images will displayed as shown on the left. Landscape images will be displayed as shown on the right.

To keep things consistent across desktop and mobile, we recommend uploading all the images for your cards in a 16:9 format (e.g. 1920px x 1080px). If you want your cards to adapt their layout depending on the screen size, we’d recommend uploading images with a 1:1 ratio, and the content of your image centered. ### Changing the size of cards You can select the card size by opening the **Options menu**

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-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/creating-content/blocks/..#full-width-blocks) by clicking on the **Options menu**

next to the block and choosing **Full width**. {% endhint %} ### Representation in Markdown ```markdown


Example title 1	Example description 1.	https://example.com	example_image1.svg
Example title 2	Example description 2.	https://example.com	example_image2.svg
Example title 3	Example description 3.	https://example.com	example_image3.svg

```