Card – Code – React Native

Implementation
Card Props

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.

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.

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

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

ReactNode

required

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

string

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

boolean

default:"false"

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

string

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

() => void

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

"snug" | "base" | "relaxed"

default:"base"

Inset padding on the card surface.

string

Test hook forwarded to the root element.

​Common Examples

​Card type

​Padding

​Accessibility

​Card Props

Common Examples

Card type

Padding

Accessibility

`Card` Props