- Home
- Design system
- Elements
- Heading
Heading
Heading is a general component for styling heading content
Overview
By default, the heading font, size and weight are optimized for UI usage but can be toggled for more general website usage using a global css var.
Options
Basic usage
<div class="ds-heading">空色 Sky blue</div>
<h1>空色 Sky blue</h1>
HTML H1-H6 defaults
SDS sets the standard html heading elements (h1-h6) to a default set of styles. There are 2 different sets of styles - UI (the default) and Web:
Size and weight classes
<div class="ds-heading --huge-bold">空色 Sky blue</div>
<div class="ds-heading --xxlarge">空色 Sky blue</div>
<div class="ds-heading --xxlarge">空色 Sky blue</div>
Normal weights
UI usage
By default headings use Source Han Sans JP under a certain size:
Note: 1rem == 10px
Sample | Class | Typeface | Size |
---|---|---|---|
空色 Sky blue | —xxhuge | ||
空色 Sky blue | —xhuge | ||
空色 Sky blue | —huge | ||
空色 Sky blue | —xxlarge | ||
空色 Sky blue | —xlarge | ||
空色 Sky blue | —large | ||
空色 Sky blue | —medium | ||
空色 Sky blue | —small | ||
空色 Sky blue | —xsmall | ||
空色 Sky blue | —xxsmall |
Web usage
You can switch SDS to use a Aeonik for all headings by setting a global css var:
:root {
--is-web-heading-scale: var(--ON);
}
Note: 1rem == 10px
Sample | Class | Typeface | Size |
---|---|---|---|
空色 Sky blue | —xxhuge | ||
空色 Sky blue | —xhuge | ||
空色 Sky blue | —huge | ||
空色 Sky blue | —xxlarge | ||
空色 Sky blue | —xlarge | ||
空色 Sky blue | —large | ||
空色 Sky blue | —medium | ||
空色 Sky blue | —small | ||
空色 Sky blue | —xsmall | ||
空色 Sky blue | —xxsmall |
Bold weights
UI usage
By default headings use Source Han Sans JP under a certain size:
Note: 1rem == 10px
Sample | Class | Typeface | Size |
---|---|---|---|
空色 Sky blue | —xxhuge-bold | ||
空色 Sky blue | —xhuge-bold | ||
空色 Sky blue | —huge-bold | ||
空色 Sky blue | —xxlarge-bold | ||
空色 Sky blue | —xlarge-bold | ||
空色 Sky blue | —large-bold | ||
空色 Sky blue | —medium-bold | ||
空色 Sky blue | —small-bold | ||
空色 Sky blue | —xsmall-bold | ||
空色 Sky blue | —xxsmall-bold |
Web usage
You can switch SDS to use a Aeonik for all headings by setting a global css var:
:root {
--is-web-heading-scale: var(--ON);
}
Note: 1rem == 10px
Sample | Class | Typeface | Size |
---|---|---|---|
空色 Sky blue | —xxhuge-bold | ||
空色 Sky blue | —xhuge-bold | ||
空色 Sky blue | —huge-bold | ||
空色 Sky blue | —xxlarge-bold | ||
空色 Sky blue | —xlarge-bold | ||
空色 Sky blue | —large-bold | ||
空色 Sky blue | —medium-bold | ||
空色 Sky blue | —small-bold | ||
空色 Sky blue | —xsmall-bold | ||
空色 Sky blue | —xxsmall-bold |
Visual states
<div class="ds-heading --xxlarge-bold --alert">空色 Sky blue</div>
<div class="ds-heading --xlarge --success">空色 Sky blue</div>
Component colors
<div class="ds-heading --xxlarge-bold --color-celeste">空色 Sky blue</div>
<div class="ds-heading --xlarge --color-ink-light">空色 Sky blue</div>
Icons
You can include an icon at the beginning of a ds-heading
element by simply including an icon class:
<p class="ds-heading --icon-user">空色 Sky blue</p>
<p class="ds-heading --xxlarge-bold --icon-user">空色 Sky blue</p>
If you need more control over the size, color or location of the icon, you can use an Icon component:
<p class="ds-heading">
<i class="ds-icon --icon-user --color-blue-shade"></i> 空色 Sky blue
</p>
<p class="ds-heading --xxlarge-bold">
<i class="ds-icon --icon-user --color-blue-shade"></i> 空色 Sky blue
</p>
Overriding heading size and weight
ds-heading
supports 2 css variables to control the font size and font weight --ds-heading-size
and --ds-heading-weight
.
The following global css variables are available for use when creating a custom css class.
Note: 1rem == 10px
var(--ds-heading-size-xxhuge); //8.8rem
var(--ds-heading-size-xhuge); //7.2rem
var(--ds-heading-size-huge); //5.6rem
var(--ds-heading-size-xxlarge); //4.2rem
var(--ds-heading-size-xlarge); //3.2rem
var(--ds-heading-size-large); //2.6rem
var(--ds-heading-size-medium); //2.2rem
var(--ds-heading-size-small); //1.8rem
var(--ds-heading-size-xsmall); //1.5rem
var(--ds-heading-size-xxsmall); //1.3rem
Overriding headings with preset css vars
<style>
h1 {
--ds-heading-size: var(--ds-heading-size-huge);
--ds-heading-weight: normal;
}
.my-class {
--ds-heading-size: var(--ds-heading-size-huge);
--ds-heading-weight: normal;
}
</style>
<h1>空色 Sky blue</h1>
<div class="ds-heading my-class">空色 Sky blue</div>
Tests
HTML heading sizes
<!-- Headings h1-h6 -->
<h1>空色 Sky blue</h1>
<h2>空色 Sky blue</h2>
<h3>空色 Sky blue</h3>
<h4>空色 Sky blue</h4>
<h5>空色 Sky blue</h5>
<h6>空色 Sky blue</h6>
<!-- Headings h1-h6 with icons -->
<h1 class="ds-heading --icon-sun">空色 Sky blue</h1>
<h2 class="ds-heading --icon-sun">空色 Sky blue</h2>
<h3 class="ds-heading --icon-sun">空色 Sky blue</h3>
<h4 class="ds-heading --icon-sun">空色 Sky blue</h4>
<h5 class="ds-heading --icon-sun">空色 Sky blue</h5>
<h6 class="ds-heading --icon-sun">空色 Sky blue</h6>
<!-- Headings h1-h6 with inline icons -->
<h1 class="ds-heading"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</h1>
<h2 class="ds-heading"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</h2>
<h3 class="ds-heading"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</h3>
<h4 class="ds-heading"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</h4>
<h5 class="ds-heading"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</h5>
<h6 class="ds-heading"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</h6>
All heading sizes
<!-- All heading sizes -->
<div class="ds-heading --xxhuge">空色 Sky blue</div>
<div class="ds-heading --xhuge">空色 Sky blue</div>
<div class="ds-heading --huge">空色 Sky blue</div>
<div class="ds-heading --xxlarge">空色 Sky blue</div>
<div class="ds-heading --xlarge">空色 Sky blue</div>
<div class="ds-heading --large">空色 Sky blue</div>
<div class="ds-heading --medium">空色 Sky blue</div>
<div class="ds-heading --small">空色 Sky blue</div>
<div class="ds-heading --xsmall">空色 Sky blue</div>
<div class="ds-heading --xxsmall">空色 Sky blue</div>
<!-- All heading sizes with icons -->
<div class="ds-heading --xxhuge --icon-sun">空色 Sky blue</div>
<div class="ds-heading --xhuge --icon-sun">空色 Sky blue</div>
<div class="ds-heading --huge --icon-sun">空色 Sky blue</div>
<div class="ds-heading --xxlarge --icon-sun">空色 Sky blue</div>
<div class="ds-heading --xlarge --icon-sun">空色 Sky blue</div>
<div class="ds-heading --large --icon-sun">空色 Sky blue</div>
<div class="ds-heading --medium --icon-sun">空色 Sky blue</div>
<div class="ds-heading --small --icon-sun">空色 Sky blue</div>
<div class="ds-heading --xsmall --icon-sun">空色 Sky blue</div>
<div class="ds-heading --xxsmall --icon-sun">空色 Sky blue</div>
<!-- All heading sizes with inline icons -->
<div class="ds-heading --xxhuge">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-heading --xhuge">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-heading --huge">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-heading --xxlarge">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-heading --xlarge">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-heading --large">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-heading --medium">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-heading --small">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-heading --xsmall">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-heading --xxsmall">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
All bold heading sizes
<!-- All bold heading sizes -->
<div class="ds-heading --xxhuge-bold">空色 Sky blue</div>
<div class="ds-heading --xhuge-bold">空色 Sky blue</div>
<div class="ds-heading --huge-bold">空色 Sky blue</div>
<div class="ds-heading --xxlarge-bold">空色 Sky blue</div>
<div class="ds-heading --xlarge-bold">空色 Sky blue</div>
<div class="ds-heading --large-bold">空色 Sky blue</div>
<div class="ds-heading --medium-bold">空色 Sky blue</div>
<div class="ds-heading --small-bold">空色 Sky blue</div>
<div class="ds-heading --xsmall-bold">空色 Sky blue</div>
<div class="ds-heading --xxsmall-bold">空色 Sky blue</div>
<!-- All bold heading sizes with icons -->
<div class="ds-heading --xxhuge-bold --icon-sun">空色 Sky blue</div>
<div class="ds-heading --xhuge-bold --icon-sun">空色 Sky blue</div>
<div class="ds-heading --huge-bold --icon-sun">空色 Sky blue</div>
<div class="ds-heading --xxlarge-bold --icon-sun">空色 Sky blue</div>
<div class="ds-heading --xlarge-bold --icon-sun">空色 Sky blue</div>
<div class="ds-heading --large-bold --icon-sun">空色 Sky blue</div>
<div class="ds-heading --medium-bold --icon-sun">空色 Sky blue</div>
<div class="ds-heading --small-bold --icon-sun">空色 Sky blue</div>
<div class="ds-heading --xsmall-bold --icon-sun">空色 Sky blue</div>
<div class="ds-heading --xxsmall-bold --icon-sun">空色 Sky blue</div>
<!-- All bold heading sizes with inline icons -->
<div class="ds-heading --xxhuge-bold">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-heading --xhuge-bold">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-heading --huge-bold">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-heading --xxlarge-bold">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-heading --xlarge-bold">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-heading --large-bold">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-heading --medium-bold">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-heading --small-bold">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-heading --xsmall-bold">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-heading --xxsmall-bold">
<i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>