🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Headlines

View in Pattern Lab

HTML Markup

<h1>Headline 1 or &lt;H1&gt; Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, possimus ducimus aperiam, aspernatur voluptas officiis voluptatum velit tenetur itaque distinctio iure ab architecto facere enim, ad praesentium explicabo molestiae corporis!</h1>
<h2>Headline 2 or &lt;H2&gt; Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, animi corporis amet fugiat sunt suscipit odit provident rem atque, sint nobis ratione. Inventore itaque provident non quis ab consectetur praesentium!</h2>
<h3>Headline 3 or &lt;H3&gt; Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos doloremque adipisci quas ut laudantium sed eligendi temporibus eos cupiditate quo ducimus molestias, odio consequatur quia repudiandae est architecto numquam ipsum? Quae, unde.</h3>
<h4>Headline 4 or &lt;H4&gt;This style is not defined in Fluent UI Framework<span style="font-size: 2em">🤷‍♂️</span>
</h4>

Overview

Headlines are semantic heading elements (h1-h4) that provide document structure and establish content hierarchy. HTWOO provides consistent styling for these semantic HTML elements.

Usage

Use headings to create a logical document hierarchy. Heading levels (h1-h4) should be used in order, with h1 being the main page title and subsequent levels representing subsections.

Example:

<h1>Main Page Title</h1>
<p>Introduction paragraph.</p>

<h2>First Section</h2>
<p>Content of the first section.</p>

<h3>Subsection</h3>
<p>Content of the subsection.</p>

<h2>Second Section</h2>
<p>Content of the second section.</p>

Accessibility

  • Use heading elements semantically to create a proper document outline
  • Do not skip heading levels (e.g., from h1 to h3)
  • Headings should accurately describe the content that follows
  • Screen reader users often navigate by headings, so a proper heading structure is essential