notion-like callouts (css)

theme

The CSS defines nine callout classes - grey, brown, orange, yellow, green, blue, purple, pink, and red. Each class has a corresponding background color. It also handles light and dark mode support automatically. Ignore light and dark modes altogether if you don't have prefers-colors-theme enabled. Just choose a version that fits your current theme.

1. Add the following to your current theme.

/* Notion-like callouts */

 .callout {
     font-size:95%;
     border-radius: 3px;
     padding: 16px;
}
 @media (prefers-color-scheme: light) {
     .grey_callout {
         background: rgb(241, 241, 239);
    }
     .brown_callout {
         background: rgb(244, 238, 238);
    }
     .orange_callout {
         background: rgb(251, 236, 221);
    }
     .yellow_callout {
         background: rgb(251, 243, 219);
    }
     .green_callout {
         background: rgb(237, 243, 236);
    }
     .blue_callout {
         background: rgb(231, 243, 248);
    }
     .purple_callout {
         background: rgba(244, 240, 247, 0.8);
    }
     .pink_callout {
         background: rgba(249, 238, 243, 0.8);
    }
     .red_callout {
         background: rgb(253, 235, 236);
    }
}
 @media (prefers-color-scheme: dark) {
     .callout {
         color: white;
    }
     .grey_callout {
         background: rgba(124,139,154,.13);
    }
     .brown_callout {
         background: rgb(55, 34, 13);
    }
     .orange_callout {
         background: rgb(71, 45, 1);
    }
     .yellow_callout {
         background: rgba(240,165,15,.13);
    }
     .green_callout {
         background: rgba(52,183,67,.12);
    }
     .blue_callout {
         background: rgba(33,172,232,.12);
    }
     .purple_callout {
         background: rgba(135,85,236,.12);
    }
     .pink_callout {
         background: rgba(225,71,174,.11);
    }
     .red_callout {
         background: rgba(209,46,46,.11);
    }
}

2. Use it anywhere like this:

<p class="callout grey_callout">
The quick grey fox jumps over the lazy dog
</p>

Replace grey_callout with the color of your choice.

3. Demo

The quick grey fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick orange fox jumps over the lazy dog

The quick yellow fox jumps over the lazy dog

The quick green fox jumps over the lazy dog

The quick blue fox jumps over the lazy dog

The quick purple fox jumps over the lazy dog

The quick pink fox jumps over the lazy dog

The quick red fox jumps over the lazy dog