Super Template Tests and Learnings to Review

Testing Button

Testing Button 2

Adding a button

Adding a button is easy, simply write some text, make it bold and add a Link. Please note: buttons only work with a single text block on a line of it’s own. Refer to the main home page for reference on how the button is used.

Important note about pricing property

In order for the pricing property to show up correctly (in the top right corner of the card) it MUST be the last property in the list. If you remove the price property the information will not display correctly.

If you do not want to include the price tag in the way, you can paste the following snippet into your site settings > code > css tab.

.notion-collection-card__property:last-child, .notion-collection-list__item-property:last-child {
    background: none!important;
    border-radius: 0px!important;
    color: var(--color-text-default)!important;
    font-size: 16px!important;
    font-weight: 300!important;
    opacity: 1!important;
    position: static!important;
}

Adding your own Submit form

To add a form where users can submit to your database (like on this page) you will need to use a third-party form system, I recommend Tally forms. Tally is a great tool and allows you to embed forms on a Notion page and connect any submissions with a database.

Template options

Hunt comes with several built in theme options. Simply paste the snippet below into your site settings > code > css tab. Then customize the CSS values by changing out the HEX color code or pixel sizes.

Main styles and colors

:root {
    --primary-color: #202B3F;
    --color-text-default: #202B3F!important;
    --color-bg-default:#FBFCFF!important;
    --button-bg-color: #202B3F!important;
    --button-text-color: #ffffff!important;
    --mobile-menu-background-color: #FFFFFF!important;
    --list-item-border: #E1E9FF;
    --list-item-hover: #F1F5FF;
    --page-width: 1280px;
    --button-rounding: 50px!important;
}

Text alignment

By default, the text alignment on the homepage is set to ‘center’. You can disable this with the following snippet:

#page-index .notion-text, h1.notion-heading:first-of-type {
    text-align: left!important;
    margin: 0!important;
}

Page header alignment

By default, the page header title and icon is aligned center on all pages. You can reset it back to the left hand side using the following snippet:

.notion-header__title-wrapper {
    text-align: left!important;
}
.notion-header__icon-wrapper.has-icon, .notion-header__icon-wrapper.has-icon-image {
  margin-left: 0!important;
  margin-right: 0!important;
  left: 0!important;
  right: unset!important;
  text-align: left!important;
}

Cover image color blending

By default, all cover images blend with a white background color, if you change the theme background color this may need to be changed or you may want to remove it.

To disable the cover image blending gradient, include this snippet:

.notion-header__cover:after {
      background-image: none!important;
  }

To change the cover image blending color, change the RGB values in this snippet to match your new background color:

.notion-header__cover:after {
      background-image: linear-gradient(to bottom, rgba(251, 252, 255, 0), rgba(251, 252, 255, 1) 98%)!important;
  }

Cover image behind page content

By default, cover images position as they would in Notion, (above the page content) except for the home page. The homepage cover is set to position behind the page content.

Reset the homepage cover position so it goes above page content:

#page-index .notion-header__cover.has-cover {
    position: static!important;
    max-height: 30vh!important;
    height: 30vh!important;
    margin-top: 0px!important;
}

Set cover image to go behind the page content on all pages

.notion-header__cover.has-cover {
      position: absolute!important;
      width: 100%!important;
      top: 0!important;
      margin-top: -20px!important;
      height: 100vh!important;
      max-height: 100vh!important;
      z-index: -2!important;
  }

Cover image border radius

:root {
	--card-radius: 36px !important;
}

FAQ

‣

🕹 Control Panel

🔒

Main content databases🗃️Content

📄

Filtered database pages⭐Featured ResourcesNotion Templates

📄

Other pages📥Submit

✅

Instructions & Getting startedℹ️Setup guide

A directory template for Notion and Super

Perfect for directories of all kinds from products, templates, resources and more. Hunt is a directory template for Super inspired by Product Hunt.

Get this template

🗃️

Grid view

5 views

🗃️

Grid view

🗃️

List view

🗃️

Free

🗃️

Latest

🗃️

Notion templates

Notion

⭐

Notion

Notion is a productivity and organizational tool that allows users to create notes, databases, to-do lists, and more in a customizable and collaborative workspace.

Tools

Free

iPhone 14 Pro Mockups

📱

iPhone 14 Pro Mockups

Realistic mockups of iPhone 14 Pro in a monochrome environment by Craftwork

Design Files

$28

Untitled UI

🖼️

Untitled UI

Untitled UI is the largest UI kit and design system for Figma in the world. Kickstart any project, save thousands of hours, and level up as a designer.

Design Files

$99

Tally Forms

Tally Forms

Create beautiful forms and embed them in Notion

Tools

Free

Apple Pro XDR Mockups

🖥️

Apple Pro XDR Mockups

Apple Pro XDR Display mockups are ideal for use in presentations, design projects, and other visual content

Design Files

$28

Wool Desk Pad

Wool Desk Pad

Instantly transform your workspace. Imagine a desk pad so soft and cosy, it feels like a warm hug every time you’re at your desk.

Product

$26

Gradient Blur Wallpapers

🎨

Gradient Blur Wallpapers

The gradient blur wallpaper pack. 20 wallpapers at 5.6k resolution with soft color blurs and deep blacks. Perfect for desktops and mobiles.

Wallpapers

$14

Super

⚡

Super

Transform any Notion page into a powerful website.

Tools

Free

Untitled UI Icons

💜

Untitled UI Icons

Untitled UI Icons are a clean, consistent, and neutral icon library crafted specifically for modern UI design. Made for Figma, in Figma.

Icons

$39

Starter

🔥

Starter

The fastest way to start design projects in Figma

Design Files

$69

Ultimate Finance Tracker

💸

Ultimate Finance Tracker

A comprehensive Notion dashboard to track your financial goals, transactions and more.

Notion Template

$19

Cluster template

🧠

Cluster template

Cluster is the ultimate solution for beautiful documentation in Notion, powered by Super.

Super Template

$25

Notion Complete Bundle

📦

Notion Complete Bundle

Get Easlo’s complete bundle of templates designed for Notion.

Notion Template

$199

MacBook Pro Mockups

🚗

MacBook Pro Mockups

High-class tech mockups of the MacBook Pro 16 created with a passion for automobiles

Design Files

$28

Everyone Can Build a Twitter Audience

🐦

Everyone Can Build a Twitter Audience

Learn how anyone can build a significant Twitter audience

Guide

$25

Cosmos Template

☄️

Cosmos Template

Perfect for personal sites, developers, designers, creatives and crypto-heads. Uses one database to power all your content, powered by Notion and Super.

Super Template

$20

Embed Notion

👨🏻‍💻

Embed Notion

Embed Notion is a simple generator to create Notion embed snippets.

Tools

Free

Notion Website Pack

🖥️

Notion Website Pack

Create a simple website using a Notion page.

Notion Template

$19

Notion Creator Playbook

✔️

Notion Creator Playbook

Learn how to build and sell Notion templates in one week.

Notion Template

$39

Notion Student Pack

🎒

Notion Student Pack

All the tools, templates and dashboards you need as a student.

Notion Template

$39

Real estate investor pack

🏠

Real estate investor pack

Ultimate Real Estate Investor's Dashboard is a powerful, easy-to-use Notion tool.

Notion Template

$125

Some products above have affiliate links and I will earn a percentage from any qualifying sales