---
title: "List classes"
description: "Bullet, numbered, check and custom-marker list classes."
requested_language: fr
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/fr/reference/utilities/list
version: unreleased (main)
docs_index: https://docs.systhema.app/fr/llms.txt
---
> This page isn't translated yet. Showing English.


<!-- generated by pnpm docs:generate; do not edit -->

| Class                       | Styles                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `list-bullet`               | `:is(.list-bullet > li, .list-number > li, .list-check > li) { list-style: none; position: relative; padding-left: calc(var(--list-space-x) + var(--list-marker-size)); margin-block: var(--list-gap-y); }`<br>`:is(.list-bullet > li :first-child, .list-number > li :first-child, .list-check > li :first-child) { margin-top: 0; }`<br>`:is(.list-bullet > li :last-child, .list-number > li :last-child, .list-check > li :last-child) { margin-bottom: 0; }`<br>+ 4 more rules |
| `list-number`               | `:is(.list-bullet > li, .list-number > li, .list-check > li) { list-style: none; position: relative; padding-left: calc(var(--list-space-x) + var(--list-marker-size)); margin-block: var(--list-gap-y); }`<br>`:is(.list-bullet > li :first-child, .list-number > li :first-child, .list-check > li :first-child) { margin-top: 0; }`<br>`:is(.list-bullet > li :last-child, .list-number > li :last-child, .list-check > li :last-child) { margin-bottom: 0; }`<br>+ 7 more rules |
| `list-check`                | `:is(.list-bullet > li, .list-number > li, .list-check > li) { list-style: none; position: relative; padding-left: calc(var(--list-space-x) + var(--list-marker-size)); margin-block: var(--list-gap-y); }`<br>`:is(.list-bullet > li :first-child, .list-number > li :first-child, .list-check > li :first-child) { margin-top: 0; }`<br>`:is(.list-bullet > li :last-child, .list-number > li :last-child, .list-check > li :last-child) { margin-bottom: 0; }`<br>+ 7 more rules |
| `is-checked`                | `:is(.list-check > .is-checked)::before { mask-image: url("data:image/svg+xml,…"); }`                                                                                                                                                                                                                                                                                                                                                                                               |
| `list-custom`               | `& { display: grid; align-items: start; grid-template-columns: auto 1fr; column-gap: var(--list-space-x); row-gap: var(--list-gap-y); }`<br>`:is(.list-custom > li:has( > :is(ul, ol))):before { --tw-content: none; }`                                                                                                                                                                                                                                                             |
| `list-custom-entry`         | `display: contents;`                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `list-custom-entry-marker`  | `grid-column-start: 1;`<br>`width: var(--list-marker-size);`<br>`height: var(--list-marker-size);`<br>`display: inline-grid;`<br>`place-items: center;`<br>`font-size: var(--list-icon-size);`<br>`line-height: 1;`<br>`color: var(--color-list-marker);`                                                                                                                                                                                                                           |
| `list-entry-custom-marker`  | `:is(.list-entry-custom-marker > *) { width: 100%; height: 100%; }`<br>`:is(.list-entry-custom-marker > img, .list-entry-custom-marker > svg) { object-fit: contain; object-position: center; }`                                                                                                                                                                                                                                                                                    |
| `list-entry-custom-content` | `grid-column-start: 2;`                                                                                                                                                                                                                                                                                                                                                                                                                                                             |