- Home
- Design system
- Elements
- Heading
Heading
Heading is a general component for styling heading content
Options
Basic usage
html
Copy
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
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
Component colors
html
Copy
Icons
You can include an icon at the beginning of a ds-heading element by simply including an icon class:
html
Copy
If you need more control over the size, color or location of the icon, you can use an Icon component:
html
Copy
Tests
HTML heading sizes
html
Copy
All heading sizes
html
Copy
html
Copy
Manifest
The component manifest describes this component's API — its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.
Latest version: https://assets.soracom.io/sds/latest/ds-rows/index.mjs
index.mjs
Copy