Card – 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"

Anvil2 Web

Resources

Card – 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

​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

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