- Lightest
- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
Typography Body
Component status | Verified |
---|---|
Last released | Unreleased |
Current version | @spectrum-css/typography@4.0.0-alpha.1 |
Usage notes
Body is a typography component primarily used within Spectrum components and for blocks of text.
Variants
BodyVerified
Default body text sizes.
BodyXXXL Text BodyXXXL Emphasis BodyXXXL Strong.
BodyXXL Text BodyXXL Emphasis BodyXXL Strong.
BodyXL Text BodyXL Emphasis BodyXL Strong.
BodyL text BodyL Emphasis BodyL Strong.
BodyM Text BodyM Emphasis BodyM Strong.
BodyS Text BodyS Emphasis BodyS Strong.
BodyXS Text BodyXS Emphasis BodyXS Strong.
BodyXXXL Text Serif BodyXXXL Emphasis Serif BodyXXXL Strong Serif.
BodyXXL Text Serif BodyXXL Emphasis Serif BodyXXL Strong Serif.
BodyXL Text Serif BodyXL Emphasis Serif BodyXL Strong Serif.
BodyL text Serif BodyL Emphasis Serif BodyL Strong Serif.
BodyM Text Serif BodyM Emphasis Serif BodyM Strong Serif.
BodyS Text Serif BodyS Emphasis Serif BodyS Strong Serif.
BodyXS Text Serif BodyXS Emphasis Serif BodyXS Strong Serif.
<div class="spectrum">
<p class="spectrum-Body spectrum-Body--sizeXXXL">BodyXXXL Text <em>BodyXXXL Emphasis</em> <strong>BodyXXXL Strong</strong>.</p>
<p class="spectrum-Body spectrum-Body--sizeXXL">BodyXXL Text <em>BodyXXL Emphasis</em> <strong>BodyXXL Strong</strong>.</p>
<p class="spectrum-Body spectrum-Body--sizeXL">BodyXL Text <em>BodyXL Emphasis</em> <strong>BodyXL Strong</strong>.</p>
<p class="spectrum-Body spectrum-Body--sizeL">BodyL text <em>BodyL Emphasis</em> <strong>BodyL Strong</strong>.</p>
<p class="spectrum-Body spectrum-Body--sizeM">BodyM Text <em>BodyM Emphasis</em> <strong>BodyM Strong</strong>.</p>
<p class="spectrum-Body spectrum-Body--sizeS">BodyS Text <em>BodyS Emphasis</em> <strong>BodyS Strong</strong>.</p>
<p class="spectrum-Body spectrum-Body--sizeXS">BodyXS Text <em>BodyXS Emphasis</em> <strong>BodyXS Strong</strong>.</p>
</div>
<br/>
<div class="spectrum">
<p class="spectrum-Body spectrum-Body--sizeXXXL spectrum-Body--serif">BodyXXXL Text Serif <em>BodyXXXL Emphasis Serif</em> <strong>BodyXXXL Strong Serif</strong>.</p>
<p class="spectrum-Body spectrum-Body--sizeXXL spectrum-Body--serif">BodyXXL Text Serif <em>BodyXXL Emphasis Serif</em> <strong>BodyXXL Strong Serif</strong>.</p>
<p class="spectrum-Body spectrum-Body--sizeXXL spectrum-Body--serif">BodyXL Text Serif <em>BodyXL Emphasis Serif</em> <strong>BodyXL Strong Serif</strong>.</p>
<p class="spectrum-Body spectrum-Body--sizeL spectrum-Body--serif">BodyL text Serif <em>BodyL Emphasis Serif</em> <strong>BodyL Strong Serif</strong>.</p>
<p class="spectrum-Body spectrum-Body--sizeM spectrum-Body--serif">BodyM Text Serif <em>BodyM Emphasis Serif</em> <strong>BodyM Strong Serif</strong>.</p>
<p class="spectrum-Body spectrum-Body--sizeS spectrum-Body--serif">BodyS Text Serif <em>BodyS Emphasis Serif</em> <strong>BodyS Strong Serif</strong>.</p>
<p class="spectrum-Body spectrum-Body--sizeXS spectrum-Body--serif">BodyXS Text Serif <em>BodyXS Emphasis Serif</em> <strong>BodyXS Strong Serif</strong>.</p>
</div>
StandardVerified
Typography elements paired to display clear content hierarchies.
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.
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.
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.
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.
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.
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.
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.
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.
<div class="spectrum-Typography">
<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>
<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>
<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>
<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>
<h3 class="spectrum-Heading spectrum-Heading--sizeM">Lorem Ipsum Dolor</h3>
<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>
<h4 class="spectrum-Heading spectrum-Heading--sizeS">Lorem Ipsum Dolor</h4>
<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>
<h5 class="spectrum-Heading spectrum-Heading--sizeXS">Lorem Ipsum Dolor</h5>
<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>
<h6 class="spectrum-Heading spectrum-Heading--sizeXXS">Lorem Ipsum Dolor</h6>
<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>