List view

Getting Started

Home

Sync Content

Customizing your site

Customizing Notion Blocks

Callout

Toggle

Lists (Bullets and Numbered lists)

References

How To

≡

Customizing Notion Blocks

Customize List View

Discover a wide range of classes tailored for customizing list view and unlock the ability to transform and style list view items to suit your design preferences and enhance the overall user experience.

How to customize hover effect of list items

Enhance the hover effect on your list items by customizing their appearance. Add visual flair, transitions, and interactive elements to create an engaging and dynamic gallery view experience.

Explore the features of list view using classes

Classes

Customize the different list view elements on your Bullet site using the provided classes.

Class	Description
.notion-collection	Represents a collection element
.notion-collection-header-title	Represents the title/header of a collection.
.notion-list-collection	Represents a list collection element, which contains a group of list items.
.notion-list-body	Represents the body/content container of a list collection.
.notion-list-item	Represents an individual item within a list collection.
.notion-list-item-title	Represents the title/header of a list item.
.notion-list-item-body	Represents the body/content of a list item.

How to use

Copy the provided CSS code snippet containing the gallery class into your CSS file or code > CSS(in bullet site dashboard) section.

Add or Modify the gallery classes according to your desired customization.

Save the code and publish the site.

On this page

Customize List View How to customize hover effect of list items Explore the features of list view using classes Classes