;
}
};
```tsx lines expandable theme={null}
import { Card, Text } from "@servicetitan/anvil2";
function App() {
return (
Basic Card
This is the text within this example card. Make sure to always add{" "}
flexDirection="column" to the Card{" "}
to make the text stack vertically.
);
}
export default App;
```
## Common Examples
Cards are used to distinguish sections of content within a page, and can be interactive (clickable).
```tsx theme={null}
import { Card, Text } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
Card Header
Card body text.
);
}
```
### Background Color
Use the `background` prop to control the background color of the card.
```tsx lines expandable theme={null}
import { Card, Flex } from "@servicetitan/anvil2";
function App() {
return (
Card with a
default background
Card with a
strong background
Card with a
stronger background
);
}
export default App;
```
### Padding
Anvil provides five options to pass to the `padding` prop to determine the spacing between the card border and content.
```tsx lines expandable theme={null}
import { Card, Flex } from "@servicetitan/anvil2";
function App() {
return (
This card has no padding applied to it.This card has 4px padding applied to it.This card has 8px padding applied to it.This card has 16px padding applied to it.This card has 24px padding applied to it.
);
}
export default App;
```
### 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.
```tsx lines expandable theme={null}
import { Card } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
```tsx lines expandable theme={null}
import { Card } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### 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.
```tsx lines expandable theme={null}
import { Card, Text, Divider } from "@servicetitan/anvil2";
function App() {
return (
Section 1. Lorem ipsum dolor sit amet.Section 2. Lorem ipsum dolor sit amet.
);
}
export default App;
```
### AI Mark
Place the [AI Mark](/docs/web/components/ai-mark/code) inline with a card title by setting `aiMark` on [`Text`](/docs/web/components/text/code) 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](/docs/web/components/interactive-card) pattern and validate with accessibility testing.
```tsx lines expandable theme={null}
import { Card, List, Text } from "@servicetitan/anvil2";
function App() {
return (
Daily Job Summary
You have four jobs on the board for the next two days: two drain
cleanouts (Oak St., Riverside Ave.), a water-heater diagnostic on Maple,
and a leak under a kitchen sink on Cedar.
High Priority Jobs
Drain Cleanout (Oak St.)Leak Under a Kitchen Sink (Cedar)
);
}
export default App;
```
### Interactive Cards
If the card needs to have an action applied to it, please use the [InteractiveCard component](/docs/web/components/interactive-card) 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](/docs/accessibility/custom-components).
```tsx theme={null}
Card content
```
## `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`).
Uses the default app background color if no value is provided.
