Skip to main content

​
Common Examples

Cards are used to distinguish sections of content within a page, and can be interactive (clickable).
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>
  );
}

​
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.

​
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.
Last modified on January 23, 2026