Callout
Callout

Callout

Site Customization

Customizing Callout

Explore a variety of classes dedicated to callout, offering granular control over font styles, sizes, weights, line heights, and more.

How to

Customize Colored Callout Blocks

Using different colored callouts allows you to create unique looks for each type of callout, enabling you to assign specific meanings or purposes to each color. For example, you can use a blue callout to grab attention and emphasize a call to action, while a green callout can indicate success or positive information. By leveraging different colors for your callouts, you can visually communicate different messages or actions to your readers, enhancing the overall effectiveness and impact of your content.
/* Below code example will make blue callout as call to action section */
.notion-blue_background_co {
    background:blue;
    border: none;
    padding: 30px;
    border-radius: var(--border-radius);
}
 

Linear-gradient callout

.notion-teal_background_co {
    background:linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);;
    border: none;
    padding: 30px;
    border-radius: var(--border-radius);
}
 

References

Classes

Customize the different callouts on your Notion page using the provided classes.
Class
Description
.notion-callout
Represents the callout block element.
.notion-callout .notion-page-icon-inline
Represents a callout icon with a callout.
.notion-callout-text
Represents the content within the callout block.
.notion-callout .notion-gray_background_co
Represents a callout block with a gray background color.
.notion-callout .notion-brown_background_co
Represents a callout block with a brown background color.
.notion-callout .notion-orange_background_co
Represents a callout block with an orange background color.
.notion-callout .notion-yellow_background_co
Represents a callout block with a yellow background color.
.notion-callout .notion-teal_background_co
Represents a callout block with a green background color.
.notion-callout .notion-blue_background_co
Represents a callout block with a blue background color.
.notion-callout .notion-purple_background_co
Represents a callout block with a purple background color.
.notion-callout .notion-pink_background_co
Represents a callout block with a pink background color.
.notion-callout .notion-red_background_co
Represents a callout block with a red background color.
How to use
notion image
/* Example: How to use callout CSS class */
/* Below code will make callout a full-width section */
.notion-page-content-inner>*{
  padding: 0px 7rem;
}
.notion-title{
  padding: 0px 7rem;
}
.notion-page{
  padding-left:0px;
  padding-right:0px;
}
.notion-gray_background_co{
    padding: 40px;
    margin: 30px 0px;
    border: unset;
    border-radius: unset;
    background:linear-gradient(180deg, #000327 45.17%, #1A2170 130.07%);
    color: white;
    text-align: center;
}
.notion-gray_background_co .notion-page-icon-inline{
  display: none;
}
.notion-gray_background_co .notion-h2{
  text-align: center;
  width: 80%;
  margin: 0 auto;
  font-size: 40px;
  padding-bottom: 14px;
}
.notion-blue_background{
    background: #5D67CE;
}
.bullet-btn{
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    text-align: center;
    color: #FFFFFF;
    background: #5D67CE;
    border-radius: 8px;
    padding: 10px 20px;
    opacity: 1;
}
.notion-gray_background_co .notion-text{
  font-size: 14px;
}

@media (max-width:768px){
  .notion-page-content-inner>*{
    padding: 0px 2rem;
 }
 .notion-title{
   padding: 0px 2rem;
 }
}
@media (max-width:640px){
   .notion-page-content-inner>*{
    padding: 0px 1rem;
    }
 .notion-title{
   padding: 0px 1rem;
 } 
}
  1. Copy the provided CSS code snippet containing the callout class into your CSS file or code > CSS(in bullet site dashboard) section.
  1. Add or Modify the callout classes according to your desired customization.
  1. Save the code and publish the site.