Skip to content
MENU

Soracom

Design System

Header

Options 

Basic usage 

Contents are left aligned in the header by default.

Default header with logo
<header class="ds-header">
  <h1 class="ds-logo">Soracom</h1>
</header>

Soracom

<header class="ds-header">
  <h1 class="ds-logo">Soracom</h1>
</header>

Text 

ds-text elements have specific styling within the header.

Default header with logo and text
<header class="ds-header">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
</header>

Soracom

User console

<header class="ds-header">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
</header>

Controls 

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

Default header with logo, text and controls
<header class="ds-header">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
  <aside class="ds-header__controls">
    <button class="ds-button--plain ds-button--icon-coverage">
      <span>Japan</span>
    </button>
    <button class="ds-button--plain ds-button--icon-support">
      <span>Support</span>
    </button>
    <button class="ds-button--plain ds-button--icon-basic-user">
      <span>sorao@soracom.jp</span>
    </button>
  </aside>
</header>

Soracom

User console

<header class="ds-header">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
  <aside class="ds-header__controls">
    <button class="ds-button--plain ds-button--icon-coverage">
      <span>Japan</span>
    </button>
    <button class="ds-button--plain ds-button--icon-support">
      <span>Support</span>
    </button>
    <button class="ds-button--plain ds-button--icon-basic-user">
      <span>sorao@soracom.jp</span>
    </button>
  </aside>
</header>

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.

<header class="ds-header--color-celeste">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
</header>

Soracom

User console

<header class="ds-header--color-celeste">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
</header>
<header class="ds-header--color-celeste-lighter">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
  <aside class="ds-header__controls">
    <button class="ds-button--plain ds-button--icon-coverage ds-button--color-celeste-dark">
      <span>Japan</span>
    </button>
    <button class="ds-button--plain ds-button--icon-support ds-button--color-celeste-dark">
      <span>Support</span>
    </button>
    <button class="ds-button--primary ds-button--icon-basic-user ds-button--color-celeste-shade">
      <span>sorao@soracom.jp</span>
    </button>
  </aside>
</header>

Soracom

User console

<header class="ds-header--color-celeste-lighter">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
  <aside class="ds-header__controls">
    <button class="ds-button--plain ds-button--icon-coverage ds-button--color-celeste-dark">
      <span>Japan</span>
    </button>
    <button class="ds-button--plain ds-button--icon-support ds-button--color-celeste-dark">
      <span>Support</span>
    </button>
    <button class="ds-button--primary ds-button--icon-basic-user ds-button--color-celeste-shade">
      <span>sorao@soracom.jp</span>
    </button>
  </aside>
</header>

Styles 

Custom styles exist for specific use cases.

Dark style 

Example of --dark which remains dark in dark/light mode
<header class="ds-header--dark">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
</header>

Soracom

User console

<header class="ds-header--dark">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
</header>