吹き出しのようなデザインのサンプル集です。

ここのCSSをそのまま使うと、サイト全体のcalloutに適用されるため、どこかのカテゴリ以下のページに適用などすると良いと思います。

例としてtopページ配下のblogページ配下のページにのみ適用する場合は以下のようなcssになります。

/* topページ配下のblogページ配下のページの場合 */ 
.page[class*="pageMap__top_blog_"] .notion-callout {}

もしくは記事最後の例のように、特定のColor設定の場合にのみ適用する方法を利用ください。

普通のCallout

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8a05f6b7-42e9-4e36-96a1-9854a7996e49/icon_.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8a05f6b7-42e9-4e36-96a1-9854a7996e49/icon_.png" width="40px" /> これは普通のCalloutです

</aside>

大きめCallout

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/641339a2-f1e1-49d1-a2ab-4d1adf68c1c1/icon_.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/641339a2-f1e1-49d1-a2ab-4d1adf68c1c1/icon_.png" width="40px" /> これは大きめ画像のCalloutでございます

</aside>

.notion-callout .notion-page-icon {
    max-width: 100px;
    width: 100px;
    max-height: 100px;
    height: 100px;
}

吹き出しっぽい形

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f86ba022-ea56-4cc7-9ce7-48381e20cae4/icon_.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f86ba022-ea56-4cc7-9ce7-48381e20cae4/icon_.png" width="40px" /> これは吹き出しっぽい感じですね

</aside>

.notion-callout .notion-page-icon {
    position: absolute;
    top: -10px;
    left: -120px;
    max-width: 100px;
    width: 100px;
    max-height: 100px;
    height: 100px;
}

.notion-callout {
    position: relative;
    margin-left: 120px;
    min-height: 100px;
    width: calc(100% - 120px) !important;
    border: none;
    border-radius: 10px;
    background-color: #e0edff;
}

.notion-callout:before {
    content: "";
    position: absolute;
    top: 50px;
    left: -30px;
    margin-top: -15px;
    border: 15px solid transparent;
    border-right: 15px solid #e0edff;
}

枠線付きの吹き出し

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bccae36a-f2da-4bc2-ae07-c221921c546d/icon_.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bccae36a-f2da-4bc2-ae07-c221921c546d/icon_.png" width="40px" /> さらに枠線をつけてみました。長い文章をいれても崩れないかチェックするために長めの文章を入れてみます。長い文章をいれても崩れないかチェックするために長めの文章を入れてみます。

</aside>

.notion-callout {
    position: relative;
    margin-left: 120px;
    min-height: 100px;
    width: calc(100% - 120px) !important;
    border: none;
    border-radius: 10px;
    background-color: #fff;
    border: solid 3px #555;
    box-sizing: border-box;
}
.notion-callout .notion-page-icon{
    position: absolute;
    top: -10px;
    left: -120px;
    max-width: 100px;
    width: 100px;
    max-height: 100px;
    height: 100px;
}
.notion-callout:before {
    content: "";
    position: absolute;
    top: 50px;
    left: -30px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-right: 14px solid #555;
}
.notion-callout:after {
    content: "";
    position: absolute;
    top: 50px;
    left: -27px;
    margin-top: -15px;
    border: 15px solid transparent;
    border-right: 15px solid #FFF;
}

運用上の注意

上記CSSをそのまま利用すると、すべてのCalloutに適用されてしまい、通常のCalloutの表示が吹き出しになってしまいます。