Callout

↓

Preview

ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。

リサイズ可能

↓

Preview

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

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

<div class='l--sideMain is--side u-cbox -ai:center -p:20 -g:20 -bd -bdrs:10' style='--keycolor:var(--red)'>
  <div class='l--center -c -fz:xl' style='--c:var(--keycolor)'>
    <svg xmlns='http://www.w3.org/2000/svg' class='a--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='l--flow'>
    <p>ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。</p>
  </div>
</div>

import { Callout } from '@lism-css/ui/react';

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

↓

typeの指定

ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。

リサイズ可能

<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とFoogの取り組み」は、私たちに一定の示唆を与えてくれます。

<Callout icon='good' keycolor='pink'>...</Callout>

Only Core

Create Component

Source Code

Import

Props

Usage