{
  "element": "nve-text",
  "entrypoint": "@nvidia-elements/styles/typography.examples.json",
  "items": [
    {
      "id": "styles-typography",
      "name": "Default",
      "template": "<div nve-layout=\"column gap:lg\">\n  <p nve-text=\"display\">display</p>\n  <p nve-text=\"heading\">heading</p>\n  <p nve-text=\"body\">body</p>\n  <p nve-text=\"label\">label</p>\n</div>\n",
      "summary": "Foundational text types (display, heading, body, label) for establishing visual hierarchy in the design system.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-typography-headings",
      "name": "Headings",
      "template": "<div nve-layout=\"column gap:lg\">\n  <h1 nve-text=\"display\">display</h1>\n  <h2 nve-text=\"heading\">heading</h2>\n  <h3 nve-text=\"body\">body</h3>\n  <h4 nve-text=\"label\">label</h4>\n</div>\n",
      "summary": "Text types applied to semantic HTML heading elements for accessible content structure.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-typography-size",
      "name": "Size",
      "template": "<div nve-layout=\"column gap:lg\">\n  <p nve-text=\"display xl\">display xl</p>\n  <p nve-text=\"display lg\">display lg</p>\n  <p nve-text=\"display\">display</p>\n  <p nve-text=\"display sm\">display sm</p>\n  <p nve-text=\"heading xl\">heading xl</p>\n  <p nve-text=\"heading lg\">heading lg</p>\n  <p nve-text=\"heading\">heading</p>\n  <p nve-text=\"heading sm\">heading sm</p>\n  <p nve-text=\"heading xs\">heading xs</p>\n  <p nve-text=\"body xl\">body xl</p>\n  <p nve-text=\"body lg\">body lg</p>\n  <p nve-text=\"body\">body</p>\n  <p nve-text=\"body sm\">body sm</p>\n  <p nve-text=\"label xl\">label xl</p>\n  <p nve-text=\"label lg\">label lg</p>\n  <p nve-text=\"label\">label</p>\n  <p nve-text=\"label sm\">label sm</p>\n</div>\n",
      "summary": "Displays the complete range of size modifiers for each text type, enabling precise typographic scale and size control.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-typography-color",
      "name": "Color",
      "template": "<div nve-layout=\"column gap:lg\">\n  <p nve-text=\"body\">default</p>\n  <p nve-text=\"body emphasis\">emphasis</p>\n  <p nve-text=\"body muted\">muted</p>\n  <div nve-theme=\"root dark\" nve-layout=\"column gap:lg\">\n    <p nve-text=\"body white\">white</p>\n  </div>\n  <div nve-theme=\"root light\" nve-layout=\"column gap:lg\">\n    <p nve-text=\"body black\">black</p>\n  </div>\n</div>\n",
      "summary": "Color variations for text to convey importance levels and ensure proper contrast in light and dark themes.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "styles-typography-weights",
      "name": "Weights",
      "template": "<div nve-layout=\"column gap:lg\">\n  <p nve-text=\"body bold\">bold</p>\n  <p nve-text=\"body semibold\">semibold</p>\n  <p nve-text=\"body medium\">medium</p>\n  <p nve-text=\"body\">default</p>\n  <p nve-text=\"body light\">light</p>\n</div>\n",
      "summary": "Available font weight options for creating visual emphasis and hierarchy within text content.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-typography-list",
      "name": "List",
      "template": "<ul nve-text=\"list\">\n  <li>list item 1</li>\n  <li>list item 2</li>\n  <li>list item 3</li>\n  <li>\n    Long line of text.. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum\n    dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum\n    dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum\n    dolor sit amet.\n  </li>\n</ul>\n",
      "summary": "Styled unordered list with consistent spacing and bullet markers.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-typography-ordered-list",
      "name": "OrderedList",
      "template": "<ol nve-text=\"list\">\n  <li>list item</li>\n  <li>list item</li>\n  <li>list item</li>\n</ol>\n",
      "summary": "Styled ordered list with sequential numbering for step-by-step or prioritized content.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-typography-unstyled-list",
      "name": "UnstyledList",
      "template": "<ul nve-text=\"list unstyled\">\n  <li>list item</li>\n  <li>list item</li>\n  <li>list item</li>\n</ul>\n",
      "summary": "Displays a list without bullets or default styling, useful for custom layouts or semantic markup without visual indicators.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "styles-typography-nav-list",
      "name": "NavList",
      "template": "<ul nve-text=\"list nav\">\n  <li><a nve-text=\"link\" href=\"#navigation-list\">Welcome</a></li>\n  <li><a nve-text=\"link\" href=\"#navigation-list\" aria-current=\"page\">Installation</a></li>\n  <li>\n    <ul nve-text=\"list\">\n      <li><a nve-text=\"link\" href=\"#navigation-list\">Installing Dependencies</a></li>\n      <li><a nve-text=\"link\" href=\"#navigation-list\">Configure Library</a></li>\n    </ul>\n  </li>\n  <li><a nve-text=\"link\" href=\"#navigation-list\">Basic Usage</a></li>\n  <li>\n    <ul nve-text=\"list\">\n      <li><a nve-text=\"link\" href=\"#navigation-list\">Architecture</a></li>\n      <li><a nve-text=\"link\" href=\"#navigation-list\">Reference</a></li>\n      <li><a nve-text=\"link\" href=\"#navigation-list\">API</a></li>\n    </ul>\n  </li>\n  <li>External Links</li>\n  <li>\n    <ul nve-text=\"list\">\n      <li><a nve-text=\"link\" href=\"#navigation-list\">Join the Community</a></li>\n      <li>Submit an Issue</li>\n      <li>\n        <ul nve-text=\"list\">\n          <li><a nve-text=\"link\" href=\"#navigation-list\">Feature</a></li>\n          <li><a nve-text=\"link\" href=\"#navigation-list\">Fix</a></li>\n        </ul>\n      </li>\n    </ul>\n  </li>\n</ul>\n",
      "summary": "Presents a navigation-optimized list with nested structure, ideal for sidebars and table of contents.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "styles-typography-link",
      "name": "Link",
      "template": "<div nve-layout=\"column gap:lg\">\n  <a nve-text=\"body link\" href=\"#\">link</a>\n  <a nve-text=\"body link hover\" href=\"#\">link (hover)</a>\n  <a nve-text=\"body link visited\" href=\"#\">link (visited)</a>\n  <nve-divider></nve-divider>\n  <a nve-text=\"link\" href=\"#\">link</a>\n  <a nve-text=\"link muted\" href=\"#\">link muted</a>\n  <a nve-text=\"link emphasis\" href=\"#\">link emphasis</a>\n  <nve-divider></nve-divider>\n\n  <a nve-text=\"link sm\" href=\"#\">link sm</a>\n  <a nve-text=\"link\" href=\"#\">link</a>\n  <a nve-text=\"link lg\" href=\"#\">link lg</a>\n  <a nve-text=\"link xl\" href=\"#\">link xl</a>\n</div>\n",
      "summary": "Link styles including states, emphasis levels, and sizes for clear interactive affordances.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "styles-typography-transforms",
      "name": "Transforms",
      "template": "<div nve-layout=\"column gap:lg\">\n  <p nve-text=\"body uppercase\">uppercase</p>\n  <p nve-text=\"body lowercase\">LOWERCASE</p>\n  <p nve-text=\"body capitalize\">capitalize</p>\n  <p nve-text=\"body truncate\" style=\"width: 350px\">\n    truncate: dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas\n    molestias excepturi\n  </p>\n</div>\n",
      "summary": "Text transformation utilities for case changes and truncation to handle overflow gracefully.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-typography-line-height-relative",
      "name": "LineHeightRelative",
      "template": "<div nve-layout=\"column\">\n  <p nve-text=\"tight\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n  </p>\n  <p nve-text=\"snug\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n  </p>\n  <p nve-text=\"moderate\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n  </p>\n  <p nve-text=\"relaxed\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n  </p>\n</div>\n",
      "summary": "Relative line height options that scale with font size, optimizing readability for different text densities.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "styles-typography-description-list",
      "name": "DescriptionList",
      "template": "<dl nve-layout=\"column gap:md\">\n  <dt nve-text=\"body muted medium\">Knot</dt>\n  <dd nve-text=\"body\">Knot is a unit of speed equaling 1 nautical mile per hour.</dd>\n  <dt nve-text=\"body muted medium\">Port</dt>\n  <dd 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 bow\n    (the front of the vessel).\n  </dd>\n  <dt nve-text=\"body muted medium\">Starboard</dt>\n  <dd nve-text=\"body\">\n    Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing towards\n    the bow (the front of the vessel).\n  </dd>\n</dl>\n",
      "summary": "Description list layout with consistent spacing and typography styles.",
      "description": "",
      "composition": false,
      "tags": []
    }
  ]
}