description |
---|
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.
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 |
Hover over a card and open its Options menu
{% 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 %}
Hover over a card and open its Options menu
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.
You can select the card size by opening the Options menu
{% hint style="info" %}
You can make card blocks span the full width of your window by clicking on the Options menu