{
"element": "nve-codeblock",
"entrypoint": "@nvidia-elements/code/codeblock/codeblock.examples.json",
"items": [
{
"id": "code-codeblock",
"name": "Default",
"template": " function getTime(): number { return new Date().getTime(); } \n",
"summary": "Basic codeblock with syntax highlighting for source code.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "code-codeblock-flat",
"name": "Flat",
"template": "\n function getTime(): number { return new Date().getTime(); }\n\n",
"summary": "Codeblock with flat container styling for minimal visual emphasis.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "code-codeblock-theme",
"name": "Theme",
"template": "\n function getTime(): number { return new Date().getTime(); }\n\n
\n\n function getTime(): number { return new Date().getTime(); }\n\n",
"summary": "Light and dark theme variations for different UI contexts.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "code-codeblock-copy",
"name": "Copy",
"template": "\n \n function getTime(): number { return new Date().getTime(); }\n\n",
"summary": "Codeblock with copy button action for easy code sharing and reuse.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "code-codeblock-code",
"name": "Code",
"template": "\n\n",
"summary": "Codeblock using the code property for programmatic/dynamic usage.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "code-codeblock-line-numbers",
"name": "LineNumbers",
"template": "\n function getTime(): number { return new Date().getTime(); }\n\n",
"summary": "Codeblock with line numbers for easier code reference and debugging.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "code-codeblock-highlight",
"name": "Highlight",
"template": "\n function getTime(): number { return new Date().getTime(); }\n\n",
"summary": "Codeblock with specific line highlighting to draw attention to important code sections.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "code-codeblock-overflow",
"name": "Overflow",
"template": "\n import{LitElement as t,html as e}from\"lit\";import{property as s}from\"lit/decorators/property.js\";import{state as\n o}from\"lit/decorators/state.js\"; import{unsafeHTML as i}from\"lit/directives/unsafe-html.js\"; import{useStyles as\n r,shiftLeft as n}from\"@nvidia-elements/core/internal\"; import l from\"./codeblock.css.js\"; import a\n from\"highlight.js/lib/core\"; import h from\"highlight.js/lib/languages/shell\";\n\n",
"summary": "Codeblock with constrained height for scrollable overflow behavior with long code.",
"description": "",
"composition": false,
"tags": [
"test-case"
]
},
{
"id": "code-codeblock-line-wrap",
"name": "LineWrap",
"template": "\n\n \n\n[\n {\"id\":\"h100\",\"name\":\"H100 SXM5\",\"series\":\"H100 Series\",\"architecture\":\"Hopper\",\"process_node\":\"4nm\",\"cuda_cores\":16896,\"rt_cores\":0,\"tensor_cores\":528,\"base_clock\":1410,\"boost_clock\":1980,\"memory\":{\"size\":\"80GB\",\"type\":\"HBM3\",\"bandwidth\":\"3350 GB/s\",\"bus_width\":5120},\"ai_performance\":{\"fp32_tflops\":67,\"tensor_tflops\":1979,\"transformer_engine\":true,\"fp8_support\":true,\"nvlink_bandwidth\":\"900 GB/s\"},\"power_consumption\":700,\"msrp\":25000,\"release_date\":\"2022-03-22\",\"ai_workloads\":[\"large_language_models\",\"training\",\"inference\",\"hpc\"]},\n {\"id\":\"a100\",\"name\":\"A100 SXM4\",\"series\":\"A100 Series\",\"architecture\":\"Ampere\",\"process_node\":\"7nm\",\"cuda_cores\":6912,\"rt_cores\":0,\"tensor_cores\":432,\"base_clock\":765,\"boost_clock\":1410,\"memory\":{\"size\":\"80GB\",\"type\":\"HBM2e\",\"bandwidth\":\"2039 GB/s\",\"bus_width\":5120},\"ai_performance\":{\"fp32_tflops\":19.5,\"tensor_tflops\":624,\"sparsity_support\":true,\"multi_instance_gpu\":7,\"nvlink_bandwidth\":\"600 GB/s\"},\"power_consumption\":400,\"msrp\":15000,\"release_date\":\"2020-05-14\",\"ai_workloads\":[\"training\",\"inference\",\"data_analytics\",\"hpc\"]}\n]\n\n \n\n \n\n[\n {\"id\":\"h100\",\"name\":\"H100 SXM5\",\"series\":\"H100 Series\",\"architecture\":\"Hopper\",\"process_node\":\"4nm\",\"cuda_cores\":16896,\"rt_cores\":0,\"tensor_cores\":528,\"base_clock\":1410,\"boost_clock\":1980,\"memory\":{\"size\":\"80GB\",\"type\":\"HBM3\",\"bandwidth\":\"3350 GB/s\",\"bus_width\":5120},\"ai_performance\":{\"fp32_tflops\":67,\"tensor_tflops\":1979,\"transformer_engine\":true,\"fp8_support\":true,\"nvlink_bandwidth\":\"900 GB/s\"},\"power_consumption\":700,\"msrp\":25000,\"release_date\":\"2022-03-22\",\"ai_workloads\":[\"large_language_models\",\"training\",\"inference\",\"hpc\"]},\n {\"id\":\"a100\",\"name\":\"A100 SXM4\",\"series\":\"A100 Series\",\"architecture\":\"Ampere\",\"process_node\":\"7nm\",\"cuda_cores\":6912,\"rt_cores\":0,\"tensor_cores\":432,\"base_clock\":765,\"boost_clock\":1410,\"memory\":{\"size\":\"80GB\",\"type\":\"HBM2e\",\"bandwidth\":\"2039 GB/s\",\"bus_width\":5120},\"ai_performance\":{\"fp32_tflops\":19.5,\"tensor_tflops\":624,\"sparsity_support\":true,\"multi_instance_gpu\":7,\"nvlink_bandwidth\":\"600 GB/s\"},\"power_consumption\":400,\"msrp\":15000,\"release_date\":\"2020-05-14\",\"ai_workloads\":[\"training\",\"inference\",\"data_analytics\",\"hpc\"]}\n]\n\n \n
\n",
"summary": "Comparison of line wrapping vs horizontal scrolling for long code lines in constrained widths.",
"description": "",
"composition": false,
"tags": [
"test-case"
]
}
]
}