{"slug":"card","mode":"scenarios","examples":[{"id":"card-ex-1","title":"边框卡片","titleSrc":"contract","desc":"","html":"<div class=\"kole-card kole-card--bordered\" style=\"padding:16px\">\n  <div class=\"kole-card__header\">\n    <div class=\"kole-card__title\">边框卡片</div>\n  </div>\n  <div class=\"kole-card__body\" style=\"margin-top:12px\">用于轻量内容承载，1px 边框区分卡片边界。</div>\n</div>","preview":{"show":[[0,2,0]],"hide":[[0,0],[0,1],[0,2,1],[0,2,2]],"mode":"scenarios"},"previewSafe":true,"previewUnsafeReasons":[],"source":"demo-mapped","code":{"html":"<div class=\"kole-card kole-card--bordered\" style=\"padding:16px\">\n  <div class=\"kole-card__header\">\n    <div class=\"kole-card__title\">边框卡片</div>\n  </div>\n  <div class=\"kole-card__body\" style=\"margin-top:12px\">用于轻量内容承载，1px 边框区分卡片边界。</div>\n</div>","jsx":"import { KoleCard } from 'kole-ui/react';\n\n<>\n<KoleCard bordered>边框卡片 用于轻量内容承载，1px 边框区分卡片边界。</KoleCard>\n</>","vue3":"import { KoleCard } from 'kole-ui/vue3';\n\n<template>\n<KoleCard bordered>边框卡片 用于轻量内容承载，1px 边框区分卡片边界。</KoleCard>\n</template>","vue2":"import { KoleCard } from 'kole-ui/vue2';\n\n<template>\n<KoleCard bordered>边框卡片 用于轻量内容承载，1px 边框区分卡片边界。</KoleCard>\n</template>"},"notes":[]},{"id":"card-ex-2","title":"阴影卡片","titleSrc":"contract","desc":"","html":"<div class=\"kole-card kole-card--shadowed\" style=\"padding:24px\">\n  <div class=\"kole-card__header\">\n    <div class=\"kole-card__title\">阴影卡片</div>\n  </div>\n  <div class=\"kole-card__body\" style=\"margin-top:12px\">通过低阴影表现层级浮起，适合突出展示类内容。</div>\n</div>","preview":{"show":[[0,2,1]],"hide":[[0,0],[0,1],[0,2,0],[0,2,2]],"mode":"scenarios"},"previewSafe":true,"previewUnsafeReasons":[],"source":"demo-mapped","code":{"html":"<div class=\"kole-card kole-card--shadowed\" style=\"padding:24px\">\n  <div class=\"kole-card__header\">\n    <div class=\"kole-card__title\">阴影卡片</div>\n  </div>\n  <div class=\"kole-card__body\" style=\"margin-top:12px\">通过低阴影表现层级浮起，适合突出展示类内容。</div>\n</div>","jsx":"import { KoleCard } from 'kole-ui/react';\n\n<>\n<KoleCard shadowed>阴影卡片 通过低阴影表现层级浮起，适合突出展示类内容。</KoleCard>\n</>","vue3":"import { KoleCard } from 'kole-ui/vue3';\n\n<template>\n<KoleCard shadowed>阴影卡片 通过低阴影表现层级浮起，适合突出展示类内容。</KoleCard>\n</template>","vue2":"import { KoleCard } from 'kole-ui/vue2';\n\n<template>\n<KoleCard shadowed>阴影卡片 通过低阴影表现层级浮起，适合突出展示类内容。</KoleCard>\n</template>"},"notes":[]},{"id":"card-ex-3","title":"含标题与操作区","titleSrc":"contract","desc":"","html":"<div class=\"kole-card kole-card--bordered\" style=\"padding:24px\">\n  <div class=\"kole-card__header\">\n    <div class=\"kole-card__title\">客户详情</div>\n    <div class=\"kole-card__extra\" role=\"button\" tabindex=\"0\">查看全部</div>\n  </div>\n  <div class=\"kole-card__body\" style=\"margin-top:12px\">含标题区与右侧操作区，内容区展示客户关键信息。</div>\n  <div class=\"kole-card__actions\" style=\"margin-top:16px\">\n    <button style=\"border:1px solid var(--color-border);background:var(--color-bg-card);border-radius:4px;padding:4px 12px;cursor:pointer;color:var(--color-text-body)\">取消</button>\n    <button style=\"background:var(--color-brand);border:none;border-radius:4px;padding:4px 12px;cursor:pointer;color:var(--color-bg-card)\">确定</button>\n  </div>\n</div>","preview":{"show":[[0,2,2]],"hide":[[0,0],[0,1],[0,2,0],[0,2,1]],"mode":"scenarios"},"previewSafe":true,"previewUnsafeReasons":[],"source":"demo-mapped","code":{"html":"<div class=\"kole-card kole-card--bordered\" style=\"padding:24px\">\n  <div class=\"kole-card__header\">\n    <div class=\"kole-card__title\">客户详情</div>\n    <div class=\"kole-card__extra\" role=\"button\" tabindex=\"0\">查看全部</div>\n  </div>\n  <div class=\"kole-card__body\" style=\"margin-top:12px\">含标题区与右侧操作区，内容区展示客户关键信息。</div>\n  <div class=\"kole-card__actions\" style=\"margin-top:16px\">\n    <button style=\"border:1px solid var(--color-border);background:var(--color-bg-card);border-radius:4px;padding:4px 12px;cursor:pointer;color:var(--color-text-body)\">取消</button>\n    <button style=\"background:var(--color-brand);border:none;border-radius:4px;padding:4px 12px;cursor:pointer;color:var(--color-bg-card)\">确定</button>\n  </div>\n</div>","jsx":"import { KoleCard } from 'kole-ui/react';\n\n<>\n<KoleCard bordered extra=\"查看全部\" actions=\"取消 确定\">客户详情 含标题区与右侧操作区，内容区展示客户关键信息。</KoleCard>\n</>","vue3":"import { KoleCard } from 'kole-ui/vue3';\n\n<template>\n<KoleCard bordered>\n  <template #extra>查看全部</template>\n  <template #actions>取消 确定</template>\n</KoleCard>\n</template>","vue2":"import { KoleCard } from 'kole-ui/vue2';\n\n<template>\n<KoleCard bordered>\n  <template #extra>查看全部</template>\n  <template #actions>取消 确定</template>\n</KoleCard>\n</template>"},"notes":[]}]}