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>
<h2 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);
}| 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);
}| 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<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
<!-- 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 -->
<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 -->
<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>