Typography
The Typography utilities provides a flexible API to apply typography styles explicitly to elements. This enables full control of the visual styling of an element separate from the HTML semantics.
<p nve-text="display">display</p>
<p nve-text="heading">heading</p>
<p nve-text="body">body</p>
<p nve-text="label">label</p>
<p nve-text="code">cmd+c</p>
Installation
npm install @nvidia-elements/themes @nvidia-elements/styles
/* import the global CSS into your project (import may vary based on build tools) */
@import '@nvidia-elements/styles/dist/typography.css';
Framework Integrations
Some frameworks and libraries may require extra configuration to use the nve-text attribute.
See the links below for specific integration patterns for the following frameworks:
Types
Foundational text types (display, heading, body, label) for establishing visual hierarchy in the design system.
<div nve-layout="column gap:lg">
<p nve-text="display">display</p>
<p nve-text="heading">heading</p>
<p nve-text="body">body</p>
<p nve-text="label">label</p>
</div>
display
heading
body
label
Colors
Color variations for text to convey importance levels and ensure proper contrast in light and dark themes.
<div nve-layout="column gap:lg">
<p nve-text="body">default</p>
<p nve-text="body emphasis">emphasis</p>
<p nve-text="body muted">muted</p>
<div nve-theme="root dark" nve-layout="column gap:lg">
<p nve-text="body white">white</p>
</div>
<div nve-theme="root light" nve-layout="column gap:lg">
<p nve-text="body black">black</p>
</div>
</div>
Weights
Available font weight options for creating visual emphasis and hierarchy within text content.
<div nve-layout="column gap:lg">
<p nve-text="body bold">bold</p>
<p nve-text="body semibold">semibold</p>
<p nve-text="body medium">medium</p>
<p nve-text="body">default</p>
<p nve-text="body light">light</p>
</div>
bold
semibold
medium
default
light
Text transformation utilities for case changes and truncation to handle overflow gracefully.
<div nve-layout="column gap:lg">
<p nve-text="body uppercase">uppercase</p>
<p nve-text="body lowercase">LOWERCASE</p>
<p nve-text="body capitalize">capitalize</p>
<p nve-text="body truncate" style="width: 350px">
truncate: dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi
</p>
</div>
uppercase
LOWERCASE
capitalize
truncate: dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi
Link
Link styles including states, emphasis levels, and sizes for clear interactive affordances.
<div nve-layout="column gap:lg">
<a nve-text="body link" href="#">link</a>
<a nve-text="body link hover" href="#">link (hover)</a>
<a nve-text="body link visited" href="#">link (visited)</a>
<nve-divider></nve-divider>
<a nve-text="link" href="#">link</a>
<a nve-text="link muted" href="#">link muted</a>
<a nve-text="link emphasis" href="#">link emphasis</a>
<nve-divider></nve-divider>
<a nve-text="link sm" href="#">link sm</a>
<a nve-text="link" href="#">link</a>
<a nve-text="link lg" href="#">link lg</a>
<a nve-text="link xl" href="#">link xl</a>
</div>
List
Styled unordered list with consistent spacing and bullet markers.
<ul nve-text="list">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>
Long line of text.. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum
dolor sit amet.
</li>
</ul>
- list item 1
- list item 2
- list item 3
-
Long line of text.. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum
dolor sit amet.
Ordered List
Styled ordered list with sequential numbering for step-by-step or prioritized content.
<ol nve-text="list">
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
- list item
- list item
- list item
Unstyled List
Displays a list without bullets or default styling, useful for custom layouts or semantic markup without visual indicators.
<ul nve-text="list unstyled">
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
- list item
- list item
- list item
Description List
Description list layout with consistent spacing and typography styles.
<dl nve-layout="column gap:md">
<dt nve-text="body muted medium">Knot</dt>
<dd nve-text="body">Knot is a unit of speed equaling 1 nautical mile per hour.</dd>
<dt nve-text="body muted medium">Port</dt>
<dd nve-text="body">
Port is the nautical term that refers to the left side of a ship, as perceived by a person facing towards the bow
(the front of the vessel).
</dd>
<dt nve-text="body muted medium">Starboard</dt>
<dd nve-text="body">
Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing towards
the bow (the front of the vessel).
</dd>
</dl>
- Knot
- Knot is a unit of speed equaling 1 nautical mile per hour.
- Port
-
Port is the nautical term that refers to the left side of a ship, as perceived by a person facing towards the bow
(the front of the vessel).
- Starboard
-
Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing towards
the bow (the front of the vessel).
Navigation List
Presents a navigation-optimized list with nested structure, ideal for sidebars and table of contents.
<ul nve-text="list nav">
<li><a nve-text="link" href="#navigation-list">Welcome</a></li>
<li><a nve-text="link" href="#navigation-list" aria-current="page">Installation</a></li>
<li>
<ul nve-text="list">
<li><a nve-text="link" href="#navigation-list">Installing Dependencies</a></li>
<li><a nve-text="link" href="#navigation-list">Configure Library</a></li>
</ul>
</li>
<li><a nve-text="link" href="#navigation-list">Basic Usage</a></li>
<li>
<ul nve-text="list">
<li><a nve-text="link" href="#navigation-list">Architecture</a></li>
<li><a nve-text="link" href="#navigation-list">Reference</a></li>
<li><a nve-text="link" href="#navigation-list">API</a></li>
</ul>
</li>
<li>External Links</li>
<li>
<ul nve-text="list">
<li><a nve-text="link" href="#navigation-list">Join the Community</a></li>
<li>Submit an Issue</li>
<li>
<ul nve-text="list">
<li><a nve-text="link" href="#navigation-list">Feature</a></li>
<li><a nve-text="link" href="#navigation-list">Fix</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Headings
Text types applied to semantic HTML heading elements for accessible content structure.
<div nve-layout="column gap:lg">
<h1 nve-text="display">display</h1>
<h2 nve-text="heading">heading</h2>
<h3 nve-text="body">body</h3>
<h4 nve-text="label">label</h4>
</div>
display
heading
body
label
Size
Displays the complete range of size modifiers for each text type, enabling precise typographic scale and size control.
<div nve-layout="column gap:lg">
<p nve-text="display xl">display xl</p>
<p nve-text="display lg">display lg</p>
<p nve-text="display">display</p>
<p nve-text="display sm">display sm</p>
<p nve-text="heading xl">heading xl</p>
<p nve-text="heading lg">heading lg</p>
<p nve-text="heading">heading</p>
<p nve-text="heading sm">heading sm</p>
<p nve-text="heading xs">heading xs</p>
<p nve-text="body xl">body xl</p>
<p nve-text="body lg">body lg</p>
<p nve-text="body">body</p>
<p nve-text="body sm">body sm</p>
<p nve-text="label xl">label xl</p>
<p nve-text="label lg">label lg</p>
<p nve-text="label">label</p>
<p nve-text="label sm">label sm</p>
</div>
display xl
display lg
display
display sm
heading xl
heading lg
heading
heading sm
heading xs
body xl
body lg
body
body sm
label xl
label lg
label
label sm
Line height
Use different attributes with nve-text like loose, relaxed, moderate, snug, and tight to give an element a relative line-height based on its current font-size.
Relative line height options that scale with font size, optimizing readability for different text densities.
<div nve-layout="column">
<p nve-text="tight">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p nve-text="snug">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p nve-text="moderate">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p nve-text="relaxed">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Use different attributes with nve-text like line-height-3 and line-height-4 to give an element a fixed line-height, irrespective of the current font-size. These are useful when you need exact control over an element’s final size.
Displays fixed line height values for precise vertical rhythm control independent of font size changes.
<div nve-layout="column">
<p nve-text="line-height-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p nve-text="line-height-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p nve-text="line-height-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p nve-text="line-height-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p nve-text="line-height-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p nve-text="line-height-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p nve-text="line-height-9">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p nve-text="line-height-10">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.