# 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="/files/lwUDKoDJb1KvjEUewL9C" 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="/files/Xq3E4I08gwvboUiSKDpU" 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="/files/0GPNjWsNuum6cnMDoHZF" 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.civictheme.io/content-authoring/components/list-components-and-cards/cards-for-lists/navigation-card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.