# List

{% hint style="info" %}
The `list` block allows you to create unordered and ordered lists of text and information in a well formed and semantic way.
{% endhint %}

<figure><img src="https://lh5.googleusercontent.com/vIoUDBoF5rC9wgC8Kgyx1hFd3iRC_s2E_dDar0SRgXnVAydTW9HN8ObIG48QMZe0yjvWo4rqI1X6OlXLdmPXVJIiOT8hJ93L_7jabgJjbDQgUz1ZBhrlqyVAHn1JHv0fOb-OGJI0eZkFkQSN5IqL6yqNccepqldlIxmjsILtm0-Hu5j6JqOrYVXTiywDVw" alt=""><figcaption></figcaption></figure>

## Basics

{% hint style="warning" %}
The `list` block only allows text content.
{% endhint %}

The `list` block is a quick way to create lists of text that sit on top of each other.

You can add a new line to the `list` block by pressing the Enter key.

![](https://lh3.googleusercontent.com/95QOuvOihsQqeS4jqPZ__98GyA-b3vd7KdwIFmHDAISBr7CD5VlMWmgu9giQ6aU1rYEAaaNfjSe9-U3GaJ28_0-UOrCjTBhEBXU1Yka3XVF2yh2ZT6HzJ1XD14ve6cJPHxdoTwtdmoNcDmW0n3MbeU8YIr2mB4ZO2zPg8n_3IY6nvKFrJ1_Y6ntVqabyvA)

<details>

<summary>Add a list</summary>

If you want to add a `list` block outside any other block on the page:

1. Click on the ➕ ​​icon to open the Inserter Panel
2. Search for the <img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FIFujNW2w7vGBWle7QUxI%2Ffavicon-black%20(1).png?alt=media&#x26;token=7217d37c-7da0-48b5-a775-e14b6e5de2f4" alt="" data-size="line"> `list` block
3. Click on the <img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FIFujNW2w7vGBWle7QUxI%2Ffavicon-black%20(1).png?alt=media&#x26;token=7217d37c-7da0-48b5-a775-e14b6e5de2f4" alt="" data-size="line"> `list` block to insert it into your page

If you want to add a `list` block inside a parent block:

1. Open the Quick Insert panel in the parent block
2. Search for the <img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FIFujNW2w7vGBWle7QUxI%2Ffavicon-black%20(1).png?alt=media&#x26;token=7217d37c-7da0-48b5-a775-e14b6e5de2f4" alt="" data-size="line"> `list` block
3. Click on the <img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FIFujNW2w7vGBWle7QUxI%2Ffavicon-black%20(1).png?alt=media&#x26;token=7217d37c-7da0-48b5-a775-e14b6e5de2f4" alt="" data-size="line"> `list` block to insert it into your parent block

</details>

{% embed url="<https://www.youtube.com/watch?v=-TpYpIcX1uE>" %}
Getting Started - List Block&#x20;
{% endembed %}

## List Type

Allows you to choose between different list types (ordered, unordered & icon) as well as their list styles.

<figure><img src="https://lh4.googleusercontent.com/XhUyQJ_9dZjHa6XGF8aCN7_sdsa8RuyHu4tO5FnqzgxZ46Hq_yUAU732iF6RVnZNXHG67f-4uqDRYFVg6-Er-1mc-0Gn_2LEsOuvM1BAdR-9sEshjFyusIYta6MJv2EFsgfIGxY9_W4cUXh_p-K2HopC8oZCpKpQJV6-HLSAOSMkiTSJsc2GZvvw5GrqnQ" alt=""><figcaption></figcaption></figure>

{% content-ref url="list/list-types" %}
[list-types](https://docs.cwicly.com/blocks/list/list-types)
{% endcontent-ref %}

## Settings

Allows you to set specific settings for the `list` block.

{% content-ref url="list/settings" %}
[settings](https://docs.cwicly.com/blocks/list/settings)
{% endcontent-ref %}

## Icon

When activated, the Icon property allows you to choose whether you want the list bullet to be an icon.

<details>

<summary>Activate/deactivate icon</summary>

1. Select a `list` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Icons tab​​
5. Find the Icon property
6. Toggle the Icon property

</details>

{% content-ref url="list/icon" %}
[icon](https://docs.cwicly.com/blocks/list/icon)
{% endcontent-ref %}

## Colors

Background Color adds a color or gradient to your `image` or `gallery` block.

![](https://lh4.googleusercontent.com/d_Cn_hTekMHLpC0Myec0nSrP-Fcsu3DWmlJJ4E5X709sChfxLz0_OsIwje1YTCOFvGvZavzYMy2_HoNcnBSFZrkHj0fCKTTr5nEWQwhOKDRq0OiLx8tcC9fDMri7vNvaOADHXwjPO6ZJP7VTyNry9d2-aklpe856Riq6GMUaLisLaxM3yfcca2Yr2Bl6fw)

{% content-ref url="../design/typography/text-color" %}
[text-color](https://docs.cwicly.com/design/typography/text-color)
{% endcontent-ref %}

{% content-ref url="../design/typography/link-color" %}
[link-color](https://docs.cwicly.com/design/typography/link-color)
{% endcontent-ref %}

{% content-ref url="../design/backgrounds" %}
[backgrounds](https://docs.cwicly.com/design/backgrounds)
{% endcontent-ref %}

## Typography

The Typography property allows you to modify the List typography, including Text, Link and background.

![](https://lh4.googleusercontent.com/d_Cn_hTekMHLpC0Myec0nSrP-Fcsu3DWmlJJ4E5X709sChfxLz0_OsIwje1YTCOFvGvZavzYMy2_HoNcnBSFZrkHj0fCKTTr5nEWQwhOKDRq0OiLx8tcC9fDMri7vNvaOADHXwjPO6ZJP7VTyNry9d2-aklpe856Riq6GMUaLisLaxM3yfcca2Yr2Bl6fw)

{% content-ref url="../design/typography" %}
[typography](https://docs.cwicly.com/design/typography)
{% endcontent-ref %}