<div> <div>Level</div> <div>Style</div> <div>Usage</div> </div> <div> <div><strong><p>Level 1 (H1)</p></strong></div> <div>font-family: 72;<br>font-size: 3rem;<br>font-weight: black;<br>line-height: 3.5rem;</div> <div>Hero Text. Use for the main headline on a product home.<br>Use sparingly.</div> </div> <div> <div><strong><p>Level 2 (H2)</p></strong></div> <div>font-family: 72;<br>font-size: 2rem;<br>font-weight: black;<br>line-height: 2.375rem;</div> <div> <p>Web Page Title. Use for website pages. Use in featured cards.</p> <p>Use sparingly.</p> </div> </div> <div> <div><strong><p>Level 3 (H3)</p></strong></div> <div>font-family: 72;<br>font-size: 1.5rem;<br>font-weight: black;<br>line-height: 1.75rem;</div> <div> <p>Page Titles. Use for tool UI page headers.</p> <p>Use in all pages and dynamic pages.</p> </div> </div> <div> <div><strong><p>Level 4 (H4)</p></strong></div> <div>font-family: 72;<br>font-size: 1.25rem;<br>font-weight: bold;<br>line-height: 1.5rem;</div> <div>Section Titles. Use to group or label and group information.<br>Use in tables, sections, title bar, forms, etc.</div> </div> <div> <div><strong><p>Level 5 (H5)</p></strong></div> <div>font-family: 72;<br>font-size: 1.125rem;<br>font-weight: bold;<br>line-height: 1.375rem;</div> <div>Dialog Titles. Use as headings for containers.<br>Use in dialogs, popovers, cards, charts, etc.</div> </div> <div> <div><strong><p>Level 6 (H6)</p></strong></div> <div>font-family: 72;<br>font-size: 0.875rem;<br>font-weight: semibold;<br>line-height: 1rem;</div> <div> <p>Group Titles. Use to add additional grouping to an already titled content.</p> <p>Use in forms, lists, navigation, table, panels, cards, etc.</p> </div> </div>

<div> <div>Level</div> <div>Style</div> <div>Usage</div> </div> <div> <div><strong><p>Level 1 (H1)</p></strong></div> <div>font-family: 72;<br>font-size: 2rem;<br>font-weight: black;<br>line-height: 2.5rem;</div> <div>Hero Text. Use for the main headline on a product home.<br>Use sparingly.</div> </div> <div> <div><strong><p>Level 2 (H2)</p></strong></div> <div>font-family: 72;<br>font-size: 1.5rem;<br>font-weight: black;<br>line-height: 1.75rem;</div> <div> <p>Web Page Title. Use for website pages. Use in featured cards.</p> <p>Use sparingly.</p> </div> </div> <div> <div><strong><p>Level 3 (H3)</p></strong></div> <div>font-family: 72;<br>font-size: 1.25rem;<br>font-weight: black;<br>line-height: 1.75rem;</div> <div> <p>Page Titles. Use for tool UI page headers.</p> <p>Use in all pages and dynamic pages.</p> </div> </div> <div> <div><strong><p>Level 4 (H4)</p></strong></div> <div>font-family: 72;<br>font-size: 1.125rem;<br>font-weight: bold;<br>line-height: 1.375rem;</div> <div>Section Titles. Use to group or label and group information.<br>Use in tables, sections, title bar, forms, etc.</div> </div> <div> <div><strong><p>Level 5 (H5)</p></strong></div> <div>font-family: 72;<br>font-size: 1rem;<br>font-weight: bold;<br>line-height: 1.125rem;</div> <div>Dialog Titles. Use as headings for containers.<br>Use in dialogs, popovers, cards, charts, etc.</div> </div> <div> <div><strong><p>Level 6 (H6)</p></strong></div> <div>font-family: 72;<br>font-size: 0.875rem;<br>font-weight: bold;<br>line-height: 1rem;</div> <div> <p>Group Titles. Use to add additional grouping to an already titled content.</p> <p>Use in forms, lists, navigation, table, panels, cards, etc.</p> </div> </div>