Card

カード型のボックスに使用するCSS

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

  • DEMO
  • card xs
    card xm
    card xl

使い方

ベースクラスとサイズ指定で使用できます。
カード自体の背景色は[#fff]を指定しているので、背景が白の場合は別途色を変更してください。

  • CSS
.card {
    border-radius: var(--radius-xm);
    background: #fff;
  }
  .card.xs {padding: 8px;}
  .card.xm {padding: 16px;}
  .card.xl {padding: 24px;}

  .card.box {border-radius: var(--radius-xs);}

  @media screen and (max-width: 768px) {
    .card.XS_xs {padding: 8px;}
    .card.XS_xm {padding: 16px;}
    .card.XS_xl {padding: 24px;}
  }

Box

角のアールが緩いBOXタイプ

  • DEMO
  • card box
    card box
    card box