Note

↓

Preview

Note Title

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

リサイズ可能

↓

Preview

Note

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

リサイズ可能

<Stack className='u-cbox set-shadow' keycolor='gray' p='20' g='10' bdc='keycolor' bd-x-s bdw='4px' bxsh='10' bdrs='5'>
  <Flex c='keycolor' fw='bold' ai='center' g='10'>
    <Center className='c--note_icon' fz='xl'>
      <Icon icon='note' />
    </Center>
    <span>Note</span>
  </Flex>
  <Lism>
    <Dummy lang='ja' />
  </Lism>
</Stack>

<div class='u-cbox set-shadow l--stack -p:20 -g:10 -bd-x-s -bxsh:10 -bdrs:5' style='--keycolor:var(--gray);--bdc:var(--keycolor);--bdw:4px'>
  <div class='l--flex -fw:bold -ai:center -g:10'>
    <div class='l--flex -c -fw:bold -ai:center -g:10' 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='M229.66,58.34l-32-32a8,8,0,0,0-11.32,0l-96,96A8,8,0,0,0,88,128v32a8,8,0,0,0,8,8h32a8,8,0,0,0,5.66-2.34l96-96A8,8,0,0,0,229.66,58.34ZM124.69,152H104V131.31l64-64L188.69,88ZM200,76.69,179.31,56,192,43.31,212.69,64ZM224,120v88a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32h88a8,8,0,0,1,0,16H48V208H208V120a8,8,0,0,1,16,0Z'
        ></path>
      </svg>
    </div>
    <span>Note</span>
  </div>
  <div>
    <p>ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。</p>
  </div>
</div>

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

プロパティ	説明
`keycolor`	表示カラーを指定します。
`icon`	アイコンを指定できます。
`type`	`keycolor`と`icon`の組み合わせのプリセット値を指定できます。初期値:`"note"`
`title`	タイトルテキストを指定します。
`flow`	`_body`に渡されます

↓

typeの指定

Note: type="note"