React 组件

UGCard 卡片

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

导入方式

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

tsx

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

变体预览

基础信息卡片与带标签的强调卡片。

团队项目

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

上次更新时间：2 分钟前

团队增强包

状态展示

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

支付方式

默认账单卡片

Visa 尾号 2048

已绑定

归档项目

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

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

尺寸展示

通过容器宽度与内边距适配摘要卡与详情卡。

紧凑摘要卡

适合仪表盘小卡片

宽版详情卡

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

代码示例

卡片推荐通过组合子组件构建结构，而不是单一 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>
  )
}

Props

属性	类型	默认值	说明
className	string	—	UGCard 与其子组件都支持自定义布局与外观。
children	ReactNode	—	通过组合 Header / Content / Footer 构建结构。