Components General

Card

A product card: 12px radius, a hairline, a light shadow.

import { Card, CardHeader, CardContent } from '@kition/tessera-ui'

When to use

Grouping settings or a summary on a page.

Examples

Header and content

Model

Claude Opus · 1,240 credits this month

card.tsx

import { Button, Card, CardContent, CardHeader } from '@kition/tessera-ui'

export default function Demo() {
  return (
    <Card style={{ maxWidth: 360 }}>
      <CardHeader>
        <strong>Model</strong>
        <Button size="sm">Change</Button>
      </CardHeader>
      <CardContent>Claude Opus · 1,240 credits this month</CardContent>
    </Card>
  )
}

Props

Card

A product card: 12px radius, a hairline, a light shadow.

No props.

Also takes the attributes of its HTML element (`className`, `aria-*`, events…).

CardHeader

No props.

Also takes the attributes of its HTML element (`className`, `aria-*`, events…).

CardContent

No props.

Also takes the attributes of its HTML element (`className`, `aria-*`, events…).