> ## 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 – Code

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

<Tabs>
  <Tab title="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.
  </Tab>

  <Tab title="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`.

    <ParamField path="content" type="ReactNode" required>
      Card content. A string or number is wrapped in `Text`.
    </ParamField>

    <ParamField path="analyticsId" type="string">
      Opt-in telemetry id on the button shape. When set under
      `Anvil2RNTelemetryProvider`, a press emits a `press` event before
      `onPress`.
    </ParamField>

    <ParamField path="isDisabled" type="boolean" default="false">
      Disables the button card. Only available when `onPress` is set.
    </ParamField>

    <ParamField path="label" type="string">
      Accessible name for the whole-card button. Required when `onPress` is
      set. Forbidden on a static card.
    </ParamField>

    <ParamField path="onPress" type="() => void">
      Press handler. Its presence makes the whole card a button.
    </ParamField>

    <ParamField path="padding" type={`"snug" | "base" | "relaxed"`} default="base">
      Inset padding on the card surface.
    </ParamField>

    <ParamField path="testID" type="string">
      Test hook forwarded to the root element.
    </ParamField>
  </Tab>
</Tabs>