# List

## Usage Notes 

* Place anywhere on a page to create a list
* Place within the List Item slot to create a nested list 

## Properties

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

## Styling 

{% 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 
* No Custom Property databinding for custom elements to component properties 
* Simple Variant styling, which doesn't support multi-dimensionality well 
* No option lists as property types 
  {% 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sygnal.gitbook.io/sygnal-webflow-components/nc/basic/list.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.