{
  "name": "Card",
  "category": "Data Display",
  "subcategory": "Cards & Layout",
  "description": "Flexible container with header, content, and footer slots.",
  "thumbnail": "/preview-cards/card.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Card/Card.razor",
    "UI/Card/CardContent.razor",
    "UI/Card/CardFooter.razor",
    "UI/Card/CardHeader.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-accent",
    "--color-border",
    "--color-card",
    "--color-card-foreground",
    "--color-ring",
    "--radius"
  ],
  "api": {
    "name": "Card",
    "category": "Data Display",
    "subcategory": "Cards & Layout",
    "description": "Flexible container with header, content, and footer slots.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Card/Card.razor",
      "UI/Card/CardContent.razor",
      "UI/Card/CardFooter.razor",
      "UI/Card/CardHeader.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Class",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "OnClick",
        "type": "EventCallback<Microsoft.AspNetCore.Components.Web.MouseEventArgs>",
        "default": null,
        "description": "Optional click handler. When set, the card becomes a button-role interactive surface with cursor-pointer, focus-visible ring, keyboard activation, and honours PressEffect.",
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "PressEffect",
        "type": "Button.ButtonPressEffect",
        "default": "Button.ButtonPressEffect.None",
        "description": "Visual feedback when the card is pressed (only applies when OnClick is bound). Default is None.",
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [
      {
        "name": "OnClick",
        "type": "EventCallback<Microsoft.AspNetCore.Components.Web.MouseEventArgs>",
        "description": "Optional click handler. When set, the card becomes a button-role interactive surface with cursor-pointer, focus-visible ring, keyboard activation, and honours PressEffect."
      }
    ],
    "enums": [],
    "records": [],
    "cssVars": [
      "--color-accent",
      "--color-border",
      "--color-card",
      "--color-card-foreground",
      "--color-ring",
      "--radius"
    ],
    "examples": [
      {
        "title": "Default",
        "code": "<Card>\n    <CardHeader>\n        <Heading Level=\"3\" Size=\"lg\" Class=\"leading-none tracking-tight\">Notifications</Heading>\n        <Lumeo.Text Size=\"sm\" Color=\"muted\">You have 3 unread messages.</Lumeo.Text>\n    </CardHeader>\n    <CardContent>\n        <Lumeo.Text Size=\"sm\">Your recent notifications will appear here.</Lumeo.Text>\n    </CardContent>\n    <CardFooter>\n        <Button Class=\"w-full\">Mark all as read</Button>\n    </CardFooter>\n</Card>"
      },
      {
        "title": "Card with Actions",
        "code": "<Card>\n    <CardHeader>\n        <Heading Level=\"3\" Size=\"lg\" Class=\"leading-none tracking-tight\">Blog Post</Heading>\n        <Lumeo.Text Size=\"sm\" Color=\"muted\">Published on Jan 12, 2025</Lumeo.Text>\n    </CardHeader>\n    <CardContent>\n        <Lumeo.Text Size=\"sm\" Color=\"foreground\">\n            Learn how to build accessible, composable UI components using\n            Blazor and Tailwind CSS in this in-depth guide.\n        </Lumeo.Text>\n    </CardContent>\n    <CardFooter>\n        <Flex Gap=\"2\" Class=\"w-full\">\n            <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">\n                <Blazicon Svg=\"Lucide.Copy\" class=\"h-4 w-4\" /> Edit\n            </Button>\n            <Button Variant=\"Button.ButtonVariant.Destructive\" Size=\"Button.ButtonSize.Sm\">\n                <Blazicon Svg=\"Lucide.Trash\" class=\"h-4 w-4\" /> Delete\n            </Button>\n        </Flex>\n    </CardFooter>\n</Card>"
      },
      {
        "title": "Horizontal Card",
        "code": "<Card>\n    <Flex>\n        <Center Class=\"w-32 h-32 rounded-l-lg bg-muted shrink-0\">\n            <Blazicon Svg=\"Lucide.Star\" class=\"h-10 w-10 text-muted-foreground\" />\n        </Center>\n        <Stack Gap=\"0\" Class=\"flex-1\">\n            <CardHeader>\n                <Heading Level=\"3\" Size=\"base\" Weight=\"semibold\" Class=\"leading-none tracking-tight\">Featured Article</Heading>\n                <Lumeo.Text Size=\"sm\" Color=\"muted\">5 min read</Lumeo.Text>\n            </CardHeader>\n            <CardContent>\n                <Lumeo.Text Size=\"sm\" Color=\"muted\">\n                    An introduction to modern component-driven design systems.\n                </Lumeo.Text>\n            </CardContent>\n            <CardFooter>\n                <Button Variant=\"Button.ButtonVariant.Link\" Class=\"px-0\">Read more</Button>\n            </CardFooter>\n        </Stack>\n    </Flex>\n</Card>"
      },
      {
        "title": "With Form",
        "code": "<Card>\n    <CardHeader>\n        <Heading Level=\"3\" Size=\"lg\" Class=\"leading-none tracking-tight\">Create project</Heading>\n        <Lumeo.Text Size=\"sm\" Color=\"muted\">Deploy your new project in one click.</Lumeo.Text>\n    </CardHeader>\n    <CardContent>\n        <Stack Gap=\"4\">\n            <FormField Label=\"Name\">\n                <Input placeholder=\"Name of your project\" />\n            </FormField>\n            <FormField Label=\"Description\">\n                <Input placeholder=\"Describe your project\" />\n            </FormField>\n        </Stack>\n    </CardContent>\n    <CardFooter>\n        <Flex Justify=\"between\" Class=\"w-full\">\n            <Button Variant=\"Button.ButtonVariant.Outline\">Cancel</Button>\n            <Button>Deploy</Button>\n        </Flex>\n    </CardFooter>\n</Card>"
      }
    ],
    "subComponents": {
      "CardContent": {
        "componentName": "CardContent",
        "fileName": "CardContent.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "CardFooter": {
        "componentName": "CardFooter",
        "fileName": "CardFooter.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "CardHeader": {
        "componentName": "CardHeader",
        "fileName": "CardHeader.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      }
    },
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "card",
  "docsUrl": "https://lumeo.nativ.sh/components/card",
  "sourceUrl": [
    {
      "file": "UI/Card/Card.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Card/Card.razor"
    },
    {
      "file": "UI/Card/CardContent.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Card/CardContent.razor"
    },
    {
      "file": "UI/Card/CardFooter.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Card/CardFooter.razor"
    },
    {
      "file": "UI/Card/CardHeader.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Card/CardHeader.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Card/Card.razor",
      "content": "@namespace Lumeo\n@inject Lumeo.Services.IComponentInteropService Interop\n\n@if (OnClick.HasDelegate)\n{\n    <div @ref=\"_el\"\n         class=\"@CssClass\"\n         role=\"button\"\n         tabindex=\"0\"\n         @onclick=\"OnClick\"\n         @onkeydown=\"HandleKeyDown\"\n         @attributes=\"AdditionalAttributes\">\n        @ChildContent\n    </div>\n}\nelse\n{\n    <div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n        @ChildContent\n    </div>\n}\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n\n    /// <summary>\n    /// Optional click handler. When set, the card becomes a button-role\n    /// interactive surface with <c>cursor-pointer</c>, focus-visible ring,\n    /// keyboard activation, and honours <see cref=\"PressEffect\"/>.\n    /// </summary>\n    [Parameter] public EventCallback<Microsoft.AspNetCore.Components.Web.MouseEventArgs> OnClick { get; set; }\n\n    /// <summary>\n    /// Visual feedback when the card is pressed (only applies when\n    /// <see cref=\"OnClick\"/> is bound). Default is\n    /// <see cref=\"Button.ButtonPressEffect.None\"/>.\n    /// </summary>\n    [Parameter] public Button.ButtonPressEffect PressEffect { get; set; } = Button.ButtonPressEffect.None;\n\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private Microsoft.AspNetCore.Components.ElementReference _el;\n\n    private bool IsInteractive => OnClick.HasDelegate;\n\n    private string? PressEffectClass => PressEffect switch\n    {\n        Button.ButtonPressEffect.Scale => \"lumeo-press-scale\",\n        Button.ButtonPressEffect.Brightness => \"lumeo-press-brightness\",\n        Button.ButtonPressEffect.Ripple => \"lumeo-press-ripple\",\n        _ => null\n    };\n\n    private string CssClass => string.Join(\" \", new[]\n    {\n        \"rounded-lg border border-border bg-card text-card-foreground\",\n        IsInteractive ? \"cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent/30\" : null,\n        IsInteractive ? PressEffectClass : null,\n        Class\n    }.Where(s => !string.IsNullOrWhiteSpace(s)));\n\n    private async Task HandleKeyDown(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs e)\n    {\n        if (!IsInteractive) return;\n        if (e.Key == \"Enter\" || e.Key == \" \")\n        {\n            await OnClick.InvokeAsync(new Microsoft.AspNetCore.Components.Web.MouseEventArgs());\n        }\n    }\n\n    protected override async Task OnAfterRenderAsync(bool firstRender)\n    {\n        if (firstRender && IsInteractive && PressEffect == Button.ButtonPressEffect.Ripple)\n        {\n            try\n            {\n                await Interop.RippleAttachAsync(_el);\n            }\n            catch (Microsoft.JSInterop.JSDisconnectedException) { }\n        }\n    }\n}\n"
    },
    {
      "path": "UI/Card/CardContent.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@($\"p-6 pt-0 {Class}\".Trim())\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n}\n"
    },
    {
      "path": "UI/Card/CardFooter.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@($\"flex items-center p-6 pt-0 {Class}\".Trim())\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n}\n"
    },
    {
      "path": "UI/Card/CardHeader.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@($\"flex flex-col space-y-1.5 p-6 {Class}\".Trim())\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Card",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "CardContent",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "CardFooter",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "CardHeader",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [
    {
      "service": "IComponentInteropService",
      "namespace": "Lumeo.Services"
    }
  ],
  "cascadingDependencies": [],
  "relatedComponents": [
    {
      "name": "CardContent",
      "reason": "sub-component"
    },
    {
      "name": "CardFooter",
      "reason": "sub-component"
    },
    {
      "name": "CardHeader",
      "reason": "sub-component"
    }
  ],
  "keyboardInteractions": [
    {
      "key": "Enter",
      "action": "HandleKeyDown handles Enter in Card.razor"
    },
    {
      "key": " ",
      "action": "HandleKeyDown handles   in Card.razor"
    }
  ],
  "tests": [
    "tests/Lumeo.Docs.Tests/Catalog/CatalogCardTests.cs",
    "tests/Lumeo.Tests/Components/Card/CardInteractiveTests.cs",
    "tests/Lumeo.Tests/Components/Card/CardTests.cs"
  ],
  "mdSummary": "# Card\n\nFlexible container with header, content, and footer slots.\n\n**Package:** `Lumeo` · **Category:** Data Display/Cards & Layout\n**Docs:** https://lumeo.nativ.sh/components/card\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Card | ChildContent | `RenderFragment?` | `` |  |\n| Card | Class | `string?` | `` |  |\n| Card | OnClick | `EventCallback<Microsoft.AspNetCore.Components.Web.MouseEventArgs>` | `` | Optional click handler. When set, the card becomes a button-role interactive surface with cursor-pointer, focus-visible ring, keyboard activation, and honours PressEffect. |\n| Card | PressEffect | `Button.ButtonPressEffect` | `Button.ButtonPressEffect.None` | Visual feedback when the card is pressed (only applies when OnClick is bound). Default is None. |\n| Card | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| CardContent | ChildContent | `RenderFragment?` | `` |  |\n| CardContent | Class | `string?` | `` |  |\n| CardContent | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| CardFooter | ChildContent | `RenderFragment?` | `` |  |\n| CardFooter | Class | `string?` | `` |  |\n| CardFooter | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| CardHeader | ChildContent | `RenderFragment?` | `` |  |\n| CardHeader | Class | `string?` | `` |  |\n| CardHeader | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Card) — RenderFragment slot\n- `ChildContent` (CardContent) — RenderFragment slot\n- `ChildContent` (CardFooter) — RenderFragment slot\n- `ChildContent` (CardHeader) — RenderFragment slot\n\n## Events\n- `OnClick` (`EventCallback<Microsoft.AspNetCore.Components.Web.MouseEventArgs>`) — Optional click handler. When set, the card becomes a button-role interactive surface with cursor-pointer, focus-visible ring, keyboard activation, and honours PressEffect.\n\n## Sub-components\n- `CardContent`, `CardFooter`, `CardHeader`\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- `IComponentInteropService` (Lumeo.Services)\n\n## Keyboard\n- `Enter` — HandleKeyDown handles Enter in Card.razor\n- ` ` — HandleKeyDown handles   in Card.razor\n\n## Example\n```razor\n<Card />\n```\n\n## CSS variables\n`--color-accent`, `--color-border`, `--color-card`, `--color-card-foreground`, `--color-ring`, `--radius`\n\n## Files\n- `UI/Card/Card.razor`\n- `UI/Card/CardContent.razor`\n- `UI/Card/CardFooter.razor`\n- `UI/Card/CardHeader.razor`\n"
}