Gallery
Gallery

Gallery

Site Customization

Customize Gallery View

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

How to

Customize Card Hover

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

References

Classes

Customize the different gallery views on your Bullet site using the provided classes.
Class
Description
.notion-collection
Represents the collection element.
.notion-collection-header-title
Represents the title of a collection.
.notion-gallery-grid-size-small
Represents a small-sized grid view for the gallery collection.
.notion-gallery-grid-size-medium
Represents a medium-sized grid view for the gallery collection.
.notion-gallery-grid-size-large
Represents a large-sized grid view for the gallery collection.
.notion-collection-card
Represents a card within a collection.
.notion-collection-card-cover
Represents the cover/image of a collection card.
.notion-collection-card-body
Represents the body/content of a collection card.
.notion-collection-card-property
Represents a property/attribute of a collection card.
How to use
/* Example: How to use toggle CSS class */
/* Gray Toggle Heading 1 - change font size and color */
  1. Copy the provided CSS code snippet containing the gallery class into your CSS file or code > CSS(in bullet site dashboard) section.
  1. Add or Modify the gallery classes according to your desired customization.
  1. Save the code and publish the site.