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

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)

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.