A2Card

Card container component with configurable width variants.

Props

Property	Type	Default	Description
width	`xs	sm	md
header	string	-	Header title (auto-shows Document icon when set)
headerBgColor	string	#F8F8FB	Header background color
shadow	`always	hover	never`

Width Standards

Value	Pixels
xs	300px
sm	400px
md	560px
lg	720px
xl	960px
full	100%

Basic Example

Basic Card

{ "id": "card1", "type": "a2-card", "props": { "width": "xs", "header": "User Info" }, "children": [ { "id": "text1", "type": "a2-text", "props": { "text": "This is a basic card." } } ] }

无内容

Nested Layout Example

Card with Row/Column

{ "id": "card2", "type": "a2-card", "props": { "width": "xs", "header": "Contact Form" }, "children": [ { "id": "colMain", "type": "a2-column", "props": { "gap": 16 }, "children": [ { "id": "nameField", "type": "a2-text-field", "props": { "label": "Name", "prop": "name" } }, { "id": "emailField", "type": "a2-text-field", "props": { "label": "Email", "prop": "email" } } ] } ] }

无内容

JSON Schema

{
  "id": "cardId",
  "type": "a2-card",
  "props": {
    "width": "xs",
    "header": "Card Title",
    "shadow": "hover"
  },
  "children": []
}