商品詳細ページのUIコンポーネントデモ
Badges（バッジ）
製品の状態やカテゴリを示すためのバッジです。
新商品 在庫あり 限定版 売り切れTable（テーブル）
商品の価格や詳細を一覧で表示します。
| 商品名 | 価格 | 在庫状況 |
|---|---|---|
| 製品A | ¥2,500 | 在庫あり |
| 製品B | ¥1,800 | 売り切れ |
| 製品C | ¥3,200 | 限定版 |
Cards（カード）
カードは、製品情報やプロモーションを表示するために使われます。
製品1
この製品は非常に人気があります。
製品2
高品質な素材を使用しており、長持ちします。
製品3
スタイリッシュで便利な製品です。
Images（画像）
レスポンシブ画像を表示します。
角が丸い画像
丸い画像
境界線付き画像
Typography（タイポグラフィ）
強調テキスト、斜体テキスト、下線付きテキスト、小さなテキストなど、タイポグラフィのスタイルが簡単に適用できます。
ハイライトされたテキストもサポートされています。
Borders（ボーダー）
ボーダーを追加して要素を区切ります。
これはボーダーが適用されたボックスです。
これは上部にボーダーが追加されたボックスです。
Colors（カラー）
さまざまな背景色とテキスト色を使用できます。
青色の背景と白いテキスト
灰色の背景と白いテキスト
緑色の背景と白いテキスト
Embeds（埋め込み）
YouTube動画などを埋め込むことができます。
Grid System（グリッドシステム）
Bootstrapのグリッドシステムを使用して、レスポンシブなレイアウトを作成できます。
カラム1（1/3幅）
カラム2（1/3幅）
カラム3（1/3幅）
カラム1（1/2幅）
カラム2（1/2幅）
カラム1（1/4幅）
カラム2（1/2幅）
カラム3（1/4幅）
カラム1（12/12幅）
Text（テキスト）
テキストのスタイルや色を変更できます。
青いテキスト
灰色のテキスト
緑色のテキスト
