Raft 设计系统
English

组件 · 布局

Card

A white container with a hairline that groups one subject on a page — a header with a title and description, content and a footer — or makes a selectable option inside a form.

稳定
import { Card } from "@botiverse/raft-ui";
本页尚未翻译
译文完成之前，这里显示英文原文。 阅读英文版

A card groups one subject on a page: a title and a line of description, the content that belongs to it, and an optional footer note. It sits flat on the page, on layer-card with a line-hairline outline and radius-container, and casts no shadow. Its option variant is a selectable choice inside a form.

card/compositions/project-summary

When to use

SituationUse
One subject on a page, with a title and its own content or controlsCard
A setting that turns a feature on, with its configuration under itCard with variant="inset"
A choice among a few options in a form, where each option is a blockCard with variant="option", holding a Checkbox or a radio
A group of rows: settings, members, agentsListRowGroup (ListRow)
Properties of one item, label and valueDescriptionList
A part of a large formFormSection
A column of the main areaPanel
A task, a file on a message, a person on hoverTaskCard, MessageAttachment, PreviewCard

Anatomy

  • Card: the container. Required.
  • CardHeader: the top row. It lays out the parts below in a grid.
    • CardLeading: an icon, avatar or switch before the title, spanning the title and description rows. Optional.
    • CardTitle: the title. Optional, but most cards have one.
    • CardTrailing: a status, badge or switch at the end of the title row. Optional.
    • CardDescription: one line under the title, in text-callout and foreground-muted. Optional.
  • CardContent: the body. Optional.
  • CardFooter: a supporting note or a link, in text-caption and foreground-hint, with a hairline above it. Optional.

Variants

VariantUse for
variant="default"A card on its own, or one with little inside it
variant="inset"A card that holds many controls or nested components: a hairline separates the header and each CardContent
variant="option"An option inside a form: radius-control, the field border (1.5px line-field) and a title at the size of a field label, so it doesn't outrank the label above it
card/compositions/workspace-mode
card/compositions/dense-settings
checkbox/compositions/selection

Content

  • Write the title in sentence case: Release readiness (Writing).
  • Write the description as one line on what the card is for or where it stands.
  • Use the footer for a note about the whole card, such as where to read more. Put a card-level action at the end of CardContent instead.

Accessibility

Card renders a div and adds no semantics.

  • Render CardTitle as a heading at the level the page needs, with render: render={<h3 />}.
  • When a Switch or Checkbox in CardLeading or CardTrailing is named by the title, give the title an id and point the control's aria-labelledby at it.
  • For an option card, render the whole card as a label (render={<label />}) so a click anywhere on it toggles the control.

Rules

  • Keep cards flat. Only things that float cast a shadow (Elevation); the open comment card is lifted (Comment).
  • Don't put a card inside a card. An action inside a section is an ordinary row, with the description on the left and the button on the right (Forms).
  • Use line-hairline for every line inside a card; it is content, not a region (Color).
  • Don't attach a progress bar or a colored band to a card's edge (Shape).
  • Apply a switch in a card at once, without a Save button (Forms).

API

Card

Prop类型默认值
variant"option" | "default" | "inset""default"
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

CardContent, CardDescription, CardFooter, CardHeader, CardLeading, CardTitle, CardTrailing

Prop类型默认值
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

相关组件

改动

  • 0.10.0 · Breaking ChangesField frames (Input, Textarea, InputGroup, Select, Combobox, ComboboxSelect, Composer, option Card, SearchTrigger) are drawn at 1px in line-field instead of 1.5px, on the phone too.
  • 0.3.0 · AddedAdded the composable Card component with default and inset variants and the final CardHeader, CardLeading, CardTitle, CardDescription, CardTrailing, CardContent, and CardFooter parts.