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

# Card

> Documentation for Card

export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/";

export const cardPreviewJson = {
  "type": "card",
  "color": "#FFFFFF",
  "shadowColor": "#000000",
  "surfaceTintColor": "#FF0000",
  "elevation": 5,
  "shape": {
    "type": "roundedRectangle",
    "borderRadius": 10
  },
  "borderOnForeground": true,
  "margin": {
    "left": 10,
    "top": 20,
    "right": 10,
    "bottom": 20
  },
  "clipBehavior": "antiAlias",
  "child": {
    "type": "text",
    "data": "This is a card."
  },
  "semanticContainer": true
};
export const cardPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac Card allows you to build a Flutter Card widget using JSON.
To know more about the Card widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Card-class.html).

## Properties

| Property           | Type              | Description                                                            |
| ------------------ | ----------------- | ---------------------------------------------------------------------- |
| color              | `StacColor`       | The background color of the card.                                      |
| shadowColor        | `StacColor`       | The color of the card's shadow.                                        |
| surfaceTintColor   | `StacColor`       | The color of the card's surface tint.                                  |
| elevation          | `double`          | The z-coordinate at which to place this card.                          |
| shape              | `StacShapeBorder` | The shape of the card's border.                                        |
| borderOnForeground | `bool`            | Whether to paint the border in front of the child. Defaults to `true`. |
| margin             | `StacEdgeInsets`  | The empty space that surrounds the card.                               |
| clipBehavior       | `StacClip`        | The content will be clipped (or not) according to this option.         |
| child              | `StacWidget`      | The widget below this widget in the tree.                              |
| semanticContainer  | `bool`            | Whether this card is a semantic container. Defaults to `true`.         |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacCard(
      color: StacColors.white,
      shadowColor: StacColors.black,
      surfaceTintColor: StacColors.red,
      elevation: 5.0,
      shape: StacRoundedRectangleBorder(borderRadius: 10.0),
      borderOnForeground: true,
      margin: StacEdgeInsets(left: 10, top: 20, right: 10, bottom: 20),
      clipBehavior: StacClip.antiAlias,
      child: StacText(data: 'This is a card.'),
      semanticContainer: true,
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "card",
      "color": "#FFFFFF",
      "shadowColor": "#000000",
      "surfaceTintColor": "#FF0000",
      "elevation": 5,
      "shape": {
        "type": "roundedRectangle",
        "borderRadius": 10
      },
      "borderOnForeground": true,
      "margin": {
        "left": 10,
        "top": 20,
        "right": 10,
        "bottom": 20
      },
      "clipBehavior": "antiAlias",
      "child": {
        "type": "text",
        "data": "This is a card."
      },
      "semanticContainer": true
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={cardPreviewSrc}
        title="Stac Playground"
        className="w-full rounded-xl border-0"
        style={{ height: "640px" }}
        loading="lazy"
        onLoad={(event) => {
      const iframe = event.currentTarget;
      const targetOrigin = PLAYGROUND_BASE_URL;
      const message = {
        type: "stac-preview-json",
        payload: cardPreviewJson
      };

      let attempts = 0;
      const maxAttempts = 12;
      const interval = setInterval(() => {
        iframe.contentWindow?.postMessage(message, targetOrigin);
        attempts += 1;

        if (attempts >= maxAttempts) {
          clearInterval(interval);
        }
      }, 250);
    }}
      />
    </Frame>
  </Tab>
</Tabs>