Artifact Card – Code

Implementation
ArtifactCard Props

Common Examples

To use the ArtifactCard, pass a required title and onPress handler. The whole surface is a button, and the title is its accessible name.

import { ArtifactCard } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return (
    <ArtifactCard
      artifactType="invoice"
      title="Insights for Invoice #37482915"
      description="Line items, customer details, and proposed edits."
      onPress={openArtifact}
    />
  );
}

Artifact type

artifactType selects a decorative icon for "invoice", "message", or "document". Omit it to render no leading icon.

Description

Use description for compact supporting text. Omit it for a title-only content area.

Heading level

titleLevel sets the semantic heading tag from h3 through h6 without changing the visual style. Choose the level that fits the surrounding document outline.

Overflow

Long titles and descriptions wrap inside the card.

Internationalization

ArtifactCard has no component-owned strings. Localize title and description before passing them to the component.

React Accessibility

The required title names the whole-card button.
The artifact-type icon and trailing arrow are decorative.
Users activate the focused card with Enter or Space.
titleLevel preserves document structure independently of visual styling.

<ArtifactCard
  artifactType="invoice"
  title="Insights for Invoice #37482915"
  description="Line items and proposed edits."
  titleLevel={4}
  onPress={openArtifact}
/>

`ArtifactCard` Props

The ArtifactCard accepts the following props.

() => void

required

Handles activation of the whole-card button.

string

required

Single-line title, semantic heading content, and accessible name.

"invoice" | "message" | "document"

Selects the decorative leading icon. Omit for no icon.

string

Class merged onto the card surface.

string

Supporting text rendered beneath the title.

3 | 4 | 5 | 6

default:"4"

Semantic heading level. Visual styling remains fixed.

AI Kit

Agent Experience

Artifact Card – Code

Common Examples

Artifact type

Description

Heading level

Overflow

Internationalization

React Accessibility

`ArtifactCard` Props

​Common Examples

​Artifact type

​Description

​Heading level

​Overflow

​Internationalization

​React Accessibility

​ArtifactCard Props

Common Examples

Artifact type

Description

Heading level

Overflow

Internationalization

React Accessibility

`ArtifactCard` Props