Soracom

Design System
  1. Home
  2. Design system
  3. Elements
  4. Heading

Heading

Heading is a general component for styling heading content

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.

SampleElementTypefaceSize

空色 Sky blue

H1Aeonik--3xlarge

空色 Sky blue

H2Aeonik--2xlarge

空色 Sky blue

H3Source--xlarge

空色 Sky blue

H4Source--medium
空色 Sky blue
H5Source--small
空色 Sky blue
H6Source--xsmall

Size and weight classes

html
Copy
<div class="ds-heading --huge-bold">空色 Sky blue</div>
<div class="ds-heading --2xlarge">空色 Sky blue</div>
<div class="ds-heading --medium">空色 Sky blue</div>

Normal weights

SampleTypefaceClass
空色 Sky blueAeonik--4xhuge
空色 Sky blueAeonik--3xhuge
空色 Sky blueAeonik--2xhuge
空色 Sky blueAeonik--xhuge
空色 Sky blueAeonik--huge
空色 Sky blueAeonik--4xlarge
空色 Sky blueAeonik--3xlarge
空色 Sky blueAeonik--2xlarge
空色 Sky blueAeonik--xlarge
空色 Sky blueSource--large
空色 Sky blueSource--medium
空色 Sky blueSource--small
空色 Sky blueSource--xsmall
空色 Sky blueSource--2xsmall
空色 Sky blueSource--3xsmall
空色 Sky blueSource--4xsmall

Bold weights

SampleTypefaceClass
空色 Sky blueAeonik--4xhuge-bold
空色 Sky blueAeonik--3xhuge-bold
空色 Sky blueAeonik--2xhuge-bold
空色 Sky blueAeonik--xhuge-bold
空色 Sky blueAeonik--huge-bold
空色 Sky blueAeonik--4xlarge-bold
空色 Sky blueAeonik--3xlarge-bold
空色 Sky blueAeonik--2xlarge-bold
空色 Sky blueAeonik--xlarge-bold
空色 Sky blueSource--large-bold
空色 Sky blueSource--medium-bold
空色 Sky blueSource--small-bold
空色 Sky blueSource--xsmall-bold
空色 Sky blueSource--2xsmall-bold
空色 Sky blueSource--3xsmall-bold
空色 Sky blueSource--4xsmall-bold

Visual states

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

Component colors

html
Copy
<div class="ds-heading --2xlarge-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 --2xlarge-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 --2xlarge-bold">
  <i class="ds-icon --icon-user --color-blue-shade"></i> 空色 Sky blue
</p>

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 --1-l">空色 Sky blue</h1>
<h2 class="ds-heading --icon-sun --1-l">空色 Sky blue</h2>
<h3 class="ds-heading --icon-sun --1-l">空色 Sky blue</h3>
<h4 class="ds-heading --icon-sun --1-l">空色 Sky blue</h4>
<h5 class="ds-heading --icon-sun --1-l">空色 Sky blue</h5>
<h6 class="ds-heading --icon-sun --1-l">空色 Sky blue</h6>
<!-- Headings h1-h6 with inline icons -->
<h1 class="ds-heading --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</h1>
<h2 class="ds-heading --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</h2>
<h3 class="ds-heading --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</h3>
<h4 class="ds-heading --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</h4>
<h5 class="ds-heading --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</h5>
<h6 class="ds-heading --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</h6>

All heading sizes

html
Copy
<!-- All heading sizes -->
<div class="ds-heading --4xhuge --1-l">空色 Sky blue</div>
<div class="ds-heading --3xhuge --1-l">空色 Sky blue</div>
<div class="ds-heading --2xhuge --1-l">空色 Sky blue</div>
<div class="ds-heading --xhuge --1-l">空色 Sky blue</div>
<div class="ds-heading --huge --1-l">空色 Sky blue</div>
<div class="ds-heading --4xlarge --1-l">空色 Sky blue</div>
<div class="ds-heading --3xlarge --1-l">空色 Sky blue</div>
<div class="ds-heading --2xlarge --1-l">空色 Sky blue</div>
<div class="ds-heading --xlarge --1-l">空色 Sky blue</div>
<div class="ds-heading --large --1-l">空色 Sky blue</div>
<div class="ds-heading --medium --1-l">空色 Sky blue</div>
<div class="ds-heading --small --1-l">空色 Sky blue</div>
<div class="ds-heading --xsmall --1-l">空色 Sky blue</div>
<div class="ds-heading --2xsmall --1-l">空色 Sky blue</div>
<div class="ds-heading --3xsmall --1-l">空色 Sky blue</div>
<div class="ds-heading --4xsmall --1-l">空色 Sky blue</div>
<!-- All heading sizes with icons -->
<div class="ds-heading --4xhuge --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --3xhuge --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --2xhuge --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --xhuge --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --huge --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --4xlarge --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --3xlarge --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --2xlarge --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --xlarge --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --large --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --medium --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --small --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --xsmall --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --2xsmall --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --3xsmall --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --4xsmall --icon-sun --1-l">空色 Sky blue</div>
<!-- All heading sizes with inline icons -->
<div class="ds-heading --4xhuge --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --3xhuge --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --2xhuge --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --xhuge --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --huge --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --4xlarge --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --3xlarge --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --2xlarge --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --xlarge --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --large --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --medium --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --small --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --xsmall --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --2xsmall --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --3xsmall --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --4xsmall --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>

All bold heading sizes

html
Copy
<!-- All bold heading sizes -->
<div class="ds-heading --4xhuge-bold --1-l">空色 Sky blue</div>
<div class="ds-heading --3xhuge-bold --1-l">空色 Sky blue</div>
<div class="ds-heading --2xhuge-bold --1-l">空色 Sky blue</div>
<div class="ds-heading --xhuge-bold --1-l">空色 Sky blue</div>
<div class="ds-heading --huge-bold --1-l">空色 Sky blue</div>
<div class="ds-heading --4xlarge-bold --1-l">空色 Sky blue</div>
<div class="ds-heading --3xlarge-bold --1-l">空色 Sky blue</div>
<div class="ds-heading --2xlarge-bold --1-l">空色 Sky blue</div>
<div class="ds-heading --xlarge-bold --1-l">空色 Sky blue</div>
<div class="ds-heading --large-bold --1-l">空色 Sky blue</div>
<div class="ds-heading --medium-bold --1-l">空色 Sky blue</div>
<div class="ds-heading --small-bold --1-l">空色 Sky blue</div>
<div class="ds-heading --xsmall-bold --1-l">空色 Sky blue</div>
<div class="ds-heading --2xsmall-bold --1-l">空色 Sky blue</div>
<div class="ds-heading --3xsmall-bold --1-l">空色 Sky blue</div>
<div class="ds-heading --4xsmall-bold --1-l">空色 Sky blue</div>
<!-- All bold heading sizes with icons -->
<div class="ds-heading --4xhuge-bold --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --3xhuge-bold --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --2xhuge-bold --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --xhuge-bold --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --huge-bold --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --4xlarge-bold --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --3xlarge-bold --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --2xlarge-bold --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --xlarge-bold --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --large-bold --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --medium-bold --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --small-bold --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --xsmall-bold --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --2xsmall-bold --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --3xsmall-bold --icon-sun --1-l">空色 Sky blue</div>
<div class="ds-heading --4xsmall-bold --icon-sun --1-l">空色 Sky blue</div>
<!-- All bold heading sizes with inline icons -->
<div class="ds-heading --4xhuge-bold --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --3xhuge-bold --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --2xhuge-bold --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --xhuge-bold --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --huge-bold --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --4xlarge-bold --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --3xlarge-bold --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --2xlarge-bold --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --xlarge-bold --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --large-bold --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --medium-bold --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --small-bold --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --xsmall-bold --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --2xsmall-bold --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --3xsmall-bold --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>
<div class="ds-heading --4xsmall-bold --1-l"><i class="ds-icon --icon-sun"></i> 空色 Sky blue</div>