ラベル／Label

情報の識別子を付与したり、分類を示す際に利用します。

<div class="c-labelGroup">
  <span class="c-label">
    <span class="c-label__text">ラベルテキスト</span>
  </span>
  <span class="c-label">
    <span class="c-label__text">ラベルテキスト</span>
  </span>
  <span class="c-label">
    <span class="c-label__text">ラベルテキスト</span>
  </span>
</div>

原則

基本的に他のコンポーネントの中に含める形で使用します。その場合のスタイル（サイズバリエーション、リンクやアイコンの有無）はコンポーネントごとの原則に準じます。

パターン

サイズ

ラベルサイズの指定が可能です。

<div class="c-labelGroup">
  <span class="c-label c-label--sizeS">
    <span class="c-label__text">ラベルテキスト</span>
  </span>
  <span class="c-label c-label--sizeS">
    <span class="c-label__text">ラベルテキスト</span>
  </span>
  <span class="c-label c-label--sizeS">
    <span class="c-label__text">ラベルテキスト</span>
  </span>
</div>
<div class="c-labelGroup">
  <span class="c-label c-label">
    <span class="c-label__text">ラベルテキスト</span>
  </span>
  <span class="c-label c-label">
    <span class="c-label__text">ラベルテキスト</span>
  </span>
  <span class="c-label c-label">
    <span class="c-label__text">ラベルテキスト</span>
  </span>
</div>
<div class="c-labelGroup">
  <span class="c-label c-label--sizeL">
    <span class="c-label__text">ラベルテキスト</span>
  </span>
  <span class="c-label c-label--sizeL">
    <span class="c-label__text">ラベルテキスト</span>
  </span>
  <span class="c-label c-label--sizeL">
    <span class="c-label__text">ラベルテキスト</span>
  </span>
</div>

リンクあり

ラベルにリンクを設定することが可能です。

<div class="c-labelGroup">
  <a href="/" class="c-label c-label--sizeS">
    <span class="c-label__text">ラベルテキスト</span>
  </a>
  <a href="/" class="c-label c-label--sizeS">
    <span class="c-label__text">ラベルテキスト</span>
  </a>
  <a href="/" class="c-label c-label--sizeS">
    <span class="c-label__text">ラベルテキスト</span>
  </a>
</div>
<div class="c-labelGroup">
  <a href="/" class="c-label">
    <span class="c-label__text">ラベルテキスト</span>
  </a>
  <a href="/" class="c-label">
    <span class="c-label__text">ラベルテキスト</span>
  </a>
  <a href="/" class="c-label">
    <span class="c-label__text">ラベルテキスト</span>
  </a>
</div>
<div class="c-labelGroup">
  <a href="/" class="c-label c-label--sizeL">
    <span class="c-label__text">ラベルテキスト</span>
  </a>
  <a href="/" class="c-label c-label--sizeL">
    <span class="c-label__text">ラベルテキスト</span>
  </a>
  <a href="/" class="c-label c-label--sizeL">
    <span class="c-label__text">ラベルテキスト</span>
  </a>
</div>