💼

Unclickable Gallery Cards

/* Makes Cards Unclickable */
a.notion-link.notion-collection-card__anchor {
    pointer-events: none;
}
/* Prevents Hover */
.notion-collection-card.gallery {
   pointer-events: none;
}

This is pretty restrictive so lets see other ways of making cards unclickable.

Specify Cards with #IDs

Witeboard

Unclickable Card
Clickable Card Relation Properties

Witeboard

Portfolio💻Tech

Demo

Custom Embed

Successful

/* WITEBOARD */
/* Input an #ID to specify a specific block */
#block-portfolio-demos-witeboard.notion-link.notion-collection-card__anchor {
    pointer-events: none;
}
/* Enables Clicking Card Properties */
#block-portfolio-demos-witeboard.notion-collection-card.gallery {
   pointer-events: all;
}
/* END WITEBOARD */

Twitter Timeline Embed Example

Unclickable Card
Unclickable Card Relation Properties

Twitter Timeline Embed

💼

Twitter Timeline Embed

Portfolio💻Tech

Demo

Successful

/* For more control over which Cards are unclickable */
/* MAKE CARD UNCLICKABLE */
/* Input an #ID to specify a specific block */
#block-portfolio-demos-twitter-timeline-embed .notion-link.notion-collection-card__anchor {
    pointer-events: none;
}
/* Prevents Clicking Card Properties */
#block-portfolio-demos-twitter-timeline-embed.gallery .notion-collection-card__content {
  pointer-events: none;
}
/* END TWITTER EMBED EXAMPLE */

Buy Me a Coffee Widget Navbar Example

Unclickable Card
Unclickable Card Relation Properties
Prevent Click Functions (ex. Hover)


/* BUY ME A COFFEE */
/* MAKES CARD UNCLICKABLE */
#block-portfolio-demos-buy-me-a-coffee-widget-navbar .notion-link.notion-collection-card__anchor {
    pointer-events: none;
}
/* Prevents Clicking Card Properties */
#block-portfolio-demos-buy-me-a-coffee-widget-navbard.gallery .notion-collection-card__content {
  pointer-events: none;
}
/* Prevent Card Clicking Function*/
#block-portfolio-demos-buy-me-a-coffee-widget-navbar.notion-collection-card.gallery {
   pointer-events: none;
}
/* END BUY ME A COFFEE */

/* Makes Cards Clickable */
a.notion-link.notion-collection-card__anchor {
    pointer-events: all;
}
/* Enables Hover */
.notion-collection-card.gallery {
   pointer-events: all;
}

These are enabled by default.


/* Prevents Clicking Card Properties */
.gallery .notion-collection-card__content {
  pointer-events: none;
}

/* Retains Clicking Card Properties */
.gallery .notion-collection-card__content {
  pointer-events: all;
}

This affects whether or not gallery card relation content is clickable or not.

🟦

Hope this was helpful!

ℹ️

Justin Russell

https://www.credly.com/badges/782dd145-e896-437f-8a27-80b701e031b7/public_url

"Hello! I'm here to help you overcome any challenges you might be facing in regards to Notion + Super websites.

If you have any questions or need guidance, feel free to reach out to me. You can DM me on Twitter, connect with me on Super or use the links below to reach out!

I'm dedicated to providing valuable support to individuals like you. My goal is to ensure your website's success, so don't hesitate to get in touch. Looking forward to helping you achieve your goals!

If you are happy with this page please consider Buying me a Coffee!

Need more help? Contact me!

Super

Twitter

Gumroad

Calendly

Buy Me A Coffee

E-mail