左ボーダー強調インフォカード
左ボーダー強調インフォカードは、カードの 左端に4pxの太いアクセント線 を入れ、ヒント・注意などの種別を一目で伝える告知ボックスです。このサンプルは border-left:4px solid で縦線を引き、 border-color を修飾子（ --tip は青、 --warn は赤）で切り替えるBEM設計にな…
解説
左ボーダー強調インフォカードは、カードの左端に4pxの太いアクセント線を入れ、ヒント・注意などの種別を一目で伝える告知ボックスです。このサンプルは border-left:4px solid で縦線を引き、border-color を修飾子（--tip は青、--warn は赤）で切り替えるBEM設計になっています。見出し strong は letter-spacing を広げて小さく置き、本文は line-height:1.7 で読みやすくしています。box-shadow はごく薄く、紙片が浮いたような軽い立体感です。
使う場面
- 記事内の補足ヒントや豆知識ボックス
- フォームやマニュアルの注意喚起
- 料金や仕様ページの「お知らせ」「重要」表示
種別を増やすときは info-c--success のように修飾子を足し、border-color と見出し色を同系色で揃えるだけで展開できます。色だけで意味を伝えると色覚に配慮しづらいため、必ず「ヒント」「注意」のような見出しテキストを併記してください。本文の文字色（#5c5c6e）は背景とのコントラストを確保し、長文になりすぎないよう1カードに1つの用件へ絞ると、視認性が保てます。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
色のバリエーションを増やすにはどうしますか
info-c--success のような修飾クラスを追加し、border-colorと見出しstrongの色を同系色で指定すれば新しい種別を増やせます。BEM修飾子で管理しているため、HTMLのクラスを差し替えるだけで色違いに展開できます。
色だけで種別を伝えても大丈夫ですか
色だけに頼るのは避けてください。色覚に差があると区別しづらいため、サンプルのように「ヒント」「注意」といった見出しテキストを必ず添えると、誰にでも種別が伝わります。