{
  "element": "nve-card",
  "entrypoint": "@nvidia-elements/core/card/card.examples.json",
  "items": [
    {
      "id": "card",
      "name": "Default",
      "template": "<nve-card>\n  <nve-card-header>\n    <h2 nve-text=\"heading sm medium\">Heading</h2>\n  </nve-card-header>\n  <nve-card-content>\n    <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n  </nve-card-content>\n  <nve-card-footer>\n    <p nve-text=\"body\">card footer</p>\n  </nve-card-footer>\n</nve-card>\n",
      "summary": "Basic card component with header, content, and footer sections. Use this as a starting point for simple content containers.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "card-actions",
      "name": "Actions",
      "template": "<nve-card>\n  <nve-card-header>\n    <div nve-layout=\"column gap:xs\">\n      <h2 nve-text=\"heading sm bold\">Heading</h2>\n      <h3 nve-text=\"body sm muted\">Sub Heading</h3>\n    </div>\n  </nve-card-header>\n  <nve-card-content>\n    <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n  </nve-card-content>\n  <nve-card-footer>\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"flat\" style=\"margin-left: auto\">cancel</nve-button>\n      <nve-button>action</nve-button>\n    </div>\n  </nve-card-footer>\n</nve-card>\n",
      "summary": "Card with action buttons in the footer, including primary and secondary actions for interactive card layouts.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "card-media-card",
      "name": "MediaCard",
      "template": "<div nve-layout=\"grid gap:md span-items:6 align:stretch\" style=\"max-width: 900px\">\n  <nve-card style=\"height: 100%; width: 100%\">\n    <img\n      src=\"static/images/test-image-1.svg\"\n      alt=\"example visualization for media card demo\"\n      loading=\"lazy\"\n      style=\"width: 100%; object-fit: cover\"\n    />\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n    </nve-card-content>\n  </nve-card>\n  <nve-card style=\"height: 100%; width: 100%\">\n    <img\n      src=\"static/images/test-image-1.svg\"\n      alt=\"example visualization for media card demo\"\n      loading=\"lazy\"\n      style=\"width: 100%; object-fit: cover\"\n    />\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n    </nve-card-content>\n  </nve-card>\n</div>\n",
      "summary": "Cards with media content (images) displayed in a grid layout, ideal for photo galleries, product catalogs, or visual content showcases.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "card-with-divider",
      "name": "WithDivider",
      "template": "<nve-card style=\"width: 400px; height: 300px\">\n  <nve-card-header>\n    <h2 nve-text=\"heading sm bold\">Heading</h2>\n  </nve-card-header>\n  <nve-card-content>\n    <p nve-text=\"body\">card content</p>\n  </nve-card-content>\n  <nve-divider></nve-divider>\n  <nve-card-content>\n    <p nve-text=\"body\">card content</p>\n  </nve-card-content>\n</nve-card>\n",
      "summary": "Card with a divider separating different content sections, useful for organizing related but distinct information within a single card.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "card-description-list",
      "name": "DescriptionList",
      "template": "<nve-card style=\"width: 650px\">\n  <nve-card-header>\n    <h2 nve-text=\"heading sm bold\">Nautical Terms</h2>\n  </nve-card-header>\n  <nve-card-content>\n    <dl nve-layout=\"grid gap:lg\">\n      <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Knot</dt>\n      <dd nve-layout=\"span:8\" nve-text=\"body\">Knot is a unit of speed equaling 1 nautical mile per hour.</dd>\n      <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Port</dt>\n      <dd nve-layout=\"span:8\" nve-text=\"body\">\n        Port is the nautical term that refers to the left side of a ship, as perceived by a person facing towards the\n        bow (the front of the vessel).\n      </dd>\n      <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Starboard</dt>\n      <dd nve-layout=\"span:8\" nve-text=\"body\">\n        Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing\n        towards the bow (the front of the vessel).\n      </dd>\n    </dl>\n  </nve-card-content>\n</nve-card>\n",
      "summary": "Card containing a description list layout, perfect for displaying key-value pairs, definitions, or structured data in a readable format.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "card-with-tabs",
      "name": "WithTabs",
      "template": "<nve-card style=\"width: 400px; height: 200px\">\n  <nve-card-header>\n    <h2 nve-text=\"heading sm bold\">Heading</h2>\n    <nve-tabs>\n      <nve-tabs-item selected>tab 1</nve-tabs-item>\n      <nve-tabs-item>tab 2</nve-tabs-item>\n      <nve-tabs-item>tab 3</nve-tabs-item>\n    </nve-tabs>\n  </nve-card-header>\n  <nve-card-content>\n    <p nve-text=\"body\">card content</p>\n  </nve-card-content>\n</nve-card>\n",
      "summary": "Card with integrated tabs in the header for multi-panel content within a single card interface.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "card-container-full",
      "name": "ContainerFull",
      "template": "<nve-card container=\"full\">\n  <nve-card-content>\n    <p nve-text=\"body\">container full</p>\n  </nve-card-content>\n</nve-card>\n",
      "summary": "Card with full container styling that extends to the edges, suitable for full-width layouts or when you want the card to blend with its container.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "card-container-flat",
      "name": "ContainerFlat",
      "template": "<nve-card container=\"flat\">\n  <nve-card-content>\n    <p nve-text=\"body\">container flat</p>\n  </nve-card-content>\n</nve-card>\n",
      "summary": "Card with flat container styling that removes the default card elevation, ideal for subtle content containers or when you want a more minimal appearance.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "card-audit",
      "name": "Audit",
      "template": "<!-- invalid padding usage -->\n<nve-card nve-layout=\"pad:md\"></nve-card>\n<!-- invalid parent element -->\n<nve-card-header> card header </nve-card-header>\n<nve-card-content> card content </nve-card-content>\n<nve-card-footer> card footer </nve-card-footer>\n",
      "summary": "Examples of invalid card usage patterns for testing and documentation purposes, showing what not to do when implementing cards.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "card-overflow-content",
      "name": "OverflowContent",
      "template": "<nve-card style=\"height: 250px; width: 400px\">\n  <nve-card-header>\n    <h2 nve-text=\"heading sm medium\">Heading</h2>\n  </nve-card-header>\n  <nve-card-content>\n    <p nve-text=\"body\" style=\"margin-bottom: 300px\">card content</p>\n    <p nve-text=\"body\">card content</p>\n  </nve-card-content>\n  <nve-card-footer>\n    <p nve-text=\"body\">card footer</p>\n  </nve-card-footer>\n</nve-card>\n",
      "summary": "Card with overflow content, where the card body scrolls when content exceeds the card height.",
      "description": "",
      "composition": false,
      "tags": []
    }
  ]
}