• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Typography heading

Component status
Verified
Last releasedFebruary 26, 2024
Current version@spectrum-css/typography@5.1.4

Usage notes


Heading is a typography component used to create various levels of hierarchies between text.

Variants


Heading
Verified

Headings for typography.

HeadingXXXL Emphasis Strong.

HeadingXXL Emphasis Strong.

HeadingXL Emphasis Strong.

HeadingL Emphasis Strong.

HeadingM Emphasis Strong.

HeadingS Emphasis Strong.

HeadingXS Emphasis Strong.
HeadingXXS Emphasis Strong.

HeadingXXXL Serif Emphasis Strong.

HeadingXXL Serif Emphasis Strong.

HeadingXL Serif Emphasis Strong.

HeadingL Serif Emphasis Strong.

HeadingM Serif Emphasis Strong.

HeadingS Serif Emphasis Strong.

HeadingXS Serif Emphasis Strong.
HeadingXXS Serif Emphasis Strong.
Show markup
<div class="spectrum">
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL">HeadingXXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL">HeadingXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL">HeadingXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h2 class="spectrum-Heading spectrum-Heading--sizeL">HeadingL <em>Emphasis</em> <strong>Strong</strong>.</h2>
  <h3 class="spectrum-Heading spectrum-Heading--sizeM">HeadingM <em>Emphasis</em> <strong>Strong</strong>.</h3>
  <h4 class="spectrum-Heading spectrum-Heading--sizeS">HeadingS <em>Emphasis</em> <strong>Strong</strong>.</h4>
  <h5 class="spectrum-Heading spectrum-Heading--sizeXS">HeadingXS <em>Emphasis</em> <strong>Strong</strong>.</h5>
  <h6 class="spectrum-Heading spectrum-Heading--sizeXXS">HeadingXXS <em>Emphasis</em> <strong>Strong</strong>.</h6>
  <br/>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--serif">HeadingXXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--serif">HeadingXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--serif">HeadingXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <p class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--serif">HeadingL Serif <em>Emphasis</em> <strong>Strong</strong>.</p>
  <h3 class="spectrum-Heading spectrum-Heading--sizeM spectrum-Heading--serif">HeadingM Serif <em>Emphasis</em> <strong>Strong</strong>.</h3>
  <h4 class="spectrum-Heading spectrum-Heading--sizeS spectrum-Heading--serif">HeadingS Serif <em>Emphasis</em> <strong>Strong</strong>.</h4>
  <h5 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Heading--serif">HeadingXS Serif <em>Emphasis</em> <strong>Strong</strong>.</h5>
  <h6 class="spectrum-Heading spectrum-Heading--sizeXXS spectrum-Heading--serif">HeadingXXS Serif <em>Emphasis</em> <strong>Strong</strong>.</h6>
</div>

Heading (Heavy)
Verified

Heavy headings for typography.

HeadingXXXL Emphasis Strong.

HeadingXXL Emphasis Strong.

HeadingXL Emphasis Strong.

HeadingL Emphasis strong.


HeadingXXXL Serif Emphasis Strong.

HeadingXXL Serif Emphasis Strong.

HeadingXL Serif Emphasis Strong.

HeadingL Serif Emphasis strong.

Show markup
<div class="spectrum">
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--heavy">HeadingXXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--heavy">HeadingXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--heavy">HeadingXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <p class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--heavy">HeadingL <em>Emphasis</em> <strong>strong</strong>.</p>
  <br/>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <p class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--heavy spectrum-Heading--serif">HeadingL Serif <em>Emphasis</em> <strong>strong</strong>.</p>
</div>

Heading (Light)
Verified

Light headings for typography.

HeadingXXXL Emphasis Strong.

HeadingXXL Emphasis Strong.

HeadingXL Emphasis Strong.

HeadingL Emphasis Strong.


HeadingXXXL Serif Emphasis Strong.

HeadingXXL Serif Emphasis Strong.

HeadingXL Serif Emphasis Strong.

HeadingL Serif Emphasis Strong.

Show markup
<div class="spectrum">
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--light">HeadingXXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--light">HeadingXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--light">HeadingXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <p class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light">HeadingL <em>Emphasis</em> <strong>Strong</strong>.</p>
  <br/>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--light spectrum-Heading--serif">HeadingXXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--light spectrum-Heading--serif">HeadingXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--light spectrum-Heading--serif">HeadingXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
  <p class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-Heading--serif">HeadingL Serif <em>Emphasis</em> <strong>Strong</strong>.</p>
</div>

Typography
Verified

Typography elements paired to display clear content hierarchies.

Heading Size XXXL with body size XXXL:

Aliquet Mauris Eu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.



Heading Size XXL with body size XXL:

Aliquet Mauris Eu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.



Heading size XL with body size XL:

Aliquet Mauris Eu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.



Heading size L with body size L:

Aliquet Mauris Eu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.



Heading size M with body size M:

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.



Heading size S with body size S:

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.



Heading size XS with body size XS:

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.



Heading size XXS with body size XS

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <div class="spectrum-Typography">
      <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Heading Size XXXL with body size XXXL:</h4>
      <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL">Aliquet Mauris Eu</h1>
      <p class="spectrum-Body spectrum-Body--sizeXXXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
      <p class="spectrum-Body spectrum-Body--sizeXXXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <hr />
    <br />
    <div class="spectrum-Typography">
      <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Heading Size XXL with body size XXL:</h4>
      <h1 class="spectrum-Heading spectrum-Heading--sizeXXL">Aliquet Mauris Eu</h1>
      <p class="spectrum-Body spectrum-Body--sizeXXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
      <p class="spectrum-Body spectrum-Body--sizeXXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <hr />
    <br />
    <div class="spectrum-Typography">
      <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Heading size XL with body size XL:</h4>
      <h1 class="spectrum-Heading spectrum-Heading--sizeXL">Aliquet Mauris Eu</h1>
      <p class="spectrum-Body spectrum-Body--sizeXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
      <p class="spectrum-Body spectrum-Body--sizeXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <hr />
    <br />
    <div class="spectrum-Typography">
      <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Heading size L with body size L:</h4>
      <h2 class="spectrum-Heading spectrum-Heading--sizeL">Aliquet Mauris Eu</h1>
      <p class="spectrum-Body spectrum-Body--sizeL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
      <p class="spectrum-Body spectrum-Body--sizeL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <hr />
    <br />
    <div class="spectrum-Typography">
      <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Heading size M with body size M:</h4>
      <h3 class="spectrum-Heading spectrum-Heading--sizeM">Lorem Ipsum Dolor</h1>
      <p class="spectrum-Body spectrum-Body--sizeM">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
      <p class="spectrum-Body spectrum-Body--sizeM">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <hr />
    <br />
    <div class="spectrum-Typography">
      <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Heading size S with body size S:</h4>
      <h4 class="spectrum-Heading spectrum-Heading--sizeS">Lorem Ipsum Dolor</h1>
      <p class="spectrum-Body spectrum-Body--sizeS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
      <p class="spectrum-Body spectrum-Body--sizeS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <hr />
    <br />
    <div class="spectrum-Typography">
      <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Heading size XS with body size XS:</h4>
      <h5 class="spectrum-Heading spectrum-Heading--sizeXS">Lorem Ipsum Dolor</h1>
      <p class="spectrum-Body spectrum-Body--sizeXS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
      <p class="spectrum-Body spectrum-Body--sizeXS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <hr />
    <br />
    <div class="spectrum-Typography">
      <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Heading size XXS with body size XS</h4>
      <h6 class="spectrum-Heading spectrum-Heading--sizeXXS">Lorem Ipsum Dolor</h1>
      <p class="spectrum-Body spectrum-Body--sizeXS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
      <p class="spectrum-Body spectrum-Body--sizeXS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
</div>