# Subject card

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

The Subject card provides a way to help users get to information on a specific subject. It consists of a title, image and link.

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

Below you can see two Subject cards set to display as one per row (one with an image, one without).

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

You can also have up to four Subject cards in one 'row'. Below you can see four Subject cards (with images) set up to display four per row.

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

Finally, you can also set up the cards with a block colour background, like the example below.

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

### Step 1 - Add the Subject card <a href="#subjectcardcomponent-step1-addthesubjectcard" id="subjectcardcomponent-step1-addthesubjectcard"></a>

Within your Manual list component under List items, click on the dropdown and select Subject 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-cce477b3b9e3b94544c8f3d5e5fcd2ede4e4d537%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

### Step 2 - Fill in the various fields <a href="#subjectcardcomponent-step2-fillinthevariousfields" id="subjectcardcomponent-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-1a293472fd908312f61eaef7aa28e8e47145b07e%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

1. Image - Upload an image (or select one from your media library).
2. Title - Enter the card title.
3. Link - Enter a URL. The URL entered here will be the final destination if the end user clicks anywhere in the Subject card. If you start typing internal content (page title) then a list of options will display for you. Select the desired page/content.
4. Theme - Select light or dark theme.

The **Fields** and **Appearance** tabs apply to the [Manual List](https://docs.civictheme.io/content-authoring/components/list-components-and-cards/manual-list).
