Card

カード型の区分けを行う際に設置する汎用的なレイアウト CSS。

INFO

v8 で角丸の設定 .is-radius-{size} は radius に分離しました。

Table of Contents

Basic

  • .card でコンテンツを包みます
  • .card には position: relative; display: block; overflow: hidden; が付与
カード
<div class="card">カード</div>

Background

  • .is-bg-1 .is-bg-2 .is-bg-3 は背景を変数色で塗れます
カード
カード
カード
<div class="card is-bg-1">カード</div>
<div class="card is-bg-2">カード</div>
<div class="card is-bg-3">カード</div>

Outline

  • .is-outline で周囲にボーダーを引けます
カード
<div class="card is-outline">カード</div>

Floating

  • .is-floating で浮いた効果を付与します
  • .is-link が付与されているとホバーで影も変化します
カード
カード
<div class="card is-floating">カード</div>
<div class="card is-floating is-link">カード</div>
  • .is-link でホバーによる背景色変化が付与されます
カード
<div class="card is-link">カード</div>

Zoom

  • .is-zoom でホバーによるズーム効果が付与されます
カード
<div class="card is-zoom">カード</div>

Disabled

  • [disabled] または [aria-disabled="true"] または .is-disabled で非活性化します
  • 非活性化すると pointer-events: none; が付与されホバー効果などが打ち消されます
カード
<div class="card is-link" aria-disabled="true">カード</div>

Compatible

推奨のクラス名と同様の効果を互換のあるクラス名で得ることもできます。

推奨のクラス名互換のあるクラス名
.is-bg-1.is-bg-light .is-bg

Variables

上書きできる変数は以下の通りです。

.card {
  --card-overflow: hidden;
  --card-bg-light-bg: var(--theme-bg-1);
  --card-outline-border-width: 1px;
  --card-outline-border-color: var(--theme-bd-1);
  --card-floating-shadow-size: 0 1px 3px 0;
  --card-floating-shadow-color: var(--theme-shadow);
  --card-floating-shadow-color-alpha: 24%;
  --card-floating-link-hover-shadow-size: 0 4px 12px 0;
  --card-link-transition: ease-out 0.12s;
  --card-link-hover-bg: var(--theme-bg-2);
  --card-zoom-transform: scale(1.025);
  --card-zoom-transition: ease-out 0.12s;
}

Import

PostCSS で読み込む場合の各パスは以下となります。

@import "musubii/src/layouts/card/main.css";

v7 を再現する場合は legacy.css を追加で読み込んでください。

@import "musubii/src/layouts/card/legacy.css";