Board
Board

Board

Customizing Notion Blocks

Customize Board View

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

How to add hover effect in Board cards

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

Explore the features of board view using classes

Classes

Customize the different board views on your Bullet site using the provided classes.
Class
Description
.notion-collection
Represents a collection view, which can display items in different layouts such as a gallery, board, or table.
.notion-collection-header-title
Represents the title element in the collection view header.
.notion-board-view-size-small
Represents a small-sized board view in the collection.
.notion-board-view-size-medium
Represents a medium-sized board view in the collection.
.notion-board-view-size-large
Represents a large-sized board view in the collection.
.notion-board-header
Represents the header section of a board view.
.notion-board-th
Represents the table header cell in a board view.
.notion-board-th-body
Represents the body section of a table header cell in a board view.
.notion-board-th-count
Represents the count element in a table header cell of a board view.
.notion-board-body
Represents the body section of a board view.
.notion-board-group
Represents a group within a board view, containing multiple cards.
.notion-board-group-card
Represents a card within a board group.
How to use
  1. Copy the provided CSS code snippet containing the board class into your CSS file or code > CSS(in bullet site dashboard) section.
  1. Add or Modify the board classes according to your desired customization.
  1. Save the code and publish the site.