# Automated list

### Summary

The Automated List Component displays content that is automatically curated according to predefined criteria and presented in various "teaser" variants: Promo card, Navigation card, Snippet.

This section shows you how to add an Automated list.

Below is an automated list. The content is being pulled from existing pages and displayed as \`Promo card\` components.

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

### How to add an automated list

**Step 1**: Go to the page you'd like to add the automated list to (or create a new page) and in the Content tab, Components section, select Automated list from the dropdown list.

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

**Step 2**: Fill in the information for the **Content tab** as per below.

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

1. List type - controls how the content is aggregated . Out-of-the-box, CivicTheme comes with one list type. However, site administrators can set up different types of lists, that can then be selected from this dropdown.
2. Content type - filter content by the content types.
3. Metadata - further filter content by topic or site section.
4. Limit - how many results to display: unlimited or limited to the specified number.
5. Filters - choose to display filters at the top of the the automated list component.

**Step 3**: Fill in the information for the **Fields tab** as per below.

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

1. Title - You can add a title to the automated list, such as 'Latest news'.
2. Content - You can also add introductory text to the automated list.
3. Link above - Aadd a link at the top of the automated list. See the screenshot below for an example.
4. Link below - You can also add a link below the automated list.

\
The screenshot above shows an automated list limited to three results, with the title of 'Latest news'. It also has a 'link above', which is highlighted.

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

**Step 4**: Fill in the information for the **Appearance tab** as per below.

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

1. Theme - Select light or dark theme.
2. Vertical spacing - Add vertical spacing to the component if you'd like. Choices are none, top, bottom or both)
3. Background colour - Check the box to apply a default background colour from your colour palette.
4. Columns - Select how many columns to display (e.g. the screenshot above of 'Latest news' has three columns)
5. Items - Choose whether to display the list items as Navigation cards or Promo cards, and whether the cards will use the light or dark theme.