# Navigation card

### Summary <a href="#navigationcardcomponent-summary" id="navigationcardcomponent-summary"></a>

The Navigation card provides a visual way to highlight content and helps users navigate to content. The card includes a title, image, summary text and link.

This article shows you how to add a Navigation card to the Manual list component.

Below you can see three navigation cards (one per row).

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-7259ee56811c6746dd42e0728ad03aff13c9f268%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

### Step 1 - Add the Navigation card <a href="#navigationcardcomponent-step1-addthenavigationcard" id="navigationcardcomponent-step1-addthenavigationcard"></a>

Within the Manual list component under List items, click on the dropdown and select Navigation card as shown below.

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-f0f8df4052966636474a0d3bfc047ed9232b449f%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

### Step 2 - Fill in the various fields <a href="#navigationcardcomponent-step2-fillinthevariousfields" id="navigationcardcomponent-step2-fillinthevariousfields"></a>

The available fields are shown and numbered below.

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-70fc20004742b269a9cb858909071ec00830b6e0%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

1. Title - Set the card title.
2. Image - Upload an image (or select one from your media library).
3. Show image as icon - Check this box to resize the image to an icon size (40x40px).
4. Summary - Enter your custom text.
5. Link URL - The URL entered here will be the final destination if the end user clicks anywhere in the navigation card.
6. Size - Set the image size (the options are None, Small or Large).
7. Theme - Select the light or dark theme.

**Note:** If you set the image to show as an Icon (point #3), then this will override the image size set at point #6.