> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Card - React Native

> The Card provides static and button surfaces for grouped content.

> [!NOTE]
>
> For development, import `Card` from
> `@servicetitan/anvil2-rn`. For design, find it in the
> [Mobile Agentic Component Library file](https://www.figma.com/design/gjGWnAOnI1kukfzjsUQ6dP/Mobile-Agentic-Component-Library).

**Implementation**

```tsx theme={null}
import { Card, Text } from "@servicetitan/anvil2-rn";

function App() {
  return (
    <Card
      content={
        <Text text="This is a card surface for grouping related content." />
      }
    />
  );
}
```

## Common Examples

To use the `Card`, import it from `@servicetitan/anvil2-rn` and pass content through the required `content` prop. The kit forbids `children`. A plain string or number is wrapped in `Text` for you.

```tsx theme={null}
import { Card, Text } from "@servicetitan/anvil2-rn";

function ExampleComponent() {
  return <Card content={<Text text="Read-only content" />} />;
}
```

### Card type

Props select one of two card types:

* Omit `onPress` for a static surface.
* Pass `onPress` and a required `label` for a button card.

The React Native surface does not include a link card (`href`) or the web `highlighted` glow.

```tsx theme={null}
<Card content={<Text text="Static — a non-interactive surface." />} />
<Card
  onPress={() => {}}
  label="Run example action"
  content={<Text text="Button — the whole card is a button." />}
/>
```

### Padding

`padding` is `"snug"`, `"base"`, or `"relaxed"`. `"base"` is the default.

```tsx theme={null}
<Card padding="snug" content={<Text text="Snug inset." />} />
<Card padding="relaxed" content={<Text text="Relaxed inset." />} />
```

## Accessibility

* A static card is a non-interactive surface.
* A button card uses `accessibilityRole="button"`, `label` as `accessibilityLabel`, and `accessibilityState.disabled` when `isDisabled` is set.

**Card Props**

```tsx theme={null}
<Card
  content={<Text text="Grouped content" />}
  padding="base"
  onPress={() => {}}
  label="Open details"
/>
```

## `Card` Props

The `Card` accepts the following props. It does not forward remaining React Native `View` or `Pressable` props. `onPress` selects the button shape and then requires `label`.

**content** `ReactNode` *required*

Card content. A string or number is wrapped in `Text`.

**analyticsId** `string`

Opt-in telemetry id on the button shape. When set under
`Anvil2RNTelemetryProvider`, a press emits a `press` event before
`onPress`.

**isDisabled** `boolean` (default: false)

Disables the button card. Only available when `onPress` is set.

**label** `string`

Accessible name for the whole-card button. Required when `onPress` is
set. Forbidden on a static card.

**onPress** `() =\> void`

Press handler. Its presence makes the whole card a button.

**padding** `"snug" | "base" | "relaxed"` (default: base)

Inset padding on the card surface.

**testID** `string`

Test hook forwarded to the root element.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.