ui:footnotes

汎用的なFootnotesコンポーネントです。

Examples

Default

Source Code

<ol class="ui:footnotes">
  <li>注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト</li>
  <li>注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト</li>
  <li>注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト</li>
</ol>

Makers

Source Code

<ol class="ui:footnotes" data-marker="number">
  <li>注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト</li>
  <li>注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト</li>
  <li>注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト</li>
</ol>

Sizes

Source Code

<div class="grid gap-4">
  <ol class="ui:footnotes">
    <li class="ui:text">注釈テキスト注釈テキスト<a href="#">注釈テキスト<ui-icon data-icon="external-link" aria-label="別ウィンドウで開きます"></ui-icon></a>注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト</li>
  </ol>
  <ol class="ui:footnotes" data-size="medium">
    <li class="ui:text">注釈テキスト注釈テキスト<a href="#">注釈テキスト<ui-icon data-icon="external-link" aria-label="別ウィンドウで開きます"></ui-icon></a>注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト</li>
    <li class="ui:text">注釈テキスト注釈テキスト<a href="#">注釈テキスト<ui-icon data-icon="external-link" aria-label="別ウィンドウで開きます"></ui-icon></a>注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト</li>
    <li class="ui:text">テキストが入ります。テキストが入ります。<a href="#" target="_blank">リンクテキスト<ui-icon data-icon="external-link" aria-label="別ウィンドウで開きます"></ui-icon></a>テキストが入ります。</li>
  </ol>
</div>

Variants

属性	要素	値	効果
data-marker	root	number	マーカー種別の指定
data-size	root	medium	サイズの指定