リボン コンポーネント

リボン コンポーネントは、コンテンツの上の情報を簡単に表示するための方法です。 .ribbon-warpper は、position:relative; を持つ要素内にある必要があります。 デモの目的でこのドキュメント ページでは、リボンを常に <div class="position-relative p-3 bg-gray" style="height: 180px"></div> 内に配置しますが、カード、テーブル行などに配置することができます。

リボンには、より多くのテキストを表示したり、より大きなフォントサイズを使用したりするための 3 つのサイズがあります。デフォルト（.ribbon-wrapper のみ）、大（.ribbon-wrapper と .ribbon-lg）、特大（.ribbon-wrapper と .ribbon-xl）。

マークアップの例
リボン
リボンのデフォルト
.ribbon-wrapper.ribbon-lg .ribbon 
  <div class="ribbon-wrapper">
    <div class="ribbon bg-primary">
      Ribbon
    </div>
  </div>
リボン サイズの変更
リボン
リボンのデフォルト
.ribbon-wrapper.ribbon-lg .ribbon
リボン ラージ
リボン ラージ
.ribbon-wrapper.ribbon-lg .ribbon
リボン エクストラ ラージ
リボン エクストラ ラージ
.ribbon-wrapper.ribbon-xl .ribbon 
  <div class="ribbon-wrapper">
    <div class="ribbon bg-primary">
      Ribbon
    </div>
  </div>

  <div class="ribbon-wrapper ribbon-lg">
    <div class="ribbon bg-info">
      Ribbon Large
    </div>
  </div>

  <div class="ribbon-wrapper ribbon-xl">
    <div class="ribbon bg-secondary">
      Ribbon Extra Large
    </div>
  </div>
テキスト サイズのバリエーション
リボン
リボン ラージ
大テキスト付き
.ribbon-wrapper.ribbon-lg .ribbon.text-lg
リボン
リボン エクストラ ラージ
大テキスト付き
.ribbon-wrapper.ribbon-xl .ribbon.text-lg
リボン
リボン エクストラ ラージ
特大テキスト付き
.ribbon-wrapper.ribbon-xl .ribbon.text-xl 
<div class="ribbon-wrapper ribbon-lg">
  <div class="ribbon bg-success text-lg">
    Ribbon
  </div>
</div>

<div class="ribbon-wrapper ribbon-xl">
  <div class="ribbon bg-warning text-lg">
    Ribbon
  </div>
</div>

<div class="ribbon-wrapper ribbon-xl">
  <div class="ribbon bg-danger text-xl">
    Ribbon
  </div>
</div>