{
  "element": "nve-format-truncate",
  "entrypoint": "@nvidia-elements/core/format-truncate/format-truncate.examples.json",
  "items": [
    {
      "id": "format-truncate",
      "name": "Default",
      "template": "<div nve-layout=\"column gap:sm\" style=\"max-width: 16rem\">\n  <nve-format-truncate position=\"start\">training-pipeline-2026-08-05-production</nve-format-truncate>\n  <nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate>\n  <nve-format-truncate position=\"end\">training-pipeline-2026-08-05-production</nve-format-truncate>\n</div>\n",
      "summary": "Start, center, and end positions keep the most useful part of constrained text. Choose the position that matches how users distinguish each value.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "format-truncate-typography",
      "name": "Typography",
      "template": "<div nve-layout=\"column gap:lg align:stretch\" style=\"max-width: 16rem\">\n  <h2 nve-text=\"heading lg\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></h2>\n  <p nve-text=\"body\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></p>\n  <code nve-text=\"code sm muted\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></code>\n</div>\n",
      "summary": "Inherited heading, body, and code styles keep truncated text aligned with surrounding typography. Place the component inside semantic text elements to preserve their visual hierarchy.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "format-truncate-bias",
      "name": "Bias",
      "template": "<div nve-layout=\"column gap:sm\" style=\"max-width: 16rem\">\n  <nve-format-truncate position=\"center\" bias=\"start\" preserve=\"10\">sha256:1234567890abcdef1234567890abcdef</nve-format-truncate>\n  <nve-format-truncate position=\"center\" bias=\"end\" preserve=\"10\">sha256:1234567890abcdef1234567890abcdef</nve-format-truncate>\n</div>\n",
      "summary": "Center truncation bias keeps units from either the start or end. Use end bias for shared suffixes and start bias for identifiers with meaningful endings.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "format-truncate-strategy",
      "name": "Strategy",
      "template": "<div nve-layout=\"column gap:sm\" style=\"max-width: 16rem\">\n  <nve-format-truncate position=\"center\" strategy=\"character\" preserve=\"8\">experiment-👩🏽‍💻-0123456789abcdef</nve-format-truncate>\n  <nve-format-truncate position=\"center\" strategy=\"word\" preserve=\"3\">NVIDIA autonomous vehicle training pipeline production run</nve-format-truncate>\n  <nve-format-truncate position=\"center\" strategy=\"path\" preserve=\"2\">/models/checkpoints/production/model.bin</nve-format-truncate>\n</div>\n",
      "summary": "Character, word, and path strategies preserve complete graphemes or meaningful text units. Match the strategy to identifiers, labels, or file paths.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "format-truncate-inline",
      "name": "Inline",
      "template": "<div nve-layout=\"row gap:sm\" style=\"max-width: 16rem\">\n  <nve-format-truncate position=\"start\">training-pipeline-2026-08-05-production</nve-format-truncate>\n  <nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate>\n  <nve-format-truncate position=\"end\">training-pipeline-2026-08-05-production</nve-format-truncate>\n</div>\n",
      "summary": "Truncate applies inline to adjacent text nodes.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "format-truncate-headings",
      "name": "Headings",
      "template": "<div nve-layout=\"column gap:sm\">\n  <h2 nve-text=\"heading lg\" style=\"width: 100%; max-width: 16rem\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></h2>\n  <h2 nve-text=\"heading\" style=\"width: 100%; max-width: 16rem\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></h2>\n  <h2 nve-text=\"heading sm\" style=\"width: 100%; max-width: 16rem\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></h2>\n</div>\n",
      "summary": "Truncate applies inline to heading text nodes.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}