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 |
|
Brown |
|
Orange |
|
Yellow |
|
Green |
|
Blue |
|
Purple |
|
Pink |
|
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:
background .15s ease-out,
transform .1s ease-out,
box-shadow .15s ease-out;
}
.super-root .super-content
.notion-callout.bg-yellow-light
.notion-link:hover {
background: var(--gray-900);
box-shadow:
0 5px 28px -6px #ffbe3d;
}
.super-root .super-content
.notion-callout.bg-yellow-light
.notion-link:active {
transform: translateY(1px);
}
/* --------------------------------------------------
Hero Background Image
-------------------------------------------------- */
.super-root .super-content
.notion-callout.bg-yellow-light
.notion-image:last-child {
position: absolute;
top: -5%;
left: 50%;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
transform: translate(-50%, -50%);
z-index: -1;
}
/* --------------------------------------------------
Tablet
-------------------------------------------------- */
@media (max-width: 992px) {
.super-root .super-content
.notion-callout.bg-yellow-light
.notion-image:last-child {
top: 20%;
width: 100%;
max-width: 140%;
max-height: 140%;
}
}
/* --------------------------------------------------
Mobile
-------------------------------------------------- */
@media (max-width: 576px) {
.super-root .super-content
.notion-callout.bg-yellow-light
.notion-image:last-child {
top: 135%;
width: 140%;
height: 280%;
max-width: 280%;
max-height: 280%;
}
}
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:
