{
  "name": "FullCard",
  "source": "src/components/FullCard.tsx",
  "propsType": "FullCardProps",
  "description": "Full Card — the full-bleed case study row from Figma `Full Card` (592:857).\n\nA text column beside a framed media panel, split down the middle, mirrored\nby the `Alignment` variant.\n\nThe split holds from 1080 and stacks below it, media above content in BOTH\nalignments — `Alignment` names a horizontal side and\nstops meaning anything once there is one column, so it does not get to\ndecide the vertical order too. Size is a media query, not a prop, the same\ncall Header makes about Device.\n\nWHY THE `show*` BOOLEANS ARE GONE\n\nFigma carries `Show Eyebrow`, `Show Description` and `Show Actions` beside\nthe slots they gate, because a Figma component instance always holds every\nlayer and needs a switch to hide one. React has no such constraint — an\nabsent prop is the switch. Badge made the same call with `Show Dot`, and\nkeeping both would have let `showActions` and `actions` disagree.\n\n`headline` is required, and it is the only required prop. The heading is\nwhat makes this a section rather than a decorated div, and every other part\nof the card is optional in Figma too.\n\nNo `'use client'`: nothing here is stateful or interactive. The interactive\nparts arrive through `actions`, and they carry their own boundary.",
  "import": "import { FullCard } from 'ionbase-ui';",
  "status": "stable",
  "summary": "A full-bleed row: a text column beside a framed media panel, mirrored by `alignment`.",
  "useWhen": [
    "a marketing or overview section presents one thing with a screenshot beside it",
    "a case-study or feature row on a landing or product page"
  ],
  "useInstead": [
    {
      "when": "you are listing records with comparable fields",
      "use": "Table"
    },
    {
      "when": "it is a short status message rather than a content section",
      "use": "Alert"
    }
  ],
  "slots": {
    "eyebrow": {
      "accepts": "Badge",
      "note": "any node works"
    },
    "headline": {
      "accepts": "text",
      "note": "required — the heading is what makes this a section rather than a decorated div"
    },
    "description": {
      "accepts": "text"
    },
    "actions": {
      "accepts": "Button",
      "note": "a secondary Button in the design"
    },
    "media": {
      "accepts": "img or video",
      "note": "rendered inside the framed screen holder — pass the screenshot or embed itself, not the frame"
    },
    "children": {
      "accepts": "any",
      "note": "extra content below the description"
    }
  },
  "variants": {
    "alignment": {
      "left": {
        "use": "media on the left, text on the right"
      },
      "right": {
        "use": "media on the right — the variant names the media, not the text"
      }
    }
  },
  "a11y": {
    "guarantees": [
      "the headline renders as a real heading, so the card appears in the document outline"
    ],
    "requires": [
      "`headingLevel` matching the surrounding outline — `h3` is the default because Figma applies Type/H3, but only the page knows the real level",
      "`alt` on whatever you pass as `media`"
    ],
    "notes": [
      "`h1` is deliberately not available: a full card is a section within a page, never the page's own title."
    ]
  },
  "antiPatterns": [
    {
      "dont": "looking for `showEyebrow` / `showDescription` / `showActions`",
      "why": "an absent prop is the switch — Figma needs the boolean because an instance always holds every layer; React does not"
    },
    {
      "dont": "leaving `headingLevel` at the default inside a section that is already at h3",
      "why": "it produces a skipped or duplicated outline level"
    },
    {
      "dont": "passing your own frame or border around `media`",
      "why": "the component already draws the screen holder"
    }
  ],
  "stylesheet": "src/styles/full-card.css",
  "tokens": [
    "--border-default",
    "--border-width-default",
    "--font-family-sans",
    "--font-weight-regular",
    "--font-weight-semibold",
    "--ion-full-card-gap",
    "--ion-full-card-media-gutter",
    "--ion-full-card-media-min-height",
    "--ion-full-card-media-width",
    "--ion-full-card-padding-x",
    "--ion-full-card-padding-y",
    "--radius-5xl",
    "--radius-6xl",
    "--radius-none",
    "--spacing-0",
    "--spacing-24",
    "--spacing-32",
    "--spacing-48",
    "--spacing-8",
    "--surface-default",
    "--surface-page",
    "--surface-sunken",
    "--text-default",
    "--text-secondary",
    "--type-body-sm",
    "--type-body-sm-line-height",
    "--type-h3",
    "--type-h3-line-height"
  ],
  "props": {
    "alignment": {
      "type": "FullCardAlignment | undefined",
      "required": false,
      "origin": "own",
      "description": "Which side the media panel sits on. Matches Figma's `Alignment` variant,\nwhose `Right` / `Left` name the media, not the text.",
      "values": [
        "left",
        "right"
      ]
    },
    "eyebrow": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Figma's `Eyebrow` slot — a Badge in the design, but any node works."
    },
    "headline": {
      "type": "React.ReactNode",
      "required": true,
      "origin": "own",
      "description": "Figma's `Headline`. Required: a card with no headline has no accessible name."
    },
    "description": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Figma's `Description`."
    },
    "actions": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Figma's `Actions` slot — a secondary Button in the design."
    },
    "media": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Figma's `Media` slot. Rendered inside the framed screen holder, so pass\nthe screenshot or embed itself, not the frame."
    },
    "headingLevel": {
      "type": "FullCardHeadingLevel | undefined",
      "required": false,
      "origin": "own",
      "description": "Heading element for the headline. Defaults to `h3`, matching the `Type/H3`\ntext style Figma applies — but the level is a document-outline decision\nonly the page knows, so it is a prop rather than a constant."
    },
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own"
    }
  },
  "propCounts": {
    "own": 8,
    "aria": 0,
    "dom": 276,
    "other": 0
  }
}