Card
이 콘텐츠는 아직 번역되지 않았습니다.
A surface that groups related content.
The frame above shows the real web components, in the mode this site is in.
The design preview shows it next to every other web component.
When to use it
Section titled “When to use it”- A hairline border and a subtle shadow separate it from the page. In dark mode, where shadows barely show, the lighter fill does that.
flushremoves the padding, for a card that holds a list whose rows run edge to edge.
Example
Section titled “Example”import { Button, Card } from "@acme/ui";
<Card title="Weekly report" actions={<Button size="sm">Edit</Button>}> …</Card>Options
Section titled “Options”The web component’s props. The other platforms take the same options under their own naming conventions.
| Prop | Type | Notes |
|---|---|---|
title |
string |
Rendered as a heading. |
description |
string |
|
actions |
ReactNode |
Shown across from the title. |
flush |
boolean |
No padding and no gaps. |
className |
string |
Source
Section titled “Source”| Platform | File |
|---|---|
| Web (React) | packages/ui/src/Card.tsx |
| Desktop (GPUI) | crates/acme-ui/src/components.rs |
| React Native | packages/ui-native/src/Card.tsx |
| Compose Multiplatform | kotlin/ui/src/commonMain/kotlin/acme/ui/Card.kt |