Cards

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

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 — read on to find out more.

Example of a card

GitBook homepage

Visit our website and find out more about GitBook.

Developer docs

Build you own GitBook integration!

Sign up to GitBook

Click here to get started for free.

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.

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.

Adding images

Hover over a card and open its Options menu . Here you can add a cover image to your card.

Clicking Add cover will open the Select image side panel — you can drag and drop a new image into this, or use an image file you’ve previously uploaded to your space.

The key to great looking cards is making sure all the images in a card block have the same ratio. For example:

• 16:9 (eg. 1920px x 1080px)

• 4:3 (eg. 1024px x 768px)

• 1:1 (eg. 500px x 500px)

By using images with the same ratio, all your cards will perfectly align on the page. This means that titles and text below your images will also stay aligned, for a great reading experience.

Card size

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.