Card - Web

For development, import Card from @servicetitan/anvil2. For design, find it in the Anvil2 file.

Anatomy

The Card consists of two primary elements that work together to group related content together.

Container
Content

Options

The Card supports flexible content, padding, and background configurations to accommodate various grouping scenarios.

Content

Padding

Padding option	Value
0	0px / 0rem
xSmall	4px / 0.25rem
Small	8px / 0.5rem
Medium (default)	16px / 1rem
Large	24px / 1.5rem

AI Mark

Use the AI Mark with Text variant="headline" when the card title should indicate AI-generated content.

Backgrounds

Behavior

The Card responds to interactivity requirements while maintaining consistent content grouping.

Usage Guidelines

Use the Card when a self-contained group needs its own surface to stand apart from the rest of the page: a metric tile in a row of peer tiles, a chart, or a group with no section heading above it. Most page content does not need a Card. Structure pages with a Layout, section headings, and spacing, and leave the Card out of page sections, whole content areas, a lone Data Table, and other Cards.

Standard	Requirement
DoPeer tiles	Sibling blocks of equal weight sit side by side, such as KPI or metric tiles. Use one Card per tile, never one Card around the whole row.
DoCharts	A chart is a self-contained unit. Wrap each chart in one Card and place the chart title inside that Card.
DoIsolated groups without a section heading	A group needs a distinct surface and has no section heading above it on the page. A short label inside the Card, such as “On-hand value”, is not a section heading.
DoGroup related content	Group related content and actions within a single container; don’t add unrelated content to a Card; see Group related content.
Don’tPage sections	A headed text, list, or form section on a page does not need a Card. Introduce the section with a heading and separate it from the next section with spacing; see Structure page sections with headings, not Cards.
Don’tWhole content areas	Do not wrap Page content, a Layout Item, or a full row of tiles in a single Card. The page already provides the surface.
Don’tA lone Data Table	Place the Data Table directly in the page content. The Data Table has its own border and background.
Don’tContent inside another Card	Do not nest Cards. Use headings, body text, and a Divider to structure the content of a single Card; see Nesting cards within cards.
Don’tInteractive Cards	Don’t make the Card itself interactive — use the Interactive Card component instead; see Adding interactive elements to a Card.
Don’tEvery block “to be safe”	When a Card is not clearly one of the cases in Usage Guidelines, leave it out. Extra Cards add borders and padding that flatten the page hierarchy.

Alternatives

Section headings vs Card

Use a headline Text with spacing to group page content. This is the default way to structure a page: inside a Page, section headings start at h2 because the Page Header renders the h1. Use a Card only when the group must stand apart on its own surface.

Divider vs Card

Use a Divider to separate adjacent sections when whitespace alone does not provide enough grouping, such as in high-density layouts and lists.

Details vs Card

Use Details to show or hide supplementary information in a collapsible section instead of placing it in a Card.

Page Panel vs Card

Use a Page Panel for content that sits beside the main content, such as details for a selected item or a live activity feed, instead of a column of Cards.

Edit Card vs Card

Use an Edit Card when a summary of grouped settings needs a toggleable editing state.

Interactive Card vs Card

Use Interactive Card when the card itself needs an interaction. If no interaction is needed, or only an inner element needs an interaction, use Card instead.

How to Use

Structure page sections with headings, not Cards

Introduce each page section with a heading and separate sections with spacing. Do not wrap each section in a Card.

Don’t

Group related content and actions within a single container. Don’t add unrelated content to a card.

Nesting cards within cards

Don’t nest cards within cards. Use headings, body text, and actions to provide structure to your layout.

Don’t

Adding interactive elements to a Card

Inner content of a Card can add interactive elements. Do not make the Card itself interactive, use the Interactive Card component instead.

Content

Content within the Card should be clearly organized and focused on a single purpose.

Place a heading inside the Card to make its purpose clear, following the heading structure of the page. Do not repeat the same heading as a section heading above the Card.
Avoid too many call-to-actions in a single card.
Cards should have an intentional focus, avoid overloading a single card with too much or unrelated information.
Cards of similar importance should be structured in the same way.

Code

Implementation
Card Props

Common Examples

See Usage Guidelines for when to use a Card. For a clickable card, use InteractiveCard.

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

function ExampleComponent() {
  return (
    <Card flexDirection="column">
      <Text variant="headline" el="h2">
        Card Header
      </Text>
      <Text>Card body text.</Text>
    </Card>
  );
}

Page sections without a Card

Place page sections directly in a Layout.Item, with a Text headline per section and gap between them. See When not to use.

import { Flex, Layout, Text } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Layout>
      <Layout.Item span={12}>
        <Flex direction="column" gap="6">
          <Flex direction="column" gap="2">
            <Text variant="headline" el="h2">
              Customer
            </Text>
            <Text>Sophia Rodriguez</Text>
          </Flex>
          <Flex direction="column" gap="2">
            <Text variant="headline" el="h2">
              Job details
            </Text>
            <Text>Water heater diagnostic, July 12, 2025, at 3:00 pm.</Text>
          </Flex>
        </Flex>
      </Layout.Item>
    </Layout>
  );
}

Tiling cards

Use one Card per tile. Place tiles in a Layout with a Layout.Item per Card and equal span values. Use span={3} for four tiles per row. Never wrap the row in one Card. Each tile is a Card with flexDirection="column", an eyebrow Text, and a large value Text. See When to Use.

import { Card, Layout, Text } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Layout>
      <Layout.Item span={3}>
        <Card flexDirection="column">
          <Text variant="eyebrow">Open jobs</Text>
          <Text variant="headline" size="large">
            128
          </Text>
        </Card>
      </Layout.Item>
      <Layout.Item span={3}>
        <Card flexDirection="column">
          <Text variant="eyebrow">Completed</Text>
          <Text variant="headline" size="large">
            94
          </Text>
        </Card>
      </Layout.Item>
      <Layout.Item span={3}>
        <Card flexDirection="column">
          <Text variant="eyebrow">Overdue</Text>
          <Text variant="headline" size="large">
            12
          </Text>
        </Card>
      </Layout.Item>
      <Layout.Item span={3}>
        <Card flexDirection="column">
          <Text variant="eyebrow">Unassigned</Text>
          <Text variant="headline" size="large">
            7
          </Text>
        </Card>
      </Layout.Item>
    </Layout>
  );
}

Background Color

Use the background prop to control the background color of the card.

Padding

Anvil provides five options to pass to the padding prop to determine the spacing between the card border and content.

Flex Direction

Use the flexDirection prop to determine which direction the children are displayed. The parent div of an Anvil Card uses display: inline-flex, so note that the orientation of the children could vary based on the user’s locale and settings.

Creating sections with Divider

To create sections within a Card, use a padding of 0 along with the Divider, then give each child element its own padding as needed.

AI Mark

Place the AI Mark inline with a card title by setting aiMark on Text with variant="headline". Use true for the sparkle only, or pass tooltip or popover configuration for more detail.

When a card is wrapped in ButtonCompound, avoid interactive AI Mark configurations (tooltip or popover triggers) inside the card if that would nest interactive elements incorrectly. For clickable cards that need an interactive mark, use the Interactive Card pattern and validate with accessibility testing.

Interactive Cards

If the card needs to have an action applied to it, please use the InteractiveCard component instead.

React Accessibility

Since the Card component can accept any valid HTML div props, all relevant aria-* props are supported.
When creating an interactive card, the ButtonCompound component wraps the rendered card in a button element, and will use the content of the card to determine its label. If the card includes complex content, it may be helpful to use aria-labelledby or aria-label. Always test using a screenreader to ensure the label makes sense and doesn’t repeat information.

For more guidance on creating accessible components, see building accessible custom components best practices.

<Card background="strong" padding="medium">
  Card content
</Card>

`Card` Props

In addition to the props listed below, the Card component can accept any valid HTML div props and layout utility props (including flexDirection).

"strong" | "stronger"

Uses the default app background color if no value is provided.

"0" | "xsmall" | "small" | "medium" | "large"

default:"medium"

Concepts & Guidelines

Anvil2

Resources

Card - Web

Anatomy

Options

Content

Padding

AI Mark

Backgrounds

Behavior

Usage Guidelines

Alternatives

Section headings vs Card

Divider vs Card

Details vs Card

Page Panel vs Card

Edit Card vs Card

Interactive Card vs Card

How to Use

Structure page sections with headings, not Cards

Nesting cards within cards

Adding interactive elements to a Card

Content

Code

Common Examples

Page sections without a Card

Tiling cards

Background Color

Padding

Flex Direction

Creating sections with Divider

AI Mark

Interactive Cards

React Accessibility

`Card` Props

​Anatomy

​Options

​Content

​Padding

​AI Mark

​Backgrounds

​Behavior

​Usage Guidelines

​Alternatives

​Section headings vs Card

​Divider vs Card

​Details vs Card

​Page Panel vs Card

​Edit Card vs Card

​Interactive Card vs Card

​How to Use

​Structure page sections with headings, not Cards

​Group related content

​Nesting cards within cards

​Adding interactive elements to a Card

​Content

​Code

​Common Examples

​Page sections without a Card

​Tiling cards

​Background Color

​Padding

​Flex Direction

​Creating sections with Divider

​AI Mark

​Interactive Cards

​React Accessibility

​Card Props

Anatomy

Options

Content

Padding

AI Mark

Backgrounds

Behavior

Usage Guidelines

Alternatives

Section headings vs Card

Divider vs Card

Details vs Card

Page Panel vs Card

Edit Card vs Card

Interactive Card vs Card

How to Use

Structure page sections with headings, not Cards

Group related content

Nesting cards within cards

Adding interactive elements to a Card

Content

Code

Common Examples

Page sections without a Card

Tiling cards

Background Color

Padding

Flex Direction

Creating sections with Divider

AI Mark

Interactive Cards

React Accessibility

`Card` Props