> For the complete documentation index, see [llms.txt](https://docs.cwicly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cwicly.com/blocks/list.md).

# 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="/files/sHJscThWb2nW7KToY5IY" alt="" data-size="line"> `list` block
3. Click on the <img src="/files/sHJscThWb2nW7KToY5IY" 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="/files/sHJscThWb2nW7KToY5IY" alt="" data-size="line"> `list` block
3. Click on the <img src="/files/sHJscThWb2nW7KToY5IY" 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="/pages/YnlcjllutaYHNKN8e3SV" %}
[List Types](/blocks/list/list-types.md)
{% endcontent-ref %}

## Settings

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

{% content-ref url="/pages/mlhMPbtthISIvSxK7cVh" %}
[Settings](/blocks/list/settings.md)
{% 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="/pages/EDbffmHlSFoKEAVAPO0L" %}
[Icon](/blocks/list/icon.md)
{% 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="/pages/-MS3NePyz1N3xpgVuNde" %}
[Text Colour](/design/typography/text-color.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MS3NhW0KLv7CIqklatT" %}
[Link Colour](/design/typography/link-color.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MS3E6uz2Lt9WaPRFnCI" %}
[Background](/design/backgrounds.md)
{% 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="/pages/-MS3EZQd9uSNwpddRPpy" %}
[Typography](/design/typography.md)
{% endcontent-ref %}