Hero Block

Transform a Notion callout into a responsive hero section with a background image and a customizable button using CSS.

Transform a standard Notion callout into a modern hero section with a background image and a call-to-action button using custom CSS.

What you'll build

This customization turns a yellow Notion callout into a hero banner by:

Displaying a background image behind the content.
Converting a link into a styled button.
Centering the content.
Adding rounded corners and spacing for a polished appearance.
Keeping the layout responsive across desktop and mobile devices.

Step 1: Create the callout in Notion

Create a yellow background callout in your Notion page.

Inside the callout:

Add your heading and any supporting text.
Insert a link that you want to appear as a button.
Add your background image as the last block inside the callout.

Important: The image must be the last block inside the callout. The CSS uses this image as the hero background.

In case you wanted to use different colors aside from yellow, please replace the selector below:

Supported callout colors

Users can replace .bg-yellow-light with one of the following:

Callout Color	CSS Selector
Default	`.bg-gray` (or no color depending on the theme)
Brown	`.bg-brown`
Orange	`.bg-orange`
Yellow	`.bg-yellow-light`
Green	`.bg-green`
Blue	`.bg-blue`
Purple	`.bg-purple`
Pink	`.bg-pink`
Red	`.bg-red`

So if you wanted a blue hero instead of yellow, you would simply replace:

.notion-callout.bg-yellow-light

with

.notion-callout.bg-blue

Or for green:

.notion-callout.bg-green

Step 2: Add the CSS

Go to:

Code → CSS

Then paste the following CSS:

/* --------------------------------------------------   Hero Callout Container-------------------------------------------------- */.super-root .super-content .notion-callout.bg-yellow-light {    margin: 0 !important;    padding: 80px 24px !important;    border: none !important;    border-radius: 24px !important;    position: relative !important;    overflow: hidden !important;    text-align: center !important;    background-position: center !important;    background-size: cover !important;    background-color: revert !important;}/* --------------------------------------------------   Hide Default Callout Icon-------------------------------------------------- */.super-root .super-content.notion-callout.bg-yellow-light.notion-callout__icon {    display: none !important;}/* --------------------------------------------------   Callout Content-------------------------------------------------- */.super-root .super-content.notion-callout.bg-yellow-light.notion-callout__content {    margin-inline-start: 0 !important;    overflow: visible !important;}.super-root .super-content.notion-callout.bg-yellow-light.notion-callout__content > span {    display: none !important;}/* --------------------------------------------------   Theme Variables-------------------------------------------------- */:root {    --rounded-md: 8px;    --gray-600: #66707a;    --gray-900: #262a2e;    --base-white: #fff;    --base-black: #111;    --button-padding: 13px 16px 14px;}/* --------------------------------------------------   CTA Button-------------------------------------------------- */.super-root .super-content.notion-callout.bg-yellow-light.notion-link {    display: inline-flex !important;    justify-content: center;    margin-top: 24px;    padding: var(--button-padding);    text-decoration: none;    cursor: pointer;    border: 0;    border-radius: var(--rounded-md);    font-size: 1rem;    font-weight: 500;    background: var(--base-black);    color: var(--base-white);    transition:        bac

How it works

The CSS:

Removes the default callout styling.
Uses the last image inside the callout as a background.
Styles the link as a button.
Centers the content.
Applies responsive styles for tablet and mobile screens.

Customization ideas

You can easily personalize the hero section by changing:

Button color

background: var(--base-black);

Button text color

color: var(--base-white);

Button shadow

box-shadow: 0 5px 28px -6px #ffbe3d;

Border radius

border-radius: 24px;

Hero padding

padding: 80px 24px;

Increase the first value to make the hero taller.

Background image position

top: -5%;

Adjust this value to reposition the background image.

The result will look like this: