> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/nc/basic/list.md).

# List

Represents a \<ul> or \<ol> element

## Usage Notes&#x20;

* Place anywhere on a page to create a list
* Place within the List Item slot to create a nested list&#x20;

## Properties

* **Tag.** Enter `ul`  or `ol`  &#x20;
* **List Items ( Slot ).** Place list items here &#x20;

## Styling&#x20;

{% hint style="warning" %}
Currently, Webflow does not have good component styling capabilities that can be used to expose these;

* No component-property-linkable embeds within components&#x20;
* No Custom Property databinding for custom elements to component properties&#x20;
* Simple Variant styling, which doesn't support multi-dimensionality well&#x20;
* No option lists as property types&#x20;
  {% endhint %}

Here’s what styling an HTML list (`<ul>`, `<ol>`, `<li>`) supports directly or via CSS:

* **List type / bullet style:**
  * `list-style-type`
    * `disc` → ●
    * `circle` → ○
    * `square` → ■
    * `decimal` → 1. 2. 3.
    * `lower-roman` → i. ii. iii.
    * `upper-roman` → I. II. III.
    * `lower-alpha` → a. b. c.
    * `upper-alpha` → A. B. C.
    * `none` → removes bullets/numbers
* **List image:**
  * `list-style-image` → use a custom image or SVG as bullet
* **List position:**
  * `list-style-position`
    * `inside` → bullets inside content box
    * `outside` → bullets outside content box
* **Spacing / layout:**
  * `margin` → space around list
  * `padding` → space inside list or items
  * `line-height` → vertical spacing between items
  * `gap` → spacing between items (in flex or grid contexts)
* **Marker styling (modern CSS):**
  * `::marker` pseudo-element to style bullet or number:
    * color
    * font-size
    * font-family
    * content (e.g. custom symbols)&#x20;

```css
ul {
  list-style-type: square;
  margin: 1em;
  padding-left: 2em;
}

li::marker {
  color: red;
  font-size: 1.5em;
  content: "★ ";
}
```

* **Custom numbering (for `<ol>`):**
  * `start` attribute to set initial number
  * `reversed` attribute to count backwards
  * CSS counters for fully custom sequences

All of these styles can be applied through CSS, making HTML lists highly customizable.