カードをスタイルする.
カードにサイトに合う見た目を付けます。カードのTypeによる配色、Styleパネルによる角丸とシャドウです。最終的に、機能、チームメンバー、料金用にロー全体で繰り返せるカードができます。ページへのカード配置は先にカードの追加をご覧ください。
動画では下記の手順に従います。カードにライトな見た目、丸い角、柔らかいシャドウを付けています。
カードをスタイルする
- カードにホバーしてMoreを開き、Settingsを選びます。
- 対象はTypeで、Lightを選びます。
- 開くのはStyleパネルです。
- 設定するのはBorder radiusで、8にします。
- 設定するのはDrop shadowで、2にします。
- クリックするのはSaveです。
表示内容
カードはライトな背景、丸い角、柔らかいシャドウを持ちます。Headerバーは上部に配置され、Titleはボディを開き、内部に追加したエレメントが下に続きます。
色を付けるのはTypeで、ヘッダーだけでなくカード全体です。Primary、Secondary、Success、Info、Warning、Danger、Darkはカードをそのテーマ色で埋め、テキストを白にします。Lightは通常テキストのライトな背景にします。Defaultはカードをテーマに任せます。
設定
| 設定 | 場所 | 動作 |
|---|---|---|
| Header | General | カード上部のバー内のテキスト。バーなしの場合は空にします |
| Title | General | カードボディ上部の見出し |
| Type | General | カード全体の配色。デフォルトはDefault |
| Background、Font color | Style | 独自の色。TypeはDefault |
| Border radius | Style | 角丸(ピクセル単位) |
| Drop shadow | Style | 奥行き。1〜5 |
| Border(ボックスモデル)、Border style、Border color | Style | 1辺以上の枠線 |
カードパターン
- Flat card：Border style Solid、ライトなBorder color、Border radiusは4、シャドウなし。
- Elevated card：Drop shadowは2、Border style None、Border radiusは8。
- Highlighted card：ボックスモデルのBorderの左辺を4に設定し、Border style Solid、アクセントのBorder color。
- Card that lifts：Drop shadowはStyleでは1に、Hover styleでは4にします。詳しくはホバーでエレメントを反応させるをご覧ください。
ロー内のカード
機能カード、チームメンバー、料金のグリッド用：
- ローを追加し、3等分または4等分のカラムのレイアウトを選びます。
- 各カラムにカードを追加し、すべてのカードに同じTypeとStyleの値を設定します。
- ローのMoreメニューを開き、Settingsを選んでEqual-height columnsをオンにします。
カラムは揃いますが、各カードの高さはコンテンツのままです。各カードのテキストはほぼ同じ長さにして、カードの下端を揃えます。料金表では、おすすめプランを別のTypeや深いDrop shadowで目立たせます。
スタイルが表示されない場合
- StyleパネルのBackgroundやFont colorが効きません。 TypeがDefault以外の場合はテーマクラスでカードの色を設定し、Styleパネルより優先されます。TypeをDefaultにして独自の色を選びます。
- 色付きカードの白テキストが読みにくいです。多くのテーマのWarningとInfoの色は淡く、これらのタイプは常に白テキストを設定します。より濃いTypeを選ぶか、通常のテキスト色を保つLightを選びます。
- シャドウが表示されません。 Drop shadowが0で、シャドウなしを意味します。1以上に設定します。
次のステップ
- カードの追加：カードを追加してエレメントで埋める。
- ホバーでエレメントを反応させる：訪問者が指したらカードを持ち上げる。
- ブランドカラーの使用：カードの色をサイト全体に合わせる。