ui:heading

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

Examples

Sizes

Source Code

<div class="grid gap-6">
  <h1 class="ui:heading" data-size="1">人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは</h1>
  <h1 class="ui:heading" data-size="2">人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは</h1>
  <h1 class="ui:heading" data-size="3">人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは</h1>
  <h1 class="ui:heading" data-size="4">人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは</h1>
  <h1 class="ui:heading" data-size="5">人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは</h1>
  <h1 class="ui:heading" data-size="6">人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは</h1>
  <h1 class="ui:heading" data-size="7">人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは</h1>
  <h1 class="ui:heading" data-size="8">人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは</h1>
</div>

Variants

Source Code

<div class="grid gap-4">
  <h1 class="ui:heading" data-size="5" data-variant="primary">人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは</h1>
</div>

Prefix / Suffix Icon

Source Code

<div class="grid gap-8">
  <h1 class="ui:heading" data-size="5">
    <div class="ui:heading__prefix">
      <ui-icon data-icon="calendar"></ui-icon>
    </div>
    人類社会のすべての構成員の固有の尊厳
  </h1>
  <h1 class="ui:heading" data-size="4">
    <div class="ui:heading__prefix">
      <ui-icon data-icon="calendar"></ui-icon>
    </div>
    人類社会のすべての構成員の固有の尊厳
  </h1>
  <h1 class="ui:heading" data-size="3">
    <div class="ui:heading__prefix">
      <ui-icon data-icon="calendar"></ui-icon>
    </div>
    人類社会のすべての構成員の固有の尊厳
  </h1>
  <h1 class="ui:heading" data-size="3">
    人類社会のすべての構成員の固有の尊厳
    <div class="ui:heading__suffix">
      <ui-icon data-icon="calendar"></ui-icon>
    </div>
  </h1>
  <h1 class="ui:heading" data-size="3" data-variant="primary">
    <div class="ui:heading__prefix">
      <ui-icon data-icon="calendar"></ui-icon>
    </div>
    人類社会のすべての構成員の固有の尊厳
  </h1>
</div>

Alignment

center, right 指定時に、テキストの折り返しが発生する場合は、常に左寄せ表示となります。

Source Code

<div class="grid gap-4">
  <h1 class="ui:heading" data-size="3" data-align="left">人類社会のすべての構成員の固有の尊厳</h1>
  <h1 class="ui:heading" data-size="3" data-align="center">人類社会のすべての構成員の固有の尊厳</h1>
  <h1 class="ui:heading" data-size="3" data-align="right">人類社会のすべての構成員の固有の尊厳</h1>
</div>

Variants

属性	要素	値	効果
data-size	root	1 / 2 / 3 / 4 / 5 / 6 / 7 / 8	サイズの指定
data-variant	root	1	バリエーションの指定
data-align	root	left / center / right	左右中央寄せの指定

Notes

• レイアウトを組みやすくするため、テキストの half-leading を除外しています。
• 複雑なデザインを持つ見出しUIが必要な場合は、無理に ui:heading コンポーネントで賄わず、別コンポーネントを作成して下さい。
• Noto fontは、テキスト上部のhalf-leadingが大きいため、テキストが1pxほど下にズレて表示されます。
  • アイコン付与時にそれがズレて見えるため、prefix / suffix 要素の子要素の位置をスタイルで調整しています。