React 组件

UGCard 卡片

UGCard 提供稳定的信息承载结构，适合用于概览信息、营销模块与表单面板。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx
import { UGCard, UGCardHeader, UGCardTitle, UGCardDescription, UGCardContent, UGCardFooter } from '@ug666/ui-react'

变体预览

default、elevated、subtle 与 ghost 对应四种公共承载层级。

跨区域协作空间的权限配置与发布状态

当前共有 12 个活跃项目正在同步。

上次更新时间：2 分钟前

团队增强包

推荐

升级后可获得更完整的协作与管理能力。

每月额外 5000 次智能调用额度

次级摘要

适合嵌入主面板的弱层级信息。

透明分组

保留结构，不重复绘制容器边界。

状态展示

用于表达升级、支付或完成状态。

支付方式

默认账单卡片

Visa 尾号 2048
已绑定

归档项目

只读状态，不允许继续编辑。

项目已于 2026-04-01 冻结。

尺寸展示

size 统一控制卡片各区域的内容密度，容器宽度仍由页面布局决定。

紧凑摘要卡

适合仪表盘小卡片

宽版详情卡

适合承载更多说明、统计图和表单操作。

代码示例

卡片推荐通过组合子组件构建结构，而不是单一 props 配置。

tsx
import { UGButton, UGCard, UGCardContent, UGCardDescription, UGCardFooter, UGCardHeader, UGCardTitle } from '@ug666/ui-react'

export function BillingCard() {
  return (
    <UGCard className="max-w-md">
      <UGCardHeader>
        <UGCardTitle>升级专业版</UGCardTitle>
        <UGCardDescription>解锁团队协作、审计日志与高级主题能力。</UGCardDescription>
      </UGCardHeader>
      <UGCardContent>
        <p className="text-sm text-text-secondary">首年价格 ¥299 / 用户。</p>
      </UGCardContent>
      <UGCardFooter className="justify-end gap-2">
        <UGButton variant="outline">稍后再说</UGButton>
        <UGButton>立即升级</UGButton>
      </UGCardFooter>
    </UGCard>
  )
}

属性

属性类型默认值说明
variant'default' | 'elevated' | 'subtle' | 'ghost''default'控制卡片的公共视觉层级；页面布局和品牌表达仍由使用方组合。
size'sm' | 'md' | 'lg''md'统一控制 Header、Content 与 Footer 的内容密度。
classNamestring—用于业务布局扩展，不建议用来重做卡片内边距。
childrenReactNode—通过组合 Header / Content / Footer 构建结构。