card

カード型ボックス

詳しい導入事例は導入方法を参照してください。

  • DEMO
  • Box
  • card xs
    card xm
    card xl
  • card box
    card box
    card box

使い方

カード自体の背景色は[#fff]を指定しているので、背景が白の場合は別途色を変更してください。

  • CSS
[data-card] {
  border-radius: var(--radius-xm);
  background: var(--bg-paper);
  overflow: hidden;
}
[data-card*="xs"] {padding: 8px;}
[data-card*="xm"] {padding: 16px;}
[data-card*="xl"] {padding: 24px;}
[data-card*="box"] {border-radius: var(--radius-xs);}
@media screen and (max-width: 768px) {
  [data-card*="XS_xs"] {padding: 8px;}
  [data-card*="XS_xm"] {padding: 16px;}
  [data-card*="XS_xl"] {padding: 24px;}
}