Artifact Card

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

ArtifactCard surfaces content Atlas generated during the conversation — never content the user retrieved or uploaded themselves. It lives in the chat transcript only, never inside the artifact panel: pressing it either opens the panel to reveal the full result, or downloads the artifact directly, depending on what it represents. Don’t use it as a collapsible card inside the artifact panel.

Options

The Artifact Card supports an icon and an optional description.

Icon

The icon is a decorative avatar that signals the kind of artifact the card represents. artifactType only accepts document for the time being — the prop stays in place so more kinds can be added later without a breaking change. Omitting artifactType renders the card without an icon — title and description only.

Description

An optional description renders beneath the title as compact body text, providing supporting context about the artifact’s content.

Behavior

The entire card surface is a single button. Padding, the trailing caret, and interactivity are fixed and not configurable.

Visual States

The card responds to hover, focus, and press with a surface elevation change inherited from the Card component. The focus ring appears on keyboard navigation.

Overflow

Long titles and descriptions wrap within the card’s content column. The caret stays aligned to the top of the content area.

Usage Guidelines

When to Use

Use the Artifact Card when:

Generated results in the transcript – Atlas generated content during the conversation, and the chat transcript needs a compact entry point to it.
Opening or downloading a result – Pressing the card opens the full result in the artifact panel or downloads the artifact, depending on what it represents.

When not to use

Avoid using the Artifact Card for:

Content the user retrieved or uploaded – The Artifact Card represents only content Atlas generated. Show an attachment the user sends with the User Media Message.
Content inside the artifact panel – The Artifact Card lives in the chat transcript only. Use a Tabbed Layout to organize multiple related views inside the panel.

Keyboard Interaction

Users can navigate and activate the Artifact Card using standard keyboard controls.

Key	Description
Tab	Moves focus to the card button
Enter / Space	Activates the focused card and fires `onPress`

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.

Concepts & Guidelines

Anvil2

Resources

Artifact Card - Web

Options

Icon

Description

Behavior

Visual States

Overflow

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

Artifact type

Description

Heading level

Overflow

Internationalization

React Accessibility

`ArtifactCard` Props

​Options

​Icon

​Description

​Behavior

​Visual States

​Overflow

​Usage Guidelines

​When to Use

​When not to use

​Keyboard Interaction

​Code

​Common Examples

​Artifact type

​Description

​Heading level

​Overflow

​Internationalization

​React Accessibility

​ArtifactCard Props

Options

Icon

Description

Behavior

Visual States

Overflow

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

Artifact type

Description

Heading level

Overflow

Internationalization

React Accessibility

`ArtifactCard` Props