> 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-item.md).

# List Item

Represents an \<li> element.

Designed to place within a List slot.&#x20;

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2Fh1HrHEwLuHuB4uUE3v4t%2Fimage.png?alt=media&amp;token=be4175f7-9d00-4ae6-b63d-6f762ef5159c" alt=""><figcaption></figcaption></figure>

## Properties

* **Text.** The text to display.&#x20;

#### Nested List

* **Show Slot.** Makes the hidden slot for nested lists visible and accessible.&#x20;
* **Slot.** Used for placing nested lists.&#x20;

## Variants&#x20;

Consider slotted variant for semantic constructions.&#x20;

## Styling

{% hint style="danger" %}
For consideration.&#x20;
{% endhint %}

Here’s what styling you can apply specifically to **list items** (`<li>`):

* **Text styling:**
  * `color`
  * `font-size`
  * `font-weight`
  * `font-family`
  * `text-transform` (uppercase, lowercase, capitalize)
  * `text-decoration` (underline, line-through, etc.)
  * `line-height`
  * `letter-spacing`
  * `text-align`
* **Spacing and layout:**
  * `margin` → space outside the list item
  * `padding` → space inside the list item
  * `height` / `min-height` / `max-height`
  * `width` / `min-width` / `max-width`
  * `display` → block, inline, flex, grid, etc.
  * `gap` → spacing between children if flex/grid
  * `float` / `clear`
* **Background and borders:**
  * `background-color`
  * `background-image`
  * `border`
  * `border-radius`
  * `box-shadow`
* **Positioning:**
  * `position` → relative, absolute, etc.
  * `top`, `right`, `bottom`, `left`
* **Custom markers (modern browsers):**
  * `::marker` pseudo-element:
    * `color`
    * `font-size`
    * `content` (custom symbol or text)
    * `font-family`

Example:

```css
cssCopyEditli {
  padding: 0.5em;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
}

li::marker {
  color: red;
  content: "→ ";
}
```

* **Interactivity:**
  * `cursor`
  * `hover` / `focus` styles
  * animations / transitions

Everything that applies to a block element can generally be applied to `<li>`. They’re flexible containers for any HTML content (text, images, divs, etc.).