Callout
Callout

Callout

Customizing Notion Blocks

Customizing Callout

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

1. 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);
}
notion image

2. How to customize your callout using Linear-gradient

Users can enjoy with the Linear-gradient call out to attract the other readers. Use the below given code snippet to attain the Linear-gradient result. 
.notion-teal_background_co {
    background:linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);;
    border: none;
    padding: 30px;
    border-radius: var(--border-radius);
}
.notion-teal_background_co>*{
  color: white;
}
.notion-teal_background_co .notion-page-icon-inline{
  display: none;
}
notion image

3. How to develop a callout section with a Full-width Container

Users has the ability to develop a callout in a full-width container to attract the your users easily. This can be achieved with the help of the below code snippet:
/* 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;
 } 
}
 
notion image

Explore the additional features using the different classes given below:

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.
  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.