Note

↓

Preview

Note Title

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

リサイズ可能

<Note title='Note Title'>
  <Dummy lang='ja' />
</Note>

<div class="c--note l--stack is--colored -p:30 -bd:is -bdc:keycolor -bdrs: -g:20" style="--keycolor:var(--gray);--bdw:4px;--bdrs:2px">
  <div class="c--note__head l--flex -fw:bold -ai:c -g:10">
    <div class="c--note__icon l--center -fz:xl -c:keycolor">
      <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">
        <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 class="c--note__title">Note Title</span>
  </div>
  <div class="c--note__body is--flow -flow:s">
    <p> ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。 </p>
  </div>
</div>

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

↓

icon、keycolorを指定

Heading text...

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

<Note title='Heading text...' icon='star' keycolor='blue'>
  <Dummy lang='ja'/>
</Note>

type="note"