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

> Cards are containers that group related content together.

export const LiveCode = ({children, customHeight, clickToLoad, example, fullWidth, fullHeight, hideCodeInLiveCode, screenshot, screenshotOnly, showCode: showCodeProp}) => {
  const SCREENSHOTS_BASE = "https://servicetitan.github.io/anvil2-docs-live-code/screenshots";
  const STACKBLITZ_BASE = "https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples";
  const [showCodeBlock, setShowCodeBlock] = useState(showCodeProp ?? false);
  const [isLocalOverride, setIsLocalOverride] = useState(false);
  useEffect(() => {
    const examplePath = `/images/live-code-screenshots-tmp/${example}.png`;
    fetch(examplePath, {
      method: "HEAD"
    }).then(r => {
      if (r.ok) setIsLocalOverride(true);
    }).catch(() => {});
  }, [example]);
  const screenshotBase = isLocalOverride ? "/images/live-code-screenshots-tmp" : SCREENSHOTS_BASE;
  if (screenshotOnly) {
    return <Frame className="flex flex-col">
        <div className="flex dark:hidden" style={{
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined,
      background: "#FFFFFF"
    }}>
          <img srcset={`${screenshotBase}/${example}.png, ${screenshotBase}/${example}-2x.png 2x`} src={`${screenshotBase}/${example}.png`} alt={example} noZoom />
        </div>
        <div className="hidden dark:flex" style={{
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined,
      background: "#141414"
    }}>
          <img srcset={`${screenshotBase}/${example}-dark.png, ${screenshotBase}/${example}-dark-2x.png 2x`} src={`${screenshotBase}/${example}-dark.png`} alt={example} noZoom />
        </div>
      </Frame>;
  }
  if (screenshot) {
    return <Frame className="flex flex-col -mb-2">
        <div className="flex dark:hidden bg-white dark:bg-codeblock border border-gray-950/10 dark:border-white/10 dark:twoslash-dark rounded-2xl overflow-hidden" style={{
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined
    }}>
          <img srcset={`${screenshotBase}/${example}.png, ${screenshotBase}/${example}-2x.png 2x`} src={`${screenshotBase}/${example}.png`} alt={example} noZoom />
        </div>

        <div className="hidden dark:flex bg-white dark:bg-codeblock border border-gray-950/10 dark:border-white/10 dark:twoslash-dark rounded-2xl overflow-hidden" style={{
      background: "#141414",
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined
    }}>
          <img srcset={`${screenshotBase}/${example}-dark.png, ${screenshotBase}/${example}-dark-2x.png 2x`} src={`${screenshotBase}/${example}-dark.png`} alt={example} noZoom />
        </div>

        <div className="flex justify-end items-center text-xs py-2 px-1 gap-4">
          {!showCodeProp ? <button className="inline-flex justify-end items-center text-gray-700 dark:text-gray-50 hover:text-blue-500 dark:hover:text-blue-300 transition-colors group self-end gap-1 cursor-pointer" onClick={() => setShowCodeBlock(!showCodeBlock)} style={{
      appearance: "none"
    }}>
              <Icon icon="code" size="12px" className="group-hover:bg-blue-500 dark:group-hover:bg-blue-300" />
              <span>{showCodeBlock ? "Hide code" : "Show code"}</span>
            </button> : null}

          <a className="inline-flex justify-end items-center hover:text-blue-500 dark:hover:text-blue-300 transition-colors group self-end gap-1" href={`${STACKBLITZ_BASE}/${example}?file=src/App.tsx`} target="_blank" rel="noreferrer">
            <Icon icon="bolt" size="12px" className="group-hover:bg-blue-500 dark:group-hover:bg-blue-300" />
            <span>StackBlitz demo</span>
          </a>
        </div>

        <div className="grid transition-[grid-template-rows] duration-300 ease-in-out overflow-auto overflow-y-hidden overflow-x-auto" style={showCodeBlock ? {
      gridTemplateRows: "1fr"
    } : {
      gridTemplateRows: "0fr"
    }}>
          <div style={{
      minHeight: 0,
      overflowX: "auto",
      overflowY: "hidden",
      marginBlockStart: "-1.25rem",
      marginBlockEnd: "-1.5rem"
    }}>
            {children}
          </div>
        </div>
      </Frame>;
  } else {
    return <div style={{
      display: "flex",
      width: fullWidth ? "100%" : "50%",
      minHeight: customHeight ? customHeight : "316px",
      resize: "vertical",
      overflow: "auto"
    }}>
        <iframe title={example} style={{
      flex: 1,
      width: fullWidth ? "100%" : "50%",
      minHeight: customHeight ? customHeight : "316px"
    }} src={`${STACKBLITZ_BASE}/${example}?embed=1&hideNavigation=1&hideExplorer=1&terminalHeight=0&file=src/App.tsx${clickToLoad ? "&ctl=1" : ""}${hideCodeInLiveCode ? "&view=preview" : ""}`} allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" />
      </div>;
  }
};

export const CodePreviewPlaceholder = ({double, fullWidth}) => {
  const single = <div style={{
    width: fullWidth ? "100%" : "50%",
    borderRadius: "1rem",
    display: "flex",
    padding: "1rem",
    flexDirection: "column",
    gap: "0.5rem",
    height: "10rem",
    marginBlockEnd: "1rem"
  }} className="border-width-default border-color-subdued">
      <div className="bg-strong border-radius-large" style={{
    width: "100%",
    flexGrow: "1"
  }} />
      <div className="bg-strong border-radius-large" style={{
    width: "100%",
    flexGrow: "1"
  }} />
    </div>;
  return double ? <div style={{
    display: "flex",
    gap: "1rem"
  }}>
      {single}
      {single}
    </div> : single;
};

<Frame>
  <div className="w-full h-full bg-[#FFFFFF] p-2 rounded flex items-center justify-center">
    <img noZoom src="https://mintcdn.com/servicetitan/uz2PQSvO75TRhQ38/images/docs/web/components/shared/card-example.png?fit=max&auto=format&n=uz2PQSvO75TRhQ38&q=85&s=41539f11e7108933d4777ff8d769feb1" width="700" height="138" data-path="images/docs/web/components/shared/card-example.png" />
  </div>
</Frame>

## Anatomy

The Card consists of two primary elements that work together to group related content together.

<Frame>
  <div className="w-full h-full bg-[#FFFFFF] p-2 rounded flex items-center justify-center">
    <img
      src="https://mintcdn.com/servicetitan/Ni0bXIw9diilEZPZ/images/docs/web/components/card/design/anatomy-of-the-card-component.png?fit=max&auto=format&n=Ni0bXIw9diilEZPZ&q=85&s=3de34975496ff6500ded1de4dcba92b5"
      alt="Anatomy of the Card
component"
      width="694"
      height="148"
      data-path="images/docs/web/components/card/design/anatomy-of-the-card-component.png"
    />
  </div>
</Frame>

1. Container
2. Content

## Options

The Card supports flexible content, padding, and background configurations to accommodate various grouping scenarios.

### Content

<LiveCode example="card-children" screenshot fullWidth>
  ```tsx lines theme={null}
  import { Card, Flex, Checkbox, Text, Button } from "@servicetitan/anvil2";

  function App() {
    return (
      <Flex direction="column" gap="4" style={{ maxWidth: "30rem" }}>
        <Card>This is a Card that just has text in it.</Card>

        <Flex>
          <Card flex={1} padding="large">
            <Checkbox.Group legend="Group label">
              <Checkbox label="Option 1" />
              <Checkbox label="Option 2" defaultChecked />
              <Checkbox label="Option 3" defaultChecked />
            </Checkbox.Group>
          </Card>
        </Flex>

        <Card flexDirection="column">
          <Flex gap={4} direction="column">
            <Flex direction="column">
              <Text variant="headline" size="medium" el="h2">
                Headline text
              </Text>
              <Text variant="body">
                Description of the lorem ipsum dolar emit molestiae reprehenderit
                iste ipsam et velit ab. Eum est et corporis quia voluptatem.
              </Text>
            </Flex>
            <Button>Get started</Button>
          </Flex>
        </Card>
      </Flex>
    );
  }

  export default App;
  ```
</LiveCode>

### Padding

<LiveCode example="card-padding" screenshot fullWidth>
  ```tsx lines theme={null}
  import { Card, Flex } from "@servicetitan/anvil2";

  function App() {
    return (
      <Flex gap={6} direction="column" alignItems="flex-start">
        <Card padding="0">This card has no padding applied to it.</Card>
        <Card padding="xsmall">This card has 4px padding applied to it.</Card>
        <Card padding="small">This card has 8px padding applied to it.</Card>
        <Card padding="medium">This card has 16px padding applied to it.</Card>
        <Card padding="large">This card has 24px padding applied to it.</Card>
      </Flex>
    );
  }

  export default App;
  ```
</LiveCode>

| Padding option   | Value         |
| ---------------- | ------------- |
| 0                | 0px / 0rem    |
| xSmall           | 4px / 0.25rem |
| Small            | 8px / 0.5rem  |
| Medium (default) | 16px / 1rem   |
| Large            | 24px / 1.5rem |

### AI Mark

<LiveCode example="ai-mark-card" screenshot fullWidth>
  ```tsx lines theme={null}
  import { Card, List, Text } from "@servicetitan/anvil2";

  function App() {
    return (
      <Card flexDirection="column" style={{ maxWidth: "500px" }}>
        <Text variant="headline" el="h2" aiMark>
          Daily Job Summary
        </Text>
        <Text>
          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.
        </Text>
        <br />
        <Text variant="headline" el="h3" size="small">
          High Priority Jobs
        </Text>
        <List>
          <List.Item>Drain Cleanout (Oak St.)</List.Item>
          <List.Item>Leak Under a Kitchen Sink (Cedar)</List.Item>
        </List>
      </Card>
    );
  }

  export default App;
  ```
</LiveCode>

Use the [AI Mark](/docs/web/components/ai-mark/code) with [`Text`](/docs/web/components/text/design) `variant="headline"` when the card title should indicate AI-generated content.

### Backgrounds

<LiveCode example="card-background" screenshot fullWidth>
  ```tsx lines theme={null}
  import { Card, Flex } from "@servicetitan/anvil2";

  function App() {
    return (
      <Flex gap={6} direction="column">
        <Card>
          Card with a <br />
          default background
        </Card>
        <Card background="strong">
          Card with a <br />
          strong background
        </Card>
        <Card background="stronger">
          Card with a <br />
          stronger background
        </Card>
      </Flex>
    );
  }

  export default App;
  ```
</LiveCode>

## Behavior

The Card responds to interactivity requirements while maintaining consistent content grouping.

## Usage Guidelines

Use the Card when grouping related content and actions inside of a container.

### When to Use

Use a Card when grouping related content and actions inside of a container.

### Alternatives

#### Interactive Card vs Card

Use Interactive Card when the card itself needs an interaction. If no interaction is needed, or only an inner element needs an interaction, use Card instead.

### How to Use

#### Group related content

Group related content and actions within a single container. Don't add unrelated content to a card.

<LiveCode example="card-related-content-do" screenshot fullWidth>
  ```tsx lines theme={null}
  import { Card, Flex, Text } from "@servicetitan/anvil2";

  function App() {
    return (
      <Card flexDirection="column">
        <Flex direction="column" gap="3">
          <Text variant="headline" el="h1" size="small">
            Contact methods
          </Text>
          <Flex direction="column" gap="1">
            <Text variant="eyebrow" size="small">
              Phone
            </Text>
            <Text>(813) 364-0534</Text>
          </Flex>
          <Flex direction="column" gap="1">
            <Text variant="eyebrow" size="small">
              Fax
            </Text>
            <Text>(813) 364-0530</Text>
          </Flex>
          <Flex direction="column" gap="1">
            <Text variant="eyebrow" size="small">
              Email
            </Text>
            <Text>email.address123@gmail.com</Text>
          </Flex>
        </Flex>
      </Card>
    );
  }

  export default App;
  ```
</LiveCode>

<Check>**Do**</Check>

### Nesting cards within cards

Don't nest cards within cards. Use headings, body text, and actions to provide structure to your layout.

<LiveCode example="card-nesting-dont" screenshot fullWidth>
  ```tsx lines theme={null}
  import { Card, Flex, Text } from "@servicetitan/anvil2";

  function App() {
    return (
      <Card flexDirection="column">
        <Flex direction="column" gap="3">
          <Text variant="headline" el="h1" size="small">
            Contact methods
          </Text>
          <Flex direction="column" gap="1">
            <Text variant="eyebrow" size="small">
              Phone
            </Text>
            <Text>(813) 364-0534</Text>
          </Flex>
          <Flex direction="column" gap="1">
            <Text variant="eyebrow" size="small">
              Fax
            </Text>
            <Text>(813) 364-0530</Text>
          </Flex>
          <Flex direction="column" gap="1">
            <Text variant="eyebrow" size="small">
              Email
            </Text>
            <Text>email.address123@gmail.com</Text>
          </Flex>

          <Card flexDirection="column" padding="small">
            <Text variant="headline" el="h2" size="small">
              Robert Smith
            </Text>
            <Text>Founder</Text>
          </Card>
        </Flex>
      </Card>
    );
  }

  export default App;
  ```
</LiveCode>

<Danger>**Don't**</Danger>

#### Adding interactive elements to a Card

Inner content of a Card can add interactive elements. Do not make the Card itself interactive, use the [Interactive Card](/docs/web/components/interactive-card/design) component instead.

## Content

Content within the Card should be clearly organized and focused on a single purpose.

* Use a Heading to make a card's purpose clear. Following heading structure for the page.
* Avoid too many call-to-actions in a single card.
* Cards should have an intentional focus, avoid overloading a single card with too much or unrelated information.
* Cards of similar importance should be structured in the same way.