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

# Home Screens

> Reference implementations for landing and dashboard home screens.

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>;
  }
};

Home screens are the landing view of an app — a scannable summary that orients the user and surfaces the next action. These examples compose `Card`, `Chip`, `Avatar`, `Breadcrumbs`, `SegmentedControl`, `Button`, `Icon`, and `Text` into complete, data-dense layouts. Each is a starting point: copy it and swap in your own data.

## Resources

<Card title="Card" icon="layer-group" href="/docs/web/components/card/design">
  Card component anatomy and usage guidance.
</Card>

<Card title="Home screens" icon="figma" href="https://www.figma.com/design/9OB8FwOZZc079PBR6XY8vP/Anvil-Blocks?node-id=2-31566">
  Figma reference implementations for the home screen dashboards.
</Card>

## Feed Dashboard

A two-column layout pairing a primary feed — here, a list of deployments with status, breadcrumbs, and environment — with a secondary activity feed card.

<LiveCode example="block-home-screens-feed-dashboard" screenshot fullWidth>
  ```tsx lines theme={null}
  import { Fragment, useMemo, useState } from "react";
  import {
    Avatar,
    Button,
    Card,
    Chip,
    Divider,
    Drawer,
    Flex,
    Icon,
    Text,
  } from "@servicetitan/anvil2";
  import { InteractiveCard } from "@servicetitan/anvil2/beta";
  import ArrowForward from "@servicetitan/anvil2/assets/icons/material/round/arrow_forward.svg";
  import SwapVert from "@servicetitan/anvil2/assets/icons/material/round/swap_vert.svg";

  interface Deployment {
    id: string;
    org: string;
    app: string;
    statusColor: string;
    statusLabel: string;
    deployedFrom: string;
    initiatedAgo: string;
    envLabel: string;
  }

  const deployments: Deployment[] = [
    {
      id: "planetaria-ios-preview",
      org: "Planetaria",
      app: "ios-app",
      statusColor: "var(--a2-color-neutral-200, #c4c4c4)",
      statusLabel: "Building",
      deployedFrom: "Github",
      initiatedAgo: "1m 32s ago",
      envLabel: "Preview",
    },
    {
      id: "planetaria-ios-production",
      org: "Planetaria",
      app: "ios-app",
      statusColor: "var(--a2-color-neutral-200, #c4c4c4)",
      statusLabel: "Building",
      deployedFrom: "Github",
      initiatedAgo: "1m 32s ago",
      envLabel: "Production",
    },
    {
      id: "cosmos-explorer-android",
      org: "Cosmos Explorer",
      app: "android-app",
      statusColor: "var(--a2-color-green-500, #0aa86c)",
      statusLabel: "Build passed",
      deployedFrom: "Bitbucket",
      initiatedAgo: "2m 10s ago",
      envLabel: "Preview",
    },
    {
      id: "stellar-network-web",
      org: "Stellar Network",
      app: "web-app",
      statusColor: "var(--a2-color-neutral-200, #c4c4c4)",
      statusLabel: "Building",
      deployedFrom: "Gitlab",
      initiatedAgo: "3m 5s ago",
      envLabel: "Preview",
    },
    {
      id: "galactic-hub-desktop",
      org: "Galactic Hub",
      app: "desktop-app",
      statusColor: "var(--a2-color-green-500, #0aa86c)",
      statusLabel: "Build passed",
      deployedFrom: "SourceForge",
      initiatedAgo: "4m 15s ago",
      envLabel: "Production",
    },
    {
      id: "orbit-tracker-ios-1",
      org: "Orbit Tracker",
      app: "ios-app",
      statusColor: "var(--a2-color-green-500, #0aa86c)",
      statusLabel: "Build passed",
      deployedFrom: "Github",
      initiatedAgo: "5m 20s ago",
      envLabel: "Preview",
    },
    {
      id: "astral-navigator-android",
      org: "Astral Navigator",
      app: "android-app",
      statusColor: "var(--a2-color-red-500, #ff3914)",
      statusLabel: "Build failed",
      deployedFrom: "Bitbucket",
      initiatedAgo: "6m 45s ago",
      envLabel: "Preview",
    },
    {
      id: "orbit-tracker-ios-2",
      org: "Orbit Tracker",
      app: "ios-app",
      statusColor: "var(--a2-color-green-500, #0aa86c)",
      statusLabel: "Build passed",
      deployedFrom: "Github",
      initiatedAgo: "5m 20s ago",
      envLabel: "Preview",
    },
  ];

  interface ActivityItem {
    id: string;
    person: string;
    timeAgo: string;
    description: string;
  }

  const activityItems: ActivityItem[] = [
    {
      id: "activity-1",
      person: "Michael Foster",
      timeAgo: "1h",
      description: "Pushed to ios-app (8c9d0e1 on main)",
    },
    {
      id: "activity-2",
      person: "Michael Foster",
      timeAgo: "1h",
      description: "Pushed to ios-app (8c36f0e1 on main)",
    },
    {
      id: "activity-3",
      person: "Emily Chen",
      timeAgo: "2h",
      description: "Merged pull request #42 into develop branch",
    },
    {
      id: "activity-4",
      person: "David Lee",
      timeAgo: "3h",
      description: "Fix bug in user auth (5436f0e1 on prod)",
    },
    {
      id: "activity-5",
      person: "Sarah Patel",
      timeAgo: "4h",
      description: "API endpoints (e136f0e1 on main)",
    },
    {
      id: "activity-6",
      person: "John Smith",
      timeAgo: "5h",
      description: "Feature for profile settings (rc36f0e1 on main)",
    },
    {
      id: "activity-7",
      person: "Emily Chen",
      timeAgo: "2h",
      description: "Merged pull request #42 into develop branch",
    },
  ];

  function App() {
    const [sortAscending, setSortAscending] = useState(true);
    const [isActivityDrawerOpen, setIsActivityDrawerOpen] = useState(false);

    const sortedDeployments = useMemo(() => {
      const sorted = [...deployments].sort((a, b) => a.org.localeCompare(b.org));
      return sortAscending ? sorted : sorted.reverse();
    }, [sortAscending]);

    return (
      <>
        <style>{`[data-home-screens-row] > button { border-color: transparent; }`}</style>
        <Flex
          gap={12}
          alignItems="start"
          style={{ padding: "2rem", width: "100%" }}
        >
          {/* Deployments */}
          <Flex direction="column" gap={4} style={{ flex: 1, minWidth: 0 }}>
            <Flex
              justifyContent="space-between"
              alignItems="center"
              style={{ width: "100%" }}
            >
              <Text variant="headline" el="h2">
                Deployments
              </Text>
              <Button
                appearance="secondary"
                icon={{ after: SwapVert }}
                onClick={() => setSortAscending((current) => !current)}
              >
                {sortAscending ? "Sort: A → Z" : "Sort: Z → A"}
              </Button>
            </Flex>

            <Flex direction="column" style={{ width: "100%" }}>
              {sortedDeployments.map((deployment, index) => (
                <Fragment key={deployment.id}>
                  {index > 0 && <Divider />}
                  <InteractiveCard
                    wrapperProps={{
                      "aria-label": `Open ${deployment.org} ${deployment.app} deployment`,
                      "data-home-screens-row": "",
                      style: { width: "100%" },
                    }}
                    actionProps={{
                      "aria-label": `Open ${deployment.org} ${deployment.app} deployment`,
                      onClick: () => {},
                    }}
                    contentProps={{
                      padding: "0",
                      justifyContent: "space-between",
                      alignItems: "center",
                      gap: 4,
                      style: {
                        border: "none",
                        boxShadow: "none",
                        padding: "12px 0",
                        width: "100%",
                      },
                    }}
                  >
                    <Flex direction="column" gap={2} style={{ minWidth: 0 }}>
                      <Flex alignItems="center" gap={3}>
                        <span
                          aria-hidden
                          style={{
                            width: 12,
                            height: 12,
                            borderRadius: "50%",
                            background: deployment.statusColor,
                            boxShadow:
                              "var(--a2-shadow-size-float) var(--a2-shadow-color-default)",
                            flexShrink: 0,
                          }}
                        />
                        <Flex alignItems="center" gap={1}>
                          <Text>{deployment.org}</Text>
                          <Text subdued>/</Text>
                          <Text>{deployment.app}</Text>
                        </Flex>
                        <Chip label={deployment.statusLabel} size="small" />
                      </Flex>
                      <Text subdued>
                        Deploys from {deployment.deployedFrom} · Initiated{" "}
                        {deployment.initiatedAgo}
                      </Text>
                    </Flex>
                    <Flex alignItems="center" gap={2} style={{ flexShrink: 0 }}>
                      <Chip label={deployment.envLabel} />
                      <Icon svg={ArrowForward} aria-hidden />
                    </Flex>
                  </InteractiveCard>
                </Fragment>
              ))}
            </Flex>
          </Flex>

          {/* Activity feed */}
          <Card
            flexDirection="column"
            padding="0"
            gap={0}
            background="strong"
            style={{ width: 377, flexShrink: 0, alignSelf: "flex-start" }}
          >
            <Flex
              justifyContent="space-between"
              alignItems="center"
              style={{ padding: "12px 24px", width: "100%" }}
            >
              <Text variant="headline" el="h2">
                Activity feed
              </Text>
              <Button
                appearance="secondary"
                onClick={() => setIsActivityDrawerOpen(true)}
              >
                View all
              </Button>
            </Flex>

            {activityItems.map((item, index) => (
              <Fragment key={item.id}>
                {index > 0 && <Divider />}
                <InteractiveCard
                  wrapperProps={{
                    "aria-label": `View activity from ${item.person}`,
                    "data-home-screens-row": "",
                    style: { width: "100%" },
                  }}
                  actionProps={{
                    "aria-label": `View activity from ${item.person}`,
                    onClick: () => {},
                  }}
                  contentProps={{
                    padding: "0",
                    flexDirection: "column",
                    gap: 2,
                    style: {
                      border: "none",
                      boxShadow: "none",
                      padding: "16px 24px",
                      width: "100%",
                    },
                  }}
                >
                  <Flex
                    justifyContent="space-between"
                    alignItems="center"
                    style={{ width: "100%" }}
                  >
                    <Flex alignItems="center" gap={2} style={{ minWidth: 0 }}>
                      <Avatar name={item.person} size="medium" />
                      <Text inline style={{ fontWeight: "bold" }}>
                        {item.person}
                      </Text>
                    </Flex>
                    <Text subdued inline>
                      {item.timeAgo}
                    </Text>
                  </Flex>
                  <Text subdued>{item.description}</Text>
                </InteractiveCard>
              </Fragment>
            ))}
          </Card>
        </Flex>

        <Drawer
          open={isActivityDrawerOpen}
          onClose={() => setIsActivityDrawerOpen(false)}
        >
          <Drawer.Header>Activity feed</Drawer.Header>
          <Drawer.Content>
            <Flex direction="column" style={{ width: "100%" }}>
              {activityItems.map((item, index) => (
                <Fragment key={item.id}>
                  {index > 0 && <Divider />}
                  <Flex
                    direction="column"
                    gap={2}
                    style={{ padding: "16px 0", width: "100%" }}
                  >
                    <Flex
                      justifyContent="space-between"
                      alignItems="center"
                      style={{ width: "100%" }}
                    >
                      <Flex alignItems="center" gap={2} style={{ minWidth: 0 }}>
                        <Avatar name={item.person} size="medium" />
                        <Text inline style={{ fontWeight: "bold" }}>
                          {item.person}
                        </Text>
                      </Flex>
                      <Text subdued inline>
                        {item.timeAgo}
                      </Text>
                    </Flex>
                    <Text subdued>{item.description}</Text>
                  </Flex>
                </Fragment>
              ))}
            </Flex>
          </Drawer.Content>
          <Drawer.Footer sticky>
            <Drawer.CancelButton onClick={() => setIsActivityDrawerOpen(false)}>
              Close
            </Drawer.CancelButton>
          </Drawer.Footer>
        </Drawer>
      </>
    );
  }

  export default App;
  ```
</LiveCode>

## Analytics Dashboard

A metrics-first layout: a header with a segmented time range, a row of summary statistics, a grouped recent-activity table, and a set of recent-client cards.

<LiveCode example="block-home-screens-analytics-dashboard" screenshot fullWidth>
  ```tsx lines theme={null}
  import {
    Avatar,
    Button,
    Card,
    Chip,
    Divider,
    Flex,
    Icon,
    SegmentedControl,
    Text,
  } from "@servicetitan/anvil2";
  import { core } from "@servicetitan/anvil2/token";
  import Add from "@servicetitan/anvil2/assets/icons/material/round/add.svg";
  import Flag from "@servicetitan/anvil2/assets/icons/material/round/flag.svg";
  import MoreHoriz from "@servicetitan/anvil2/assets/icons/material/round/more_horiz.svg";
  import TrendingDown from "@servicetitan/anvil2/assets/icons/material/round/trending_down.svg";
  import TrendingUp from "@servicetitan/anvil2/assets/icons/material/round/trending_up.svg";

  function App() {
    return (
      <Flex
        direction="column"
        gap={10}
        style={{ padding: "2rem", maxWidth: 1200, width: "100%" }}
      >
        {/* Header */}
        <Flex
          justifyContent="space-between"
          alignItems="center"
          gap={4}
          style={{ width: "100%" }}
        >
          <Flex alignItems="center" gap={6} style={{ minWidth: 0 }}>
            <Text variant="headline" el="h2">
              Cashflow
            </Text>
            <Divider vertical style={{ height: 24 }} />
            <SegmentedControl defaultSelected="7d">
              <SegmentedControl.Segment value="7d">
                Last 7 days
              </SegmentedControl.Segment>
              <SegmentedControl.Segment value="30d">
                Last 30 days
              </SegmentedControl.Segment>
              <SegmentedControl.Segment value="all">
                All-time
              </SegmentedControl.Segment>
            </SegmentedControl>
          </Flex>
          <Button appearance="primary" icon={Add}>
            New invoice
          </Button>
        </Flex>

        {/* Stats */}
        <Card padding="0" gap={0} style={{ width: "100%" }}>
          <Flex style={{ width: "100%" }}>
            <Flex
              direction="column"
              gap={4}
              style={{
                flex: 1,
                minWidth: 0,
                padding: "24px 48px",
                borderRight: "1px solid var(--a2-border-color-subdued)",
              }}
            >
              <Flex
                justifyContent="space-between"
                alignItems="start"
                gap={2}
                style={{ width: "100%" }}
              >
                <Text variant="eyebrow" size="small">
                  Revenue
                </Text>
                <Text size="small" style={{ fontWeight: 600 }}>
                  +4.75%
                </Text>
              </Flex>
              <Text variant="headline" el="h3" size="xlarge">
                $405,091.00
              </Text>
            </Flex>

            <Flex
              direction="column"
              gap={4}
              style={{
                flex: 1,
                minWidth: 0,
                padding: "24px 48px",
                borderRight: "1px solid var(--a2-border-color-subdued)",
              }}
            >
              <Flex
                justifyContent="space-between"
                alignItems="start"
                gap={2}
                style={{ width: "100%" }}
              >
                <Text variant="eyebrow" size="small">
                  Overdue invoices
                </Text>
                <Text
                  size="small"
                  style={{
                    fontWeight: 600,
                    color: "var(--a2-foreground-color-danger)",
                  }}
                >
                  +54.02%
                </Text>
              </Flex>
              <Text variant="headline" el="h3" size="xlarge">
                $12,787.00
              </Text>
            </Flex>

            <Flex
              direction="column"
              gap={4}
              style={{
                flex: 1,
                minWidth: 0,
                padding: "24px 48px",
                borderRight: "1px solid var(--a2-border-color-subdued)",
              }}
            >
              <Flex
                justifyContent="space-between"
                alignItems="start"
                gap={2}
                style={{ width: "100%" }}
              >
                <Text variant="eyebrow" size="small">
                  Outstanding invoices
                </Text>
                <Text size="small" style={{ fontWeight: 600 }}>
                  -1.39%
                </Text>
              </Flex>
              <Text variant="headline" el="h3" size="xlarge">
                $245,988.00
              </Text>
            </Flex>

            <Flex
              direction="column"
              gap={4}
              style={{ flex: 1, minWidth: 0, padding: "24px 48px" }}
            >
              <Flex
                justifyContent="space-between"
                alignItems="start"
                gap={2}
                style={{ width: "100%" }}
              >
                <Text variant="eyebrow" size="small">
                  Expenses
                </Text>
                <Text
                  size="small"
                  style={{
                    fontWeight: 600,
                    color: "var(--a2-foreground-color-danger)",
                  }}
                >
                  +10.18%
                </Text>
              </Flex>
              <Text variant="headline" el="h3" size="xlarge">
                $30,156.00
              </Text>
            </Flex>
          </Flex>
        </Card>

        {/* Recent activity */}
        <Flex direction="column" gap={4} style={{ width: "100%" }}>
          <Text variant="headline" el="h2">
            Recent activity
          </Text>
          <Flex direction="column" style={{ width: "100%" }}>
            <Flex
              style={{
                background: "var(--a2-background-color-strong)",
                padding: "16px 32px",
                width: "100%",
              }}
            >
              <Text style={{ fontWeight: "bold" }}>Today</Text>
            </Flex>

            {/* Transaction 1 */}
            <Flex
              justifyContent="space-between"
              alignItems="start"
              gap={4}
              style={{
                borderBottom: "1px solid var(--a2-border-color-subdued)",
                padding: "24px 32px",
                width: "100%",
              }}
            >
              <Flex gap={3} alignItems="start" style={{ flex: 1, minWidth: 0 }}>
                <Icon svg={TrendingUp} size="xlarge" />
                <Flex direction="column" gap={1} style={{ minWidth: 0 }}>
                  <Flex alignItems="center" gap={2}>
                    <Text inline style={{ fontWeight: "bold" }}>
                      $7,600.00 USD
                    </Text>
                    <Chip
                      label="Paid"
                      color={core.semantic?.StatusColorSuccess?.value}
                    />
                  </Flex>
                  <Text size="small" subdued>
                    $900.00 tax
                  </Text>
                </Flex>
              </Flex>
              <Flex
                direction="column"
                gap={1}
                style={{ width: 160, flexShrink: 0 }}
              >
                <Text size="small">Reform</Text>
                <Text size="small" subdued>
                  Website redesign
                </Text>
              </Flex>
              <Flex
                direction="column"
                gap={1}
                alignItems="end"
                style={{ flexShrink: 0 }}
              >
                <Button appearance="ghost">View transaction</Button>
                <Flex alignItems="center" gap={1}>
                  <Text size="small" subdued inline>
                    Invoice
                  </Text>
                  <Text size="small" inline>
                    #000012
                  </Text>
                </Flex>
              </Flex>
            </Flex>

            {/* Transaction 2 */}
            <Flex
              justifyContent="space-between"
              alignItems="start"
              gap={4}
              style={{
                borderBottom: "1px solid var(--a2-border-color-subdued)",
                padding: "24px 32px",
                width: "100%",
              }}
            >
              <Flex gap={3} alignItems="start" style={{ flex: 1, minWidth: 0 }}>
                <Icon svg={TrendingDown} size="xlarge" />
                <Flex direction="column" gap={1} style={{ minWidth: 0 }}>
                  <Flex alignItems="center" gap={2}>
                    <Text inline style={{ fontWeight: "bold" }}>
                      $10,000.00 USD
                    </Text>
                    <Chip label="Withdraw" />
                  </Flex>
                  <Text size="small" subdued>
                    $900.00 tax
                  </Text>
                </Flex>
              </Flex>
              <Flex
                direction="column"
                gap={1}
                style={{ width: 160, flexShrink: 0 }}
              >
                <Text size="small">Reform</Text>
                <Text size="small" subdued>
                  Website redesign
                </Text>
              </Flex>
              <Flex
                direction="column"
                gap={1}
                alignItems="end"
                style={{ flexShrink: 0 }}
              >
                <Button appearance="ghost">View transaction</Button>
                <Flex alignItems="center" gap={1}>
                  <Text size="small" subdued inline>
                    Invoice
                  </Text>
                  <Text size="small" inline>
                    #000012
                  </Text>
                </Flex>
              </Flex>
            </Flex>

            {/* Transaction 3 */}
            <Flex
              justifyContent="space-between"
              alignItems="start"
              gap={4}
              style={{
                borderBottom: "1px solid var(--a2-border-color-subdued)",
                padding: "24px 32px",
                width: "100%",
              }}
            >
              <Flex gap={3} alignItems="start" style={{ flex: 1, minWidth: 0 }}>
                <Icon svg={Flag} size="xlarge" />
                <Flex direction="column" gap={1} style={{ minWidth: 0 }}>
                  <Flex alignItems="center" gap={2}>
                    <Text inline style={{ fontWeight: "bold" }}>
                      $2,000.00 USD
                    </Text>
                    <Chip
                      label="Overdue"
                      color={core.semantic?.StatusColorDanger?.value}
                    />
                  </Flex>
                  <Text size="small" subdued>
                    $130.00 tax
                  </Text>
                </Flex>
              </Flex>
              <Flex
                direction="column"
                gap={1}
                style={{ width: 160, flexShrink: 0 }}
              >
                <Text size="small">Reform</Text>
                <Text size="small" subdued>
                  Website redesign
                </Text>
              </Flex>
              <Flex
                direction="column"
                gap={1}
                alignItems="end"
                style={{ flexShrink: 0 }}
              >
                <Button appearance="ghost">View transaction</Button>
                <Flex alignItems="center" gap={1}>
                  <Text size="small" subdued inline>
                    Invoice
                  </Text>
                  <Text size="small" inline>
                    #000012
                  </Text>
                </Flex>
              </Flex>
            </Flex>

            <Flex
              style={{
                background: "var(--a2-background-color-strong)",
                padding: "16px 32px",
                width: "100%",
              }}
            >
              <Text style={{ fontWeight: "bold" }}>Yesterday</Text>
            </Flex>

            {/* Transaction 4 */}
            <Flex
              justifyContent="space-between"
              alignItems="start"
              gap={4}
              style={{
                borderBottom: "1px solid var(--a2-border-color-subdued)",
                padding: "24px 32px",
                width: "100%",
              }}
            >
              <Flex gap={3} alignItems="start" style={{ flex: 1, minWidth: 0 }}>
                <Icon svg={TrendingUp} size="xlarge" />
                <Flex direction="column" gap={1} style={{ minWidth: 0 }}>
                  <Flex alignItems="center" gap={2}>
                    <Text inline style={{ fontWeight: "bold" }}>
                      $14,000.00
                    </Text>
                    <Chip
                      label="Paid"
                      color={core.semantic?.StatusColorSuccess?.value}
                    />
                  </Flex>
                  <Text size="small" subdued>
                    $900.00 tax
                  </Text>
                </Flex>
              </Flex>
              <Flex
                direction="column"
                gap={1}
                style={{ width: 160, flexShrink: 0 }}
              >
                <Text size="small">Reform</Text>
                <Text size="small" subdued>
                  Website redesign
                </Text>
              </Flex>
              <Flex
                direction="column"
                gap={1}
                alignItems="end"
                style={{ flexShrink: 0 }}
              >
                <Button appearance="ghost">View transaction</Button>
                <Flex alignItems="center" gap={1}>
                  <Text size="small" subdued inline>
                    Invoice
                  </Text>
                  <Text size="small" inline>
                    #000012
                  </Text>
                </Flex>
              </Flex>
            </Flex>
          </Flex>
        </Flex>

        {/* Recent clients */}
        <Flex direction="column" gap={4} style={{ width: "100%" }}>
          <Flex
            justifyContent="space-between"
            alignItems="center"
            style={{ width: "100%" }}
          >
            <Text variant="headline" el="h2">
              Recent clients
            </Text>
            <Button appearance="ghost">View all</Button>
          </Flex>
          <Flex gap={4} alignItems="start" style={{ width: "100%" }}>
            {/* Client 1 */}
            <Card
              padding="0"
              flexDirection="column"
              gap={0}
              style={{ flex: 1, minWidth: 0, overflow: "hidden" }}
            >
              <Flex
                justifyContent="space-between"
                alignItems="center"
                style={{
                  background: "var(--a2-background-color-strong)",
                  borderBottom: "1px solid var(--a2-border-color-subdued)",
                  padding: "12px 16px",
                  width: "100%",
                }}
              >
                <Flex alignItems="center" gap={2} style={{ minWidth: 0 }}>
                  <Avatar name="Tuple" size="medium" />
                  <Text variant="headline" el="h3" size="small">
                    Tuple
                  </Text>
                </Flex>
                <Button
                  appearance="ghost"
                  icon={MoreHoriz}
                  aria-label="Client options"
                />
              </Flex>
              <Flex
                direction="column"
                style={{ padding: "0 16px", width: "100%" }}
              >
                <Flex
                  justifyContent="space-between"
                  alignItems="center"
                  style={{
                    borderBottom: "1px solid var(--a2-border-color-subdued)",
                    padding: "12px 0",
                    width: "100%",
                  }}
                >
                  <Text size="small" subdued>
                    Last invoice
                  </Text>
                  <Text size="small" subdued style={{ fontWeight: "bold" }}>
                    December 13, 2022
                  </Text>
                </Flex>
                <Flex
                  justifyContent="space-between"
                  alignItems="center"
                  style={{ padding: "12px 0", width: "100%" }}
                >
                  <Text size="small" subdued>
                    Amount
                  </Text>
                  <Flex alignItems="center" gap={1}>
                    <Text size="small" subdued style={{ fontWeight: "bold" }}>
                      $2,000.00
                    </Text>
                    <Chip
                      label="Overdue"
                      color={core.semantic?.StatusColorDanger?.value}
                    />
                  </Flex>
                </Flex>
              </Flex>
            </Card>

            {/* Client 2 */}
            <Card
              padding="0"
              flexDirection="column"
              gap={0}
              style={{ flex: 1, minWidth: 0, overflow: "hidden" }}
            >
              <Flex
                justifyContent="space-between"
                alignItems="center"
                style={{
                  background: "var(--a2-background-color-strong)",
                  borderBottom: "1px solid var(--a2-border-color-subdued)",
                  padding: "12px 16px",
                  width: "100%",
                }}
              >
                <Flex alignItems="center" gap={2} style={{ minWidth: 0 }}>
                  <Avatar name="SavvyCal" size="medium" />
                  <Text variant="headline" el="h3" size="small">
                    SavvyCal
                  </Text>
                </Flex>
                <Button
                  appearance="ghost"
                  icon={MoreHoriz}
                  aria-label="Client options"
                />
              </Flex>
              <Flex
                direction="column"
                style={{ padding: "0 16px", width: "100%" }}
              >
                <Flex
                  justifyContent="space-between"
                  alignItems="center"
                  style={{
                    borderBottom: "1px solid var(--a2-border-color-subdued)",
                    padding: "12px 0",
                    width: "100%",
                  }}
                >
                  <Text size="small" subdued>
                    Last invoice
                  </Text>
                  <Text size="small" subdued style={{ fontWeight: "bold" }}>
                    January 22, 2023
                  </Text>
                </Flex>
                <Flex
                  justifyContent="space-between"
                  alignItems="center"
                  style={{ padding: "12px 0", width: "100%" }}
                >
                  <Text size="small" subdued>
                    Amount
                  </Text>
                  <Flex alignItems="center" gap={1}>
                    <Text size="small" subdued style={{ fontWeight: "bold" }}>
                      $14,000.00
                    </Text>
                    <Chip
                      label="Paid"
                      color={core.semantic?.StatusColorSuccess?.value}
                    />
                  </Flex>
                </Flex>
              </Flex>
            </Card>

            {/* Client 3 */}
            <Card
              padding="0"
              flexDirection="column"
              gap={0}
              style={{ flex: 1, minWidth: 0, overflow: "hidden" }}
            >
              <Flex
                justifyContent="space-between"
                alignItems="center"
                style={{
                  background: "var(--a2-background-color-strong)",
                  borderBottom: "1px solid var(--a2-border-color-subdued)",
                  padding: "12px 16px",
                  width: "100%",
                }}
              >
                <Flex alignItems="center" gap={2} style={{ minWidth: 0 }}>
                  <Avatar name="Reform" size="medium" />
                  <Text variant="headline" el="h3" size="small">
                    Reform
                  </Text>
                </Flex>
                <Button
                  appearance="ghost"
                  icon={MoreHoriz}
                  aria-label="Client options"
                />
              </Flex>
              <Flex
                direction="column"
                style={{ padding: "0 16px", width: "100%" }}
              >
                <Flex
                  justifyContent="space-between"
                  alignItems="center"
                  style={{
                    borderBottom: "1px solid var(--a2-border-color-subdued)",
                    padding: "12px 0",
                    width: "100%",
                  }}
                >
                  <Text size="small" subdued>
                    Last invoice
                  </Text>
                  <Text size="small" subdued style={{ fontWeight: "bold" }}>
                    December 13, 2022
                  </Text>
                </Flex>
                <Flex
                  justifyContent="space-between"
                  alignItems="center"
                  style={{ padding: "12px 0", width: "100%" }}
                >
                  <Text size="small" subdued>
                    Amount
                  </Text>
                  <Flex alignItems="center" gap={1}>
                    <Text size="small" subdued style={{ fontWeight: "bold" }}>
                      $7,600.00
                    </Text>
                    <Chip
                      label="Overdue"
                      color={core.semantic?.StatusColorDanger?.value}
                    />
                  </Flex>
                </Flex>
              </Flex>
            </Card>
          </Flex>
        </Flex>
      </Flex>
    );
  }

  export default App;
  ```
</LiveCode>