mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-03-01 15:03:57 +08:00

Files

catlog22 2fb93d20e0 feat: add queue management and terminal dashboard documentation in Chinese

- Introduced comprehensive documentation for the queue management feature, detailing its pain points, core functionalities, and component structure.
- Added terminal dashboard documentation, highlighting its layout, core features, and usage examples.
- Created an index page in Chinese for Claude Code Workflow, summarizing its purpose and core features, along with quick links to installation and guides.

2026-03-01 10:52:46 +08:00

2.4 KiB

Raw Blame History

title, description, sidebar

title	description	sidebar
Card	Container component for grouping related content	auto

Card

Overview

The Card component is a versatile container used to group related content and actions. It consists of several sub-components that work together to create a cohesive card layout.

Live Demo

:::demo card-variants Shows different card layouts including header, content, footer, and gradient border variants :::

Components

The Card component includes the following sub-components:

Component	Purpose
`Card`	Main container with border and background
`CardHeader`	Header section with padding
`CardTitle`	Title heading element
`CardDescription`	Descriptive text with muted color
`CardContent`	Content area with top padding
`CardFooter`	Footer section for actions
`CardGradientBorder`	Card with gradient border

Props

All Card components accept standard HTML div attributes:

Component	Props
`Card`	`className?: string`
`CardHeader`	`className?: string`
`CardTitle`	`className?: string`, `children?: ReactNode`
`CardDescription`	`className?: string`, `children?: ReactNode`
`CardContent`	`className?: string`
`CardFooter`	`className?: string`
`CardGradientBorder`	`className?: string`

Usage Examples

Basic Card

<Card>
  <CardContent>
    <p>This is a basic card with content.</p>
  </CardContent>
</Card>

Card with Header

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content goes here.</p>
  </CardContent>
</Card>

Complete Card with Footer

<Card>
  <CardHeader>
    <CardTitle>Project Settings</CardTitle>
    <CardDescription>Manage your project configuration</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Configure your project settings and preferences.</p>
  </CardContent>
  <CardFooter>
    <Button>Save Changes</Button>
  </CardFooter>
</Card>

Card with Gradient Border

<CardGradientBorder>
  <CardHeader>
    <CardTitle>Featured Card</CardTitle>
  </CardHeader>
  <CardContent>
    <p>This card has a gradient border effect.</p>
  </CardContent>
</CardGradientBorder>

2.4 KiB Raw Blame History