Soracom

Design System
  1. Home
  2. Design system
  3. Elements
  4. 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

html
Copy 
<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:

UI usage

By default headings use Source Han Sans JP under a certain size:

Note: 1rem == 10px

SampleElementTypefaceSize

空色 Sky blue

H1

空色 Sky blue

H2

空色 Sky blue

H3

空色 Sky blue

H4
空色 Sky blue
H5
空色 Sky blue
H6

Web usage

You can switch SDS to use a different font size scale for headings by setting a global css var:

:root {
  --is-web-heading-scale: var(--ON);
}

Note: 1rem == 10px

SampleElementTypefaceSize

空色 Sky blue

H1

空色 Sky blue

H2

空色 Sky blue

H3

空色 Sky blue

H4
空色 Sky blue
H5
空色 Sky blue
H6

Size and weight classes

html
Copy 
<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

SampleClassTypefaceSize
空色 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

SampleClassTypefaceSize
空色 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

SampleClassTypefaceSize
空色 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

SampleClassTypefaceSize
空色 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

html
Copy 
<div class="ds-heading --xxlarge-bold --alert">空色 Sky blue</div>
<div class="ds-heading --xlarge --success">空色 Sky blue</div>

Component colors

html
Copy 
<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:

html
Copy 
<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:

html
Copy 
<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

html
Copy 
<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

html
Copy 
<!-- 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

html
Copy 
<!-- 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

html
Copy 
<!-- 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>