Soracom

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

Header

Options

Basic usage

Contents are left aligned in the header by default.

Default header with logo

html
Copy

Text

ds-text elements have specific styling within the header.

Default header with logo and text

html
Copy

The primary menu button can be included using the following specific styling.

Default

html
Copy

Animated menu label

html
Copy

Controls

Controls can include components such as buttons/selects and are right aligned in the header.

Default header with logo, text and controls

html
Copy

Component color

Header supports component color, and automatically sets the color of the logo and text based on the chosen color in both dark and light mode to optimize legibility.

In most cases you should use either the default (light) header or dark style header – or use the data-coverage attribute to switch styles.

html
Copy

Styles

Custom styles exist for specific use cases.

Dark style

html
Copy

User console style

If the ds-header has a data-coverage attribute, the following styles will be applied.

Use the dark style if data-coverage: "g"

html
Copy

Soracom

User console

  • Home
  • Page

Use the default light style if data-coverage: "jp"

html
Copy

Soracom

User console

  • Home
  • Page

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-header/index.mjs

index.mjs
Copy