インタラクション要素
Interaction Elements
Link Components
リンク
リンクのホバーエフェクトを指定できます。
リンクコンポーネントの使い方
<!-- 矢印リンク -->
<a href="#" class="link-base arrow-link">デフォルト</a>
<a href="#" class="link-base arrow-link primary">プライマリ</a>
<!-- スライディングアンダーラインリンク -->
<a href="#" class="link-base underline-link">デフォルト</a>
<a href="#" class="link-base underline-link primary">プライマリ</a>
<!-- 中央から広がるアンダーラインリンク -->
<a href="#" class="link-base underline-link center-expand">デフォルト</a>
<!-- グラデーションホバーリンク -->
<a href="#" class="link-base gradient-link">デフォルト</a>
<a href="#" class="link-base gradient-link primary">プライマリ</a>
リンクコンポーネントは、サイト全体で一貫したスタイルのリンクを提供します。基本クラス「link-base」に、リンクタイプ（arrow-link、underline-link、gradient-link）と色のバリエーション（primary、secondary、tertiary、gray、white）を組み合わせて使用します。暗い背景上でホワイトバージョンを使用する場合は、リンク要素を「bg-dark」クラスを持つ要素で囲みます。
Forms
フォーム要素
フォームで使用する要素、レイアウトのパターンです。
基本フォーム（ラベルが上）
水平フォーム（ラベルが左）
チェックボックスとラジオボタン
横並び
縦並び
横並びフォーム要素
横幅バリエーション
インラインフォーム
入力グループ
フォームグリッドレイアウト
バリデーションエラーの例
有効なメールアドレスを入力してください
この電話番号は無効です
お問い合わせ種別を選択してください