cards.md

description
Display information more dynamically with a set of cards — with or without images

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 and link them to the relevant resources.

Example of a card

GitBook homepage	Visit our website and find out more about GitBook.	https://www.gitbook.com/	card_gitbook_website.svg
Developer docs	Build you own GitBook integration!	https://developer.gitbook.com/	card_developer_docs.svg
Sign up to GitBook	Click here to get started for free.	https://app.gitbook.com/join	card_gitbook_signup.svg

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.

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.

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.

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 by clicking on the Options menu next to the block and choosing Full width. {% endhint %}