Callout

↓

Preview

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

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

リサイズ可能

↓

Preview

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

<WithSide className='u--cbox' keycolor='red' p='30' g='30' bd bdrs='10'>
  <Center data-is-side c='keycolor' fz='xl'>
    <Icon icon='alert' />
  </Center>
  <Lism className='u--trimBox'>
    <p>ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。</p>
  </Lism>
</WithSide>

<div class='l--withSide u--cbox -p:30 -g:30 -bd -bdrs:10' style='--keycolor:var(--red)' components='[object Object]' frontmatter='[object Object]'>
  <div class='l--center -c -fz:xl' style='--c:var(--keycolor)' data-is-side='true'>
    <svg xmlns='http://www.w3.org/2000/svg' class='l--icon' viewBox='0 0 256 256' width='1em' height='1em' fill='currentColor' focusable='false' aria-hidden='true'>
      <path d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z'></path>
    </svg>
  </div>
  <div class='u--trimBox'>
    <p>ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。</p>
  </div>
</div>

 import jsx from '@/components/lism/Callout/index.jsx';

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

↓

typeの指定

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

リサイズ可能

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

↓

カラーとアイコンを指定する例

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

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

Callout

Only Core

Create Component

Source Code

Import

Props

Usage