Skip to content

Latest commit

 

History

History
43 lines (26 loc) · 3.81 KB

cards.md

File metadata and controls

43 lines (26 loc) · 3.81 KB
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 homepageVisit our website and find out more about GitBook.https://www.gitbook.com/card_gitbook_website.svg
Developer docsBuild you own GitBook integration!https://developer.gitbook.com/card_developer_docs.svg
Sign up to GitBookClick here to get started for free.https://app.gitbook.com/joincard_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.

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.

{% 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 %}