Lists (Bullets and Numbered lists)
Lists (Bullets and Numbered lists)

Lists (Bullets and Numbered lists)

Customizing Notion Blocks

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.

1. How to add Bulleted List

In this section, you’ll be able to add the bulleted list to your site. Use the below code snippet, you can customize your content in bulleted list.
.notion-list-disc{
   list-style-type: square; 
}

2. How to add Numbered List

In this section, you’ll be able to add the numbered list to your site. Use the below code snippet, you can customize your content in bulleted list.
.notion-number-disc{
  list-style-type: none;
  display: flex;
  gap: 10px;
  align-items: center;
  padding-left: 12px;
 
}
.notion-number-disc::before{
  content: "+";
}

3. How to add color to your To-do list checkbox

In this section, users will be able to add color to your To-do list checkbox. Use the below code snippet, to add color to your checkbox.
.notion-property-checkbox-checked{
   background: gray; 
}

Explore more features with the given classes

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