Card

卡片：容器与媒体 / 头部 / 标题 / 描述 / 内容 / 底栏，支持多种样式、尺寸与可交互态，可组合使用也可单独取用子组件。

安装

添加组件

pnpm dlx @elyri/cli@latest add card

示例

项目卡片

渐变媒体区、项目图标、关键指标、进度与成员头像组合成一张信息丰富的项目卡片。

Tasks

In review

72%

Sprint

import type { CSSProperties } from 'react';

import { MeshGradient } from './components/elyri/MeshGradient';
import { Avatar, AvatarGroup } from './components/elyri/Avatar';
import { Button } from './components/elyri/Button';
import { Card } from './components/elyri/Card';
import { Progress } from './components/elyri/Progress';

const meshColors: [string, string, string, string] = ['#6d5bd0', '#9b6bff', '#ff8fb1', '#38bdf8'];

const mediaStyle: CSSProperties = {
  position: 'relative',
  height: 148,
};

const identityStyle: CSSProperties = { display: 'flex', alignItems: 'center', gap: 12 };

const titleStackStyle: CSSProperties = { minWidth: 0 };

const statsStyle: CSSProperties = {
  display: 'grid',
  gridTemplateColumns: 'repeat(3, 1fr)',
  gap: 12,
  padding: '4px 0 8px',
};

const statValueStyle: CSSProperties = { fontSize: 16, fontWeight: 700, lineHeight: 1.2 };

const statLabelStyle: CSSProperties = { marginTop: 2, fontSize: 12, color: 'var(--elyri-ui-muted)' };

export function Example() {
  return (
    <Card variant="elevated">
      <Card.Media style={mediaStyle}>
        <MeshGradient colors={meshColors} speed={0.5} interactive={false} style={{ height: '100%' }} />
      </Card.Media>
      <Card.Header>
        <div style={identityStyle}>
          <Avatar src="/logo.svg" alt="Aurora" shape="square" size="lg" fit="contain" />
          <div style={titleStackStyle}>
            <Card.Title>Aurora Dashboard</Card.Title>
            <Card.Description>Realtime analytics for the growth team.</Card.Description>
          </div>
        </div>
        <Card.Action>
          <Button size="sm" variant="ghost" iconOnly aria-label="More">
            ⋯
          </Button>
        </Card.Action>
      </Card.Header>
      <Card.Content>
        <div style={statsStyle}>
          <div>
            <div style={statValueStyle}>24</div>
            <div style={statLabelStyle}>Tasks</div>
          </div>
          <div>
            <div style={statValueStyle}>6</div>
            <div style={statLabelStyle}>In review</div>
          </div>
          <div>
            <div style={statValueStyle}>72%</div>
            <div style={statLabelStyle}>Sprint</div>
          </div>
        </div>
        <Progress value={72} size="sm" label="Sprint progress" />
      </Card.Content>
      <Card.Footer align="between">
        <AvatarGroup size="sm">
          <Avatar name="Ada Lovelace" />
          <Avatar name="Alan Turing" />
          <Avatar name="Grace Hopper" />
        </AvatarGroup>
        <Button size="sm">Open project</Button>
      </Card.Footer>
    </Card>
  );
}

基础用法

标题、描述、内容与底栏四段组合成完整卡片。

Ship faster

A neutral card that inherits the host theme through CSS variables.

v0.0.1StableZero deps

import { Tag } from './components/elyri/Tag';
import { Button } from './components/elyri/Button';
import { Card } from './components/elyri/Card';

export function Example() {
  return (
    <Card>
      <Card.Title>Ship faster</Card.Title>
      <Card.Description>A neutral card that inherits the host theme through CSS variables.</Card.Description>
      <Card.Content>
        <div className="demo-ui-row demo-ui-row--start">
          <Tag variant="accent">v0.0.1</Tag>
          <Tag variant="success">Stable</Tag>
          <Tag>Zero deps</Tag>
        </div>
      </Card.Content>
      <Card.Footer>
        <Button size="sm">Get started</Button>
        <Button size="sm" variant="ghost">
          Dismiss
        </Button>
      </Card.Footer>
    </Card>
  );
}

样式

outlined / elevated / filled / ghost 四种外观。

outlined

variant="outlined"

elevated

variant="elevated"

filled

variant="filled"

ghost

variant="ghost"

import { Card } from './components/elyri/Card';

const variants = ['outlined', 'elevated', 'filled', 'ghost'] as const;

export function Example() {
  return (
    <div className="demo-ui-grid">
      {variants.map((variant) => (
        <Card key={variant} variant={variant} size="sm">
          <Card.Title>{variant}</Card.Title>
          <Card.Description>variant="{variant}"</Card.Description>
        </Card>
      ))}
    </div>
  );
}

可交互

开启 interactive 后悬停上浮，配合 tabIndex 支持键盘聚焦。

Everything you need to prototype.

Advanced components and priority support.

import { Tag } from './components/elyri/Tag';
import { Card } from './components/elyri/Card';

export function Example() {
  return (
    <div className="demo-ui-grid">
      <Card interactive tabIndex={0}>
        <Card.Header>
          <Card.Title>Starter</Card.Title>
          <Card.Action>
            <Tag size="sm">Free</Tag>
          </Card.Action>
        </Card.Header>
        <Card.Description>Everything you need to prototype.</Card.Description>
      </Card>
      <Card interactive tabIndex={0}>
        <Card.Header>
          <Card.Title>Pro</Card.Title>
          <Card.Action>
            <Tag size="sm" variant="accent">
              Popular
            </Tag>
          </Card.Action>
        </Card.Header>
        <Card.Description>Advanced components and priority support.</Card.Description>
      </Card>
    </div>
  );
}

精简卡片

只取用标题与描述两个区块。

Zero config

Sensible defaults, no setup required.

import { Card } from './components/elyri/Card';

export function Example() {
  return (
    <Card>
      <Card.Title>Zero config</Card.Title>
      <Card.Description>Sensible defaults, no setup required.</Card.Description>
    </Card>
  );
}

属性

属性	类型	默认值	说明
`variant`	`'outlined' \| 'elevated' \| 'filled' \| 'ghost'`	`'outlined'`	视觉样式
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	内边距尺寸
`interactive`	`boolean`	`false`	可交互：悬停上浮、聚焦显示焦点环
`Card.Media`	`HTMLAttributes<HTMLDivElement>`	—	贴边铺满的媒体区，放在首位时与圆角对齐
`Card.Header`	`HTMLAttributes<HTMLDivElement>`	—	头部，左侧放标题与描述，右侧放 Card.Action
`Card.Action`	`HTMLAttributes<HTMLDivElement>`	—	头部右侧操作区
`Card.Title`	`HTMLAttributes<HTMLHeadingElement>`	—	标题区块
`Card.Description`	`HTMLAttributes<HTMLParagraphElement>`	—	描述区块
`Card.Content`	`HTMLAttributes<HTMLDivElement>`	—	任意内容区
`Card.Footer`	`{ align?: 'start' \| 'end' \| 'between' }`	`'start'`	底栏，通常放操作按钮；align 控制对齐
`...rest`	`HTMLAttributes`	—	其余属性透传给原生 div

Card

安装

示例

项目卡片#

Aurora Dashboard

基础用法#