# Manual List

### Summary

The Manual list component allows you to create a list of cards and manually choosing the content to display in the list.&#x20;

You can also select from a variety of cards. Read more about Cards.

### How to add a Manual List

1. Login as a *Content author*
2. Navigate to the page you want to add the Manual list to
3. Scroll to the *Components* section and open the *Add content* dropdown
4. Select *Manual list*&#x20;
5. In the *Content* tab, open the *List items* to select the card type. Read more about options for [Cards for lists](https://docs.civictheme.io/content-authoring/components/list-components-and-cards/cards-for-lists).

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

6. Fill in any of the fields in the *Fields* tab:
   1. *Title* - add a title to display above the list.
   2. *Content* - add some introductory content to display between the title and the list.
   3. *Link above* and *Link below* - allows you to add a link, styled as a button, above or below the list.

<div align="left" data-with-frame="true"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2FJ8XRdES7iNtONk97IfRg%2Fmanual-list-fields.png?alt=media&#x26;token=8748509b-94f7-4c8b-a803-5c56f41059e1" alt="Fields inside the Field tab on a Manual list component" width="375"><figcaption></figcaption></figure></div>

7. Fill in the information in the *Appearance* tab.
   1. *Theme* - Select light or dark theme for this component.
   2. *Vertical spacing* - Add vertical spacing to the *Top*, *Bottom*, *Both, or None*. This creates space between components on your page. The default is set to Bottom.
   3. *Background* - Check the box to apply a default background colour from your colour palette.
   4. *Columns* - Select how many columns to display in the list. 4 is the default, but most lists display better with a maxiumum of 3 rows.&#x20;

<div align="left"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2FHwpl9zQmkDo7Vfeyxs5h%2Fappearance.png?alt=media&#x26;token=7c458e24-5e5c-446f-8918-e34a06fefc79" alt="Fields within the Appearance tab in the Manual list component" width="375"><figcaption></figcaption></figure></div>
