VNL Works
VNL Works
VNL Works
← Components
Download ZIPRegistry JSON
Package: tailwind-motion-kit
ui

Card

情報をまとまりで見せるカード。

cardsurfacecontentcss

Install

“壊れにくさ”優先のため、依存は増やさずに ファイルをコピーして使う 形式です。

Files

まずは下記ファイルをプロジェクトに配置してください。

required-files.md
- tailwind-motion-kit/css/00_tokens.css (css)
- tailwind-motion-kit/css/34_card.css (css)
Option A

まずは Bundle を読み込んで、動作を確認するのがおすすめです。

globals.css
/* Bundle: まずはこれが一番簡単 */
@import "./tailwind-motion-kit/css/99_bundle.css";
Option B

必要な CSS だけ読み込みたい場合はこちら。

globals.css
/* 1) CSS: グローバルCSSに追記 */
@import "./tailwind-motion-kit/css/00_tokens.css";
@import "./tailwind-motion-kit/css/34_card.css";
JavaScript

CSS-only のため初期化は不要です。

init.js
/* JS 初期化は不要です */

Snippets

Copy & paste
usage.html
<article class="mk-card"><h3 class="mk-card-title">Title</h3><p class="mk-card-body">Card body...</p></article>

Files

この部品が参照する実ファイルです。

tailwind-motion-kit/css/00_tokens.css
css
tailwind-motion-kit/css/00_tokens.css
/*!
 * Tailwind Motion Kit (mk) - Tokens
 * --------------------------------
 * 目的: 速度・距離・イージング等の“モーション言語”を統一し、
 *       パーツを増やしても品位が崩れない状態を作ります。
 *
 * 使い方:
 *  - :root の変数を上書きするだけで全体の動きを一括調整できます。
 *  - 個別要素は style="" か data-mk-* 属性で上書きできます（JSがある場合）。
 */

:root {
  /* --- イージング（加減速） --- */
  --mk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --mk-ease-in: cubic-bezier(0.32, 0, 0.67, 0);
  --mk-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* “少しだけ遊び”が欲しい時用（多用は上品さを損ねます） */
  --mk-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- 時間 --- */
  --mk-duration-fast: 160ms;
  --mk-duration-medium: 280ms;
  --mk-duration-slow: 600ms;
  --mk-duration-slower: 900ms;

  /* コンポーネントが参照する“共通デフォルト” */
  --mk-duration: var(--mk-duration-medium);
  --mk-ease: var(--mk-ease-out);
  --mk-delay: 0ms;

  /* --- 移動量 --- */
  --mk-distance-1: 6px;
  --mk-distance-2: 12px;
  --mk-distance-3: 20px;
  --mk-distance: var(--mk-distance-2);

  /* --- ぼかし --- */
  --mk-blur-0: 0px;
  --mk-blur-1: 6px;
  --mk-blur-2: 10px;
  --mk-blur: var(--mk-blur-1);

  /* --- 影（浮遊感） --- */
  --mk-shadow-lift: 0 12px 30px rgba(0, 0, 0, 0.14);
  --mk-shadow-soft: 0 10px 22px rgba(0, 0, 0, 0.10);

  /* --- アンダーライン --- */
  --mk-underline-thickness: 2px;
  --mk-underline-offset: 0.2em;

  /* --- フォーカスリング --- */
  --mk-ring-color: rgba(59, 130, 246, 0.35);
  --mk-ring-size: 3px;

  /* --- コントロール（button / input / select） --- */
  --mk-control-radius: 12px;
  --mk-control-bg: rgba(255, 255, 255, 0.05);
  --mk-control-border: rgba(255, 255, 255, 0.16);

  /* --- スケルトン（ロード中） --- */
  --mk-skeleton-a: rgba(0, 0, 0, 0.06);
  --mk-skeleton-b: rgba(0, 0, 0, 0.12);
  --mk-skeleton-speed: 1250ms;

  /* --- スピナー --- */
  --mk-spinner-size: 1.2em;
  --mk-spinner-border: 2px;

  /* --- テキスト分割表示 --- */
  --mk-char-step: 25ms; /* 1文字ごとの遅延 */


  /* --- ダイアログ / ドロワー --- */
  --mk-dialog-duration: var(--mk-duration-slow);
  --mk-dialog-ease: var(--mk-ease-out);
  --mk-dialog-backdrop-opacity: 0.45;
  --mk-dialog-offset: var(--mk-distance-3);
  --mk-dialog-scale-from: 0.995;
  --mk-dialog-radius: 18px;

  /* --- 折りたたみ（アコーディオン） --- */
  --mk-collapse-duration: var(--mk-duration-medium);
  --mk-collapse-ease: var(--mk-ease);

  /* --- Toast / 通知 --- */
  --mk-toast-gap: 10px;
  --mk-toast-width: min(360px, calc(100vw - 24px));
  --mk-toast-duration: var(--mk-duration-medium);
  --mk-toast-ease: var(--mk-ease-out);

  /* --- スクロール進捗（トップバー） --- */
  --mk-scroll-progress-top: 0px;
  --mk-scroll-progress-height: 3px;
  --mk-scroll-progress-ease: linear;

  /* --- ナビ下線インジケータ --- */
  --mk-nav-underline-height: 2px;
  --mk-nav-underline-radius: 999px;
  --mk-nav-duration: var(--mk-duration-medium);
  --mk-nav-ease: var(--mk-ease-out);


  /* --- UI state（idle/loading/success/error） --- */
  --mk-state-hold-success: 900ms;
  --mk-state-hold-error: 1400ms;


  /* --- Tabs --- */
  --mk-tabs-gap: 10px;
  --mk-tabs-radius: 999px;
  --mk-tabs-duration: var(--mk-duration-medium);
  --mk-tabs-ease: var(--mk-ease-out);
  --mk-tabs-underline-height: 2px;
  --mk-tabs-underline-color: currentColor;

  /* --- Tooltip --- */
  --mk-tooltip-bg: rgba(0, 0, 0, 0.82);
  --mk-tooltip-fg: #fff;
  --mk-tooltip-radius: 10px;
  --mk-tooltip-padding: 10px 12px;
  --mk-tooltip-gap: 8px;
  --mk-tooltip-shadow: 0 18px 60px rgba(0,0,0,0.35);
  --mk-tooltip-max-width: 260px;

  /* --- Stepper --- */
  --mk-stepper-gap: 14px;
  --mk-step-size: 28px;
  --mk-step-line: rgba(255, 255, 255, 0.14);
  --mk-step-done: rgba(59, 130, 246, 1);
  --mk-step-current: rgba(255, 255, 255, 0.92);
  --mk-step-todo: rgba(255, 255, 255, 0.5);

  /* --- Card --- */
  --mk-card-radius: 20px;

}

/* ライトモード対応: テーマCSS変数を参照 */
:root {
  --mk-tooltip-bg: rgba(0, 0, 0, 0.78);
  --mk-tooltip-fg: #fff;
  /* controls */
  --mk-control-fg: var(--text, #0f172a);
  --mk-control-bg: var(--card, rgba(15, 23, 42, 0.025));
  --mk-control-border: var(--border, rgba(15, 23, 42, 0.16));
  --mk-button-outline-border: var(--border-strong, rgba(15, 23, 42, 0.3));
  --mk-step-line: var(--border, rgba(0, 0, 0, 0.12));
  --mk-step-current: var(--text, #18181b);
  --mk-step-todo: var(--muted, #71717a);
  /* chip */
  --mk-chip-fg: rgba(0, 0, 0, 0.82);
  --mk-chip-bg: rgba(0, 0, 0, 0.04);
  --mk-chip-border: rgba(0, 0, 0, 0.12);
  /* toggle */
  --mk-toggle-track: rgba(0, 0, 0, 0.08);
  --mk-toggle-track-border: rgba(0, 0, 0, 0.16);
  --mk-toggle-thumb: #fff;
  /* checkbox / radio */
  --mk-check-border: rgba(0, 0, 0, 0.22);
  --mk-check-bg: rgba(0, 0, 0, 0.02);
  --mk-check-mark: #fff;
  /* card */
  --mk-card-fg: var(--text, #18181b);
  --mk-card-bg: var(--card, rgba(15, 23, 42, 0.025));
  --mk-card-border: var(--border, rgba(15, 23, 42, 0.12));
  --mk-card-muted: var(--muted, #52525b);
  --mk-card-body-fg: var(--text, #27272a);
}
.dark {
  --mk-tooltip-bg: rgba(0, 0, 0, 0.82);
  --mk-tooltip-fg: #fff;
  /* controls */
  --mk-control-fg: var(--text, rgba(255, 255, 255, 0.92));
  --mk-control-bg: var(--card, rgba(255, 255, 255, 0.05));
  --mk-control-border: var(--border, rgba(255, 255, 255, 0.16));
  --mk-button-outline-border: var(--border-strong, rgba(255, 255, 255, 0.3));
  --mk-step-line: rgba(255, 255, 255, 0.14);
  --mk-step-current: rgba(255, 255, 255, 0.92);
  --mk-step-todo: rgba(255, 255, 255, 0.5);
  /* chip */
  --mk-chip-fg: rgba(255, 255, 255, 0.92);
  --mk-chip-bg: rgba(255, 255, 255, 0.06);
  --mk-chip-border: rgba(255, 255, 255, 0.14);
  /* toggle */
  --mk-toggle-track: rgba(255, 255, 255, 0.08);
  --mk-toggle-track-border: rgba(255, 255, 255, 0.16);
  --mk-toggle-thumb: #fff;
  /* checkbox / radio */
  --mk-check-border: rgba(255, 255, 255, 0.25);
  --mk-check-bg: rgba(255, 255, 255, 0.04);
  --mk-check-mark: #fff;
  /* card */
  --mk-card-fg: #fff;
  --mk-card-bg: var(--card, rgba(255, 255, 255, 0.04));
  --mk-card-border: var(--border, rgba(255, 255, 255, 0.12));
  --mk-card-muted: var(--muted, #a1a1aa);
  --mk-card-body-fg: var(--text, rgba(255, 255, 255, 0.82));
}

/* motion減衰設定のあるユーザーには、動きを最小化して”結果”を出します */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mk-duration-fast: 0ms;
    --mk-duration-medium: 0ms;
    --mk-duration-slow: 0ms;
    --mk-duration-slower: 0ms;
    --mk-duration: 0ms;
    --mk-delay: 0ms;
  }
}
tailwind-motion-kit/css/34_card.css
css
tailwind-motion-kit/css/34_card.css
/*!
 * Tailwind Motion Kit (mk) - Card
 * ------------------------------
 * 目的: 情報をまとまりで見せるカード。
 */

.mk-card {
  border-radius: var(--mk-card-radius, 20px);
  border: 1px solid var(--mk-card-border, rgba(15, 23, 42, 0.12));
  background: var(--mk-card-bg, rgba(15, 23, 42, 0.025));
  padding: 18px;
  color: var(--mk-card-fg);
  transition: border-color var(--mk-duration) var(--mk-ease),
    transform var(--mk-duration) var(--mk-ease);
}

.mk-card:hover {
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateY(-2px);
}

.mk-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--mk-card-fg);
  margin: 0 0 6px;
}

.mk-card-meta {
  font-size: 0.78rem;
  color: var(--mk-card-muted, #52525b);
  margin: 0 0 10px;
}

.mk-card-body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--mk-card-body-fg, var(--mk-card-fg, #27272a));
}
Preview

Product update

· 3 min read

Semantic article, title, metadata, and body styles stay readable in light and dark themes.

Hover this card

Interaction preview

Hover or point at the card to preview the lifted surface and highlighted border.

Tips
  • • デザイン側は CSS 変数（tokens）で一括調整できます。
  • • 動きは “短く・小さく・同じ癖” を優先すると品位が保てます。
  • • prefers-reduced-motion を必ず考慮してください。