The Heading component has a specific mission: rendering titles.
Size
Set the size and line-height of the text.
| Type | Default Value |
|---|
| string | md |
heading xs
heading sm
heading md
heading lg
heading xl
heading display xs
heading display sm
heading display md
<NVStack Vertical Gutter="4">
<NVHeading Size="xs">heading xs</NVHeading>
<NVHeading Size="sm">heading sm</NVHeading>
<NVHeading Size="md">heading md</NVHeading>
<NVHeading Size="lg">heading lg</NVHeading>
<NVHeading Size="xl">heading xl</NVHeading>
<NVHeading Size="d-xs">heading display xs</NVHeading>
<NVHeading Size="d-sm">heading display sm</NVHeading>
<NVHeading Size="d-md">heading display md</NVHeading>
</NVStack>
<div class="nv-stack nv-stack-vertical gutter-y-4">
<h5 class="font-medium text-h-xs">heading xs</h5>
<h4 class="font-medium text-h-sm ">heading sm</h4>
<h3 class="font-medium text-h-md ">heading md</h3>
<h2 class="font-medium text-h-lg">heading lg</h2>
<h1 class="font-medium text-h-xl">heading xl</h1>
<h3 class="font-medium text-d-xs">heading display xs</h3>
<h2 class="font-medium text-d-sm">heading display sm</h2>
<h1 class="font-medium text-d-md ">heading display md</h1>
</div>
<nv-stack vertical gutter="4">
<nv-heading size="xs">heading xs</nv-heading>
<nv-heading size="sm">heading sm</nv-heading>
<nv-heading size="md">heading md</nv-heading>
<nv-heading size="lg">heading lg</nv-heading>
<nv-heading size="d-xs">heading display xs</nv-heading>
<nv-heading size="d-sm">heading display sm</nv-heading>
<nv-heading size="d-md">heading display md</nv-heading>
</nv-stack>
<nv-stack gutter="4" vertical>
<nv-heading size="xs">heading xs</nv-heading>
<nv-heading class="mt-4" size="sm">heading sm</nv-heading>
<nv-heading class="mt-4" size="md">heading md</nv-heading>
<nv-heading class="mt-4" size="lg">heading lg</nv-heading>
<nv-heading class="mt-4" size="xl">heading display xs</nv-heading>
<nv-heading class="mt-4" size="d-xs">heading display xs</nv-heading>
<nv-heading class="mt-4" size="d-sm">heading display sm</nv-heading>
<nv-heading class="mt-4" size="d-md">heading display md</nv-heading>
</nv-stack>
