Card – Code – AI Kit

Implementation
Card Props

Common Examples

To use the Card, import it from @servicetitan/anvil2-ai-kit and pass content through the required content prop. The kit forbids children.

import { Card, Text } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return <Card content={<Text text="Read-only content" />} />;
}

Card type

Props select one of three card types:

Omit href and onPress for a static <div>.
Pass href and a required label for a link card.
Pass onPress and a required label for a button card.

Passing both href and onPress is a type error.

Interactive cards

Interactive cards use a stretched action over the surface. Content remains a sibling of that action, so it can include its own buttons and links without nesting interactive elements.

Padding

The padding prop supports "snug", "base" (default), and "relaxed".

Disabled button cards

Only the button card supports isDisabled. Link cards do not expose a disabled state.

<Card
  onPress={() => openClaim()}
  label="Open claim"
  isDisabled
  content={<Text text="Claim unavailable" />}
/>

React Accessibility

Interactive cards require label, which names both the whole-card action and its role="group" container.
Nested controls remain separate DOM siblings above the stretched action, avoiding nested-interactive violations.
Link cards activate with Enter. Button cards activate with Enter or Space.

<Card
  onPress={() => openClaim()}
  label="Open claim"
  padding="base"
  content={<Text text="Claim summary" />}
/>

`Card` Props

The Card accepts the following props. It is a discriminated union. content is always required. Link and button cards also require label.

ReactNode

required

Card content. Accepts a string, fragment, or rendered tree, including interactive controls.

string

Class merged onto the card surface.

string

Destination whose presence selects the link card. Mutually exclusive with onPress.

boolean

Disables a button card. Available only when onPress selects the button type.

string

Accessible name for a link or button card. Required when href or onPress is present and forbidden on static cards.

() => void

Press handler whose presence selects the button card. Mutually exclusive with href.

"snug" | "base" | "relaxed"

default:"base"

Inset padding applied to the card surface.

​Common Examples

​Card type

​Interactive cards

​Padding

​Disabled button cards

​React Accessibility

​Card Props

Common Examples

Card type

Interactive cards

Padding

Disabled button cards

React Accessibility

`Card` Props