Heading

Why It’s Discontinued

The decision to discontinue the nv-heading component is based on several factors:

• Flexibility: Tailwind CSS offers a utility-first approach, allowing for more granular control over styling without the need for custom components.
• Consistency: By using Tailwind CSS, we ensure a consistent styling approach across all elements, reducing the need for component-specific styles.
• Maintenance: Reducing the number of custom components simplifies the codebase, making it easier to maintain and update.

Additionally, the "display sizes" (e.g., d-xs, d-sm, d-md) were originally used for headings in hero sections, Jumbotrons, etc. However, these types of hero sections are no longer in use, making the predefined display sizes irrelevant in the new version.

Version 2 vs. Version 3

1. Version 2: In the previous version, headings were implemented using the nv-heading component, which encapsulated both styling and behavior, including display sizes (d-xs, d-sm, d-md) for specific visual styles.
2. Version 3: In the new version, we replace the nv-heading component with standard HTML heading tags and apply styling using our global CSS, enhanced by Tailwind CSS utilities. This approach leverages the power of Tailwind CSS for styling while maintaining semantic HTML structure. The display size classes (d-xs, d-sm, d-md) are no longer necessary, as the need for hero sections has been removed.

                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <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>
                                                                                                                                                        
                                                                                                                                                            

                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <div class="flex flex-col space-y-4">
                                                                                                                                                          <h1>heading 1</h1>
                                                                                                                                                          <h2>heading 2</h2>
                                                                                                                                                          <h3>heading 3</h3>
                                                                                                                                                          <h4>heading 4</h4>
                                                                                                                                                          <h5>heading 5</h5>
                                                                                                                                                          <h6>heading 6</h6>
                                                                                                                                                          <!-- easy right? -->
                                                                                                                                                        </div>
                                                                                                                                                        
                                                                                                                                                            

Using the tailwind utility classes

Using the CSS class

Using tokens directly into SCSS

In some cases, you might want to apply header styles to elements that are not semantically headers. Or the other way around. This can be useful for maintaining a consistent design across your application without altering the semantic structure of your HTML.

By using tailwind classes, you can easily apply these styles to any element.

                                                        
                                                        
                                                            //using Tailwind utility classes to updat the look and a h3 element
                                                        h3.custom-h3 {
                                                          @apply text-xl text-high;
                                                        }
                                                        
                                                        //applying the h3 design tokens to a non header element
                                                        .h3-style {
                                                          fontSize: 'var(--global-typography-h3-font-size)',
                                                          lineHeight: 'var(--global-typography-h3-line-height)',
                                                          fontWeight: 'var(--global-typography-h3-font-weight)',
                                                          color: 'var(--color-content-high-text)',
                                                        }