Lists
Lists

Lists

Site Customization

Customize Lists

Discover a range of classes that allow you to customize various aspects of lists, such as font styles, sizes, weights, line heights, and more. This includes three types of lists: bulleted lists, numbered lists, and to-do lists. With these classes, you can achieve precise styling for your lists, enhancing their visual appeal and readability.

How to

Customize Bulleted List Icon

.notion-list-disc{
   list-style-type: square; 
}

Customize Numbered List

.notion-number-disc{
  list-style-type: none;
  display: flex;
  gap: 10px;
  align-items: center;
  padding-left: 12px;
 
}
.notion-number-disc::before{
  content: "+";
}

Customize the To-do List checkbox color

.notion-property-checkbox-checked{
   background: gray; 
}

References

Classes

Explore a range of classes that enable you to customize various aspects of lists.
Class
Description
.notion-list
Represents a list element.
.notion-list .notion-list-disc
Represents a bulleted list, using disc-style bullet points.
.notion-list .notion-list-disc li
Represents an item in a bulleted list.
.notion-list .notion-list-numbered
Represents a numbered list.
.notion-list .notion-list-numbered li
Represents an item in a numbered list.
.notion-to-do
Represents a to-do list item.
.notion-to-do-item
Represents the container for a to-do item.
.notion-to-do-body
Represents the body/content of a to-do item.
.notion-to-do-children
Represents the container for the children/indented items of a to-do item.
.notion-property-checkbox-checked
Represents a checked checkbox.
.notion-property-checkbox-checked svg
Represents the SVG icon for a checked checkbox.
.notion-property-checkbox-unchecked
Represents an unchecked checkbox.
How to use
  1. Copy the provided CSS code snippet containing the class of the list into your CSS file or code > CSS(in bullet site dashboard) section.
  1. Add or Modify the list classes according to your desired customization.
  1. Save the code and publish the site.