状態とフィードバック / 文書の状態
Banner
保存済みバージョンや比較表示など、文書の状態をページ全体に知らせます。
基本的な使い方
HTML
<div class="banner tone-warn">
<span class="banner-label">アーカイブ</span>
<span class="banner-body">これは保存済みのv1.0文書です。</span>
<a class="banner-action" href="../../">プロダクトを見る →</a>
</div>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.banner | 文書全体の状態を示す帯。 |
.banner-label / .banner-body / .banner-action | 状態ラベル、説明、次の操作。 |
使い方の注意
局所的な説明にはNoticeかCalloutを使います。状態は必ず言葉でも示します。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。