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.

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.

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.

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.

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.

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.

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.