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

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

Examples

HTML heading sizes

html
Copy

All heading sizes

html
Copy

All bold heading sizes

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/3.39.12/ds-heading/manifest.json?v=3.39.12

manifest.json
Copy