{
  "name": "ds-card",
  "description": "Card container for content",
  "docUrl": "https://design.soracom.io/design-system/elements/card/",
  "category": "elements",
  "htmlElements": [
    "div",
    "a"
  ],
  "isWebComponent": false,
  "modifiers": {
    "color": "all",
    "visual-state": [
      "--alert",
      "--warning",
      "--success",
      "--info"
    ],
    "variant": [
      "--panel",
      "--details",
      "--tiled",
      "--plain",
      "--simple",
      "--diagram",
      "--clickable"
    ],
    "size": [
      "--small",
      "--large"
    ],
    "layout": [
      "--center",
      "--limit"
    ],
    "state": [
      "--loading",
      "--loading-refresh"
    ],
    "icon": "all",
    "indent": "all",
    "gap": "all"
  },
  "examples": [
    {
      "name": "basic",
      "html": "<div class=\"ds-card\"><div class=\"ds-text --label\">Card Title</div><div class=\"ds-text\">Card content goes here.</div></div>"
    },
    {
      "name": "with-footer",
      "html": "<div class=\"ds-card\"><div class=\"ds-text --label\">Card Title</div><div class=\"ds-text\">Card content goes here.</div><div class=\"__footer\"><span>Footer</span><i class=\"ds-icon --icon-arrow-right\"></i></div></div>"
    },
    {
      "name": "with-close",
      "html": "<div class=\"ds-card\"><div class=\"ds-text --label\">Card Title</div><div class=\"ds-text\">Card content goes here.</div><button class=\"ds-button --primary --small __close\"><span>Close</span></button></div>"
    },
    {
      "name": "with-pinned-tag",
      "html": "<div class=\"ds-card\"><p class=\"ds-tag --pinned\"><span>Category</span></p><div class=\"ds-text --label\">Card Title</div><div class=\"ds-text\">Card content goes here.</div></div>"
    },
    {
      "name": "alert",
      "html": "<div class=\"ds-card --alert\"><div class=\"ds-text --label\">Alert</div><div class=\"ds-text\">Alert card content.</div></div>"
    },
    {
      "name": "info",
      "html": "<div class=\"ds-card --info\"><div class=\"ds-text --label\">Info</div><div class=\"ds-text\">Info card content.</div></div>"
    },
    {
      "name": "color-magenta",
      "html": "<div class=\"ds-card --color-magenta\"><div class=\"ds-text --label\">Magenta</div><div class=\"ds-text\">Colored card content.</div></div>"
    },
    {
      "name": "color-magenta-lightest",
      "html": "<div class=\"ds-card --color-magenta-lightest\"><div class=\"ds-text --label\">Magenta Lightest</div><div class=\"ds-text\">Light colored card content.</div></div>"
    },
    {
      "name": "indent-large",
      "html": "<div class=\"ds-card --indent-large\"><div class=\"ds-text --label\">Large Indent</div><div class=\"ds-text\">Card with extra padding.</div></div>"
    },
    {
      "name": "indent-small",
      "html": "<div class=\"ds-card --indent-small\"><div class=\"ds-text --label\">Small Indent</div><div class=\"ds-text\">Card with less padding.</div></div>"
    },
    {
      "name": "loading",
      "html": "<div class=\"ds-card --loading\"><div class=\"ds-text --label\">Loading</div><div class=\"ds-text\">Content is loading.</div></div>"
    },
    {
      "name": "loading-with-message",
      "html": "<div class=\"ds-card --loading\" data-ds-message=\"Loading data...\"><div class=\"ds-text --label\">Card</div><div class=\"ds-text\">Content behind overlay.</div></div>"
    },
    {
      "name": "message",
      "html": "<div class=\"ds-card\" data-ds-message=\"No data available\"><div class=\"ds-text --label\">Empty</div><div class=\"ds-text\">Content area.</div></div>"
    },
    {
      "name": "message-with-icon",
      "html": "<div class=\"ds-card --icon-rocket\" data-ds-message=\"Launching soon\"><div class=\"ds-text --label\">Card</div><div class=\"ds-text\">Content area.</div></div>"
    },
    {
      "name": "details",
      "html": "<div class=\"ds-card --details\"><i class=\"ds-icon --massive --icon-sim\"></i><div class=\"ds-heading --large\">Title</div><div class=\"ds-text\">Details card content.</div><button class=\"__footer --label\"><span>Details</span><i class=\"ds-icon --icon-arrow-right\"></i></button></div>"
    },
    {
      "name": "panel",
      "html": "<div class=\"ds-card --panel\"></div>"
    },
    {
      "name": "panel-with-content",
      "html": "<div class=\"ds-card --panel --indent-small\"><p class=\"ds-tag --pinned\"><span>Category</span></p><div class=\"ds-text --label\">Title</div><div class=\"ds-text\">Panel card content.</div></div>"
    },
    {
      "name": "link-card",
      "html": "<a class=\"ds-card --indent-small\" href=\"#\"><div class=\"ds-text --label --xlarge\">Clickable Card</div><hr /><div class=\"ds-text --small\">Card content with link behavior.</div><footer><div><span class=\"ds-tag --small\"><span>Tag</span></span></div></footer></a>"
    }
  ]
}