Cards
Display information more dynamically with a set of cards — with or without images
Last updated
Was this helpful?
Display information more dynamically with a set of cards — with or without images
Last updated
Was this helpful?
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.
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.
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.
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.
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.
