基础

Card 内容卡片

用于内容卡片场景的 MoriUI 组件。

资源

导入

import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'moriui'

组合方式

用 Header、Title、Description、Action、Content 与 Footer 形成稳定内容层级。

间距变量

Card 使用公开局部 Token --card-spacing；size 会设置默认值，调用方可按场景覆盖。

RTL

卡片布局继承 dir，标题、说明和动作在 RTL 文本流中保持正确顺序。

示例

概览

完整卡片结构与操作。

共 12 个组件等待评审。

<script setup lang="ts">
  import {
    Button,
    Card,
    CardAction,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle
  } from 'moriui'
</script>

<template>
  <Card class="w-full max-w-sm">
    <CardHeader>
      <CardTitle>设计评审</CardTitle><CardDescription>确认本周组件交付范围。</CardDescription><CardAction>
        <Button size="sm" variant="ghost">
          查看
        </Button>
      </CardAction>
    </CardHeader><CardContent>
      <p class="text-sm text-muted-foreground">
        共 12 个组件等待评审。
      </p>
    </CardContent><CardFooter>
      <Button size="sm">
        开始评审
      </Button>
    </CardFooter>
  </Card>
</template>

小尺寸

size=sm 适配紧凑布局。

3 项待处理

<script setup lang="ts">
  import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle
  } from 'moriui'
</script>

<template>
  <Card size="sm" class="w-full max-w-xs">
    <CardHeader><CardTitle>紧凑卡片</CardTitle><CardDescription>适合侧栏与密集布局。</CardDescription></CardHeader><CardContent>3 项待处理</CardContent>
  </Card>
</template>

自定义间距

覆盖 --card-spacing 调整密度。

更宽松的内容区域。

<script setup lang="ts">
  import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle
  } from 'moriui'
</script>

<template>
  <Card class="w-full max-w-sm [--card-spacing:1.5rem]">
    <CardHeader><CardTitle>自定义间距</CardTitle><CardDescription>通过公开局部 Token 调整内容密度。</CardDescription></CardHeader><CardContent>更宽松的内容区域。</CardContent>
  </Card>
</template>

边到边内容

媒体区域可以跨越内容插槽的内边距。

跨越内容内边距的媒体区域

<script setup lang="ts">
  import {
    Card,
    CardFooter,
    CardHeader,
    CardTitle
  } from 'moriui'
</script>

<template>
  <Card class="w-full max-w-sm">
    <CardHeader><CardTitle>边到边内容</CardTitle></CardHeader><div class="border-y bg-muted px-4 py-6 text-sm text-muted-foreground">
      跨越内容内边距的媒体区域
    </div><CardFooter>最近更新于今天</CardFooter>
  </Card>
</template>

图片

媒体、标题与描述组成内容卡片。

<script setup lang="ts">
  import {
    Card,
    CardDescription,
    CardHeader,
    CardTitle
  } from 'moriui'
</script>

<template>
  <Card class="w-full max-w-sm">
    <div class="h-32 bg-gradient-to-br from-muted to-secondary" role="img" aria-label="抽象渐变封面" /><CardHeader><CardTitle>Nova 工作台</CardTitle><CardDescription>低调、清晰、专注内容。</CardDescription></CardHeader>
  </Card>
</template>

RTL

卡片在 RTL 页面中保持语义结构。

آخر تحديث اليوم

<script setup lang="ts">
  import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle
  } from 'moriui'
</script>

<template>
  <Card dir="rtl" class="w-full max-w-sm">
    <CardHeader><CardTitle>بطاقة المشروع</CardTitle><CardDescription>محتوى من اليمين إلى اليسار.</CardDescription></CardHeader><CardContent>آخر تحديث اليوم</CardContent>
  </Card>
</template>

API

属性	类型	默认值	说明
Card size	`'default' \| 'sm'`	`'default'`	卡片的密度尺寸，并同步设置 data-size。
CardHeader class	`HTMLAttributes["class"]`	`undefined`	合并到卡片页眉的调用方类。
CardTitle class	`HTMLAttributes["class"]`	`undefined`	合并到卡片标题的调用方类。
CardDescription class	`HTMLAttributes["class"]`	`undefined`	合并到卡片说明的调用方类。
CardAction class	`HTMLAttributes["class"]`	`undefined`	合并到页眉操作区的调用方类。
CardContent class	`HTMLAttributes["class"]`	`undefined`	合并到卡片内容区的调用方类。
CardFooter class	`HTMLAttributes["class"]`	`undefined`	合并到卡片页脚的调用方类。

无障碍说明

Card 是布局容器，不自动建立 landmark；按内容需要使用 aria-labelledby 或在外围选择 article/section。标题层级应与页面大纲一致。

关联组件

比例容器信息条目