- Home
- Design system
- Elements
- 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.
| Sample | Element | Typeface | Size |
|---|---|---|---|
空色 Sky blue | H1 | Aeonik | --3xlarge |
空色 Sky blue | H2 | Aeonik | --2xlarge |
空色 Sky blue | H3 | Source | --xlarge |
空色 Sky blue | H4 | Source | --medium |
空色 Sky blue | H5 | Source | --small |
空色 Sky blue | H6 | Source | --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
| Sample | Typeface | Class |
|---|---|---|
| 空色 Sky blue | Aeonik | --4xhuge |
| 空色 Sky blue | Aeonik | --3xhuge |
| 空色 Sky blue | Aeonik | --2xhuge |
| 空色 Sky blue | Aeonik | --xhuge |
| 空色 Sky blue | Aeonik | --huge |
| 空色 Sky blue | Aeonik | --4xlarge |
| 空色 Sky blue | Aeonik | --3xlarge |
| 空色 Sky blue | Aeonik | --2xlarge |
| 空色 Sky blue | Aeonik | --xlarge |
| 空色 Sky blue | Source | --large |
| 空色 Sky blue | Source | --medium |
| 空色 Sky blue | Source | --small |
| 空色 Sky blue | Source | --xsmall |
| 空色 Sky blue | Source | --2xsmall |
| 空色 Sky blue | Source | --3xsmall |
| 空色 Sky blue | Source | --4xsmall |
Bold weights
| Sample | Typeface | Class |
|---|---|---|
| 空色 Sky blue | Aeonik | --4xhuge-bold |
| 空色 Sky blue | Aeonik | --3xhuge-bold |
| 空色 Sky blue | Aeonik | --2xhuge-bold |
| 空色 Sky blue | Aeonik | --xhuge-bold |
| 空色 Sky blue | Aeonik | --huge-bold |
| 空色 Sky blue | Aeonik | --4xlarge-bold |
| 空色 Sky blue | Aeonik | --3xlarge-bold |
| 空色 Sky blue | Aeonik | --2xlarge-bold |
| 空色 Sky blue | Aeonik | --xlarge-bold |
| 空色 Sky blue | Source | --large-bold |
| 空色 Sky blue | Source | --medium-bold |
| 空色 Sky blue | Source | --small-bold |
| 空色 Sky blue | Source | --xsmall-bold |
| 空色 Sky blue | Source | --2xsmall-bold |
| 空色 Sky blue | Source | --3xsmall-bold |
| 空色 Sky blue | Source | --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>