タグラベル
概要
事案のカテゴリ及びステータスを表すのに使用します。
_modules.scss にて適時追加してください。
デザイン
ルール
| 色の組み合わせ | デザインの際にコントラストをAAに準拠しつつ決定してください。 |
|---|---|
| 文字サイズ | $font-size-sm / $font-size-xs（最小幅） |
| 文字カラー | 白（枠） / メイン / サブ / ポイント / 特殊カラー（用途によって増やします） |
| 幅 | 通常幅（$btn-size-base：左右余白 $space-8） 文字成り行き（auto：左右余白 $space-4） 最小幅（$btn-size-sm：左右余白 $space-2） |
展開例
- 通常幅：
-
サンプル1 サンプル2 サンプル3 サンプル4
<span class="label">サンプル1</span>
- 成り行き幅：
-
sample 事例 サンプル 幅AUTOサイズでの展開
<span class="label w-auto">サンプル1</span>
- 最小幅：
-
status1 status2 status3 status4
<span class="label w-xs font-size-xs">サンプル1</span>
改変対象ファイル
- CSS:
- _modules.scss 内に改変対象箇所があります。