Options
Basic usage
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 | --2xlarge |
空色 Sky blue |
H2 | Aeonik | --xlarge |
空色 Sky blue |
H3 | Aeonik | --large |
空色 Sky blue |
H4 | Source | --medium |
空色 Sky blue |
H5 | Source | --small |
空色 Sky blue |
H6 | Source | --xsmall |
An unmodified .ds-heading uses --heading-size-large (2.2rem) and --heading-line-height-large (1.3), before scaling. Native heading levels and size modifiers select their matching size and line-height tokens.
Site-wide scaling
Set the scales on :root in a stylesheet loaded after SDS. Inside a shadow root, use :host instead. Both factors default to 1. Changing heading scales does not change text typography.
Line height is relative to the scaled font size. A size scale of 1.1 and a line-height scale of 1.2 produce line boxes that are 32% taller. Set only one factor when only that dimension needs changing.
Scoped scaling and resets
Set the same properties on any element or container to limit their scope. Descendants inherit the factors; a nested scale replaces its inherited value rather than multiplying it again. Reset either factor to 1 to use the corresponding unscaled token values.
Native headings and .ds-heading respond to a scale set directly on them too. No special layout class is required.
Size and weight classes
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
Component colors
Icons
You can include an icon at the beginning of a ds-heading element by simply including an icon class:
If you need more control over the size, color or location of the icon, you can use an Icon component:
Examples
HTML heading sizes
All heading sizes
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/3.44.0/ds-heading/manifest.json?v=3.44.0