Callout

↓

Preview

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

リサイズ可能

<Callout>
  <p>ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。</p>
</Callout>

<div class="c--callout l--withSide is--colored -p:20 -bd: -bdrs:2 -g:20" style="--keycolor:var(--red)">
  <div class="c--callout__icon l--center is--side -c:keycolor -fz:xl -p:5">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor" focusable="false" class="a--icon" aria-hidden="true">...</svg>
  </div>
  <div class="c--callout__body">
    <p>ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。</p>
  </div>
 </div>

プロパティ	説明
`type`	`keycolor`と`icon`の組み合わせを呼び出すキーワードを指定できます。初期値:`"alert"`
`icon`	アイコンを指定できます。デフォルトは `"alert"`です。
`keycolor`	キーカラーを指定します。
`isFlow`	`__body`に渡されます

↓

typeの指定

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。長年にわたり、私は学区と長寿であれば、そのようなLiberroy, Foo の取り組み。

<Callout type='alert' bdrs='2'>...</Callout>
<Callout type='point' bdrs='2'>...</Callout>
<Callout type='warning' bdrs='2'>...</Callout>
<Callout type='check' bdrs='2'>...</Callout>
<Callout type='info' bdrs='2'>...</Callout>
<Callout type='help' bdrs='2'>...</Callout>
<Callout type='note' bdrs='2'>...</Callout>

↓

その他、カラーとアイコンの指定例

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。長年にわたり、私は学区と長寿であれば、そのようなLiberroy, Foo の取り組み。

<Callout icon='good' keycolor='green'>...</Callout>
<Callout icon='book' keycolor='#185b6e'>...</Callout>

Callout

Import

Props

Examples