Card - Web (AI Kit)

For development, import Card from @servicetitan/anvil2-ai-kit. For design, find it in the AI Kit Web Component Library file.

Options

The Card supports padding and three interaction shapes — static, link, and button.

Variants

Card renders one of three shapes based on which props are passed: neither href nor onPress renders a non-interactive <div> surface; href renders a whole-card link (<a>); onPress renders a whole-card button (<button>). Interactive cards require a label for their accessible name.

Padding

Padding option	Value
Snug	12px
Base (default)	16px
Relaxed	24px

Interactive Card

Both interactive shapes use a stretched hit target that covers the full surface, so the entire card — not just its text — responds to a click or tap. Their accessible name comes from the required label prop, not from the visible content.

Behavior

Only the interactive variants — link and button — respond to hover, focus, and disabled states. The static variant has no interactive behavior.

Visual States

Hover lifts the surface with a stronger shadow, and keyboard focus draws a ring around the whole card. Disabled — button cards only, since links have no disabled state — dims the surface and suppresses the hover lift.

Usage Guidelines

When to Use

Use the Card when:

Grouping related content – Related content needs a contained surface to stand apart from its surroundings.
Making the whole surface one action – The entire card opens a destination or runs a single action. Pass a link or press action with a label.
Combining a card action with nested controls – An interactive card’s content includes its own buttons or links, which stay independently operable.
Presenting static content – The surface needs no hover, focus, or press behavior.

When not to use

Avoid using the Card for:

Showing content the agent generated in the chat transcript – Use the Artifact Card instead.
Presenting proposed changes for review – Use the Guidance Card instead.
Opening a destination in a new tab – Link cards have no new-tab support. Use the Link instead.

Keyboard Interaction

Keyboard interaction applies only to the interactive variants — link and button. The static variant is not focusable.

Key	Description
Tab	Moves focus to the card
Enter	Activates a focused link or button card
Space	Activates a focused button card (links don’t respond to Space)

Code

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.

Concepts & Guidelines

Anvil2

Resources

Card - Web (AI Kit)

Options

Variants

Padding

Interactive Card

Behavior

Visual States

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

Card type

Interactive cards

Padding

Disabled button cards

React Accessibility

`Card` Props

​Options

​Variants

​Padding

​Interactive Card

​Behavior

​Visual States

​Usage Guidelines

​When to Use

​When not to use

​Keyboard Interaction

​Code

​Common Examples

​Card type

​Interactive cards

​Padding

​Disabled button cards

​React Accessibility

​Card Props

Options

Variants

Padding

Interactive Card

Behavior

Visual States

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

Card type

Interactive cards

Padding

Disabled button cards

React Accessibility

`Card` Props